How to copy web notification content to clipboard

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.

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.