Javascript 如何将web通知内容复制到剪贴板

我正在使用Firebase云消息（FCM）发送数据消息，以便我可以使用服务工作者处理通知。现在，我使用Service Worker显示通知，当我单击通知时，我希望将通知的内容复制到剪贴板中

const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler((payload)=> {
    const title = payload.data.title;
    const options = {
        body: payload.data.body
    };
    return self.registration.showNotification(title,
        options);
});

self.addEventListener('notificationclick', (event)=>{
    console.log(event);
    navigator.clipboard.writeText(event).then(function() {
        console.log('Async: Copying to clipboard was successful!');
      }, function(err) {
        console.error('Async: Could not copy text: ', err);
      });
});

单击通知时，

notificationclick

事件被触发。但我发现

navigator.clipboard

未定义。我也使用我的网站的安全域。我也无法使用

document.execcommand（'copy'）

，因为无法使用Service Worker访问DOM。您能建议一种不打开任何url复制通知内容的方法吗？

您可以使用客户端API：

服务人员：

self.addEventListener('notificationclick', (event)=>{
    console.log(event);

    if (!event.clientId) return;
    const client = await clients.get(event.clientId);
    if (!client) return;

    client.postMessage({
      type: 'clipboard',
      msg: event
    });
});

简单脚本：

navigator.serviceWorker.addEventListener('message', event => {
  if(event.data.type === 'clipboard') {
      navigator.clipboard.writeText(event.data.msg).then(function() {
        console.log('Async: Copying to clipboard was successful!');
      }, function(err) {
        console.error('Async: Could not copy text: ', err);
      });
  }
});

---

请记住，Safari不支持此功能。

您无法从ServiceWorker复制到剪贴板。您需要一个活动的前台浏览器选项卡/窗口才能复制到剪贴板

const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler((payload)=> {
    const title = payload.data.title;
    const options = {
        body: payload.data.body
    };
    return self.registration.showNotification(title,
        options);
});

self.addEventListener('notificationclick', (event)=>{
    console.log(event);
    navigator.clipboard.writeText(event).then(function() {
        console.log('Async: Copying to clipboard was successful!');
      }, function(err) {
        console.error('Async: Could not copy text: ', err);
      });
});

从chrome web更新存档

与许多新API一样，navigator.clipboard仅支持通过HTTPS提供的页面为帮助防止滥用，仅当页面是活动选项卡时才允许访问剪贴板。活动选项卡中的页面可以在不请求权限的情况下写入剪贴板，但从剪贴板读取总是需要权限。

我还检查了ServiceWorkers和Clipboard API的浏览器规范，没有定义任何关于ServiceWorkers上下文的特定内容

编辑：关于这个具体问题，我已经向那篇文章的作者发了ping

我不相信它在服务人员中可用。我的建议是让通知单击处理程序打开一个尚未打开的页面，并在收到事件时在该页面内同步调用writeText（）

---

我认为你们需要这样：你们将能够在客户端做你们想做的事情。如果对您有帮助，请告诉我，我会让您感觉必须打开实际的浏览器窗口才能运行copy命令，否则您将无法访问该API。也许打开它，复制和关闭可以像从未发生过的那样发生？即使知道它不理想，我也会尝试了解它是如何运行的。@Gilsdav as postMessage仅适用于DOM，但我不想打开任何窗口。@enapupe是的，navigator.cilpborad将不起作用。但我正在寻找其他方法来实现同样的目标。正如我提到的，我不想打开一页。那么我们将如何执行简单的脚本呢？我认为您可以打开一个只复制到clipbloard

clients.openWindow

的窗口，然后直接关闭它自己。