How to copy web notification content to clipboard

Question

I am using Firebase Cloud Messaging (FCM) to send Data messages so that I can handle notification using Service Worker. Now I show the notification using Service Worker and when I click the notification I want to copy the content of notification in the clipboard.

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);
      });
});

When notification is clicked notificationclick event is fired. But I am getting navigator.clipboard as undefined. I am also using secured domain for my website. I am also not able to use document.execcommand('copy') because DOM is not accessible using Service Worker. Can you please suggest a way to copy notification content without opening any url?

Answer 1

You cannot copy to clipboard from a ServiceWorker. You need an active foreground browser tab/window to copy to clipboard.

From chrome web updates archive https://developers.google.com/web/updates/2018/03/clipboardapi

As with many new APIs, navigator.clipboard is only supported for pages served over HTTPS. To help prevent abuse, clipboard access is only allowed when a page is the active tab. Pages in active tabs can write to the clipboard without requesting permission, but reading from the clipboard always requires permission.

I've also checked browser specs for both ServiceWorkers and Clipboard APIs and none defines anything specific about service workers context.

Edit: I've pinged the author of that post about this specific issue https://mobile.twitter.com/_developit/status/1264290519926128641

I don't believe it's available in service worker. My suggestion would be to have the notification click handler open a page if not already open, and call writeText() synchronously within that page when it received the event.

Answer 2

You can use Client postMessage API:

Service worker :

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
    });
});

Simple script :

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);
      });
  }
});

Just keep in mind Safari does not support this feature.