如何将网络通知内容复制到剪贴板

Question

我正在使用 Firebase Cloud Messaging (FCM) 发送数据消息，以便我可以使用 Service Worker 处理通知。现在我使用 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。您能否建议一种无需打开任何网址即可复制通知内容的方法？

Answer 1

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

来自 chrome 网络更新存档https://developers.google.com/web/updates/2018/03/clipboardapi

与许多新 API 一样，navigator.clipboard 仅支持通过 HTTPS 提供服务的页面。为帮助防止滥用，仅当页面是活动选项卡时才允许访问剪贴板。活动选项卡中的页面无需请求许可即可写入剪贴板，但从剪贴板读取始终需要许可。

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

编辑：我已经就这个特定问题向该帖子的作者发送了邮件https://mobile.twitter.com/_developit/status/1264290519926128641

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