web-dev-qa-db-ja.com

Web通知コンテンツをクリップボードにコピーする方法

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_を取得しています。私も自分のウェブサイトに安全なドメインを使用しています。また、Service Workerを使用してDOMにアクセスできないため、document.execcommand('copy')を使用できません。 URLを開かずに通知コンテンツをコピーする方法を提案できますか？

javascriptservice-workerweb-notifications
10
Pawan Aichra

クライアント postMessage 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はこの機能をサポートしていないことに注意してください。

2
Gilsdav