web-dev-qa-db-fra.com

Comment copier le contenu de la notification Web dans le presse-papiers

J'utilise Firebase Cloud Messaging (FCM) pour envoyer des messages de données afin de pouvoir gérer les notifications à l'aide de Service Worker. Maintenant, j'affiche la notification à l'aide de Service Worker et lorsque je clique sur la notification, je veux copier le contenu de la notification dans le presse-papiers.

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

Lorsque la notification est cliquée, l'événement notificationclick est déclenché. Mais j'obtiens navigator.clipboard Comme indéfini. J'utilise également un domaine sécurisé pour mon site Web. Je ne peux pas non plus utiliser document.execcommand('copy') car DOM n'est pas accessible à l'aide de Service Worker. Pouvez-vous suggérer un moyen de copier le contenu des notifications sans ouvrir aucune URL?

javascriptservice-workerweb-notifications
10
Pawan Aichra

Vous pouvez utiliser Client postMessage API:

Employé de service:

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

Script simple:

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

Gardez simplement à l'esprit que Safari ne prend pas en charge cette fonctionnalité.

2
Gilsdav