Intégrez les PWA dans les interfaces utilisateur de partage intégrées avec Workbox

Faire en sorte que votre PWA s'affiche à côté des applications spécifiques à la plate-forme dans les interfaces utilisateur de partage au niveau du système

Jeff Posnick

Joe Medley

Sam Richard

L'API Web Share Target vous permet d'afficher votre progressive web app dans la feuille de partage au niveau du système d'un utilisateur une fois qu'elle a été installée. Bien que cela fonctionne très bien si vous disposez d'un serveur pour recevoir la requête, il est beaucoup plus difficile de le faire si vous ne le faites pas.

Dans cet article, nous allons utiliser Workbox, un ensemble de bibliothèques JavaScript permettant d'ajouter le mode hors connexion aux applications Web, pour créer une URL cible partagée qui se trouve entièrement dans votre service worker. Cela permet aux sites statiques et aux applications monopages de servir de cibles de partage sans point de terminaison de serveur dédié.

Sélecteur de cible de partage au niveau du système avec une option PWA installée appelée Share Target Test.

Sur la même page

Si vous ne connaissez pas le fonctionnement de la cible de partage Web, consultez la page Recevoir des données partagées avec l'API cible de partage Web pour une présentation détaillée. Voici un bref récapitulatif.

L'implémentation de la fonctionnalité de cible de partage Web s'effectue en deux étapes. Commencez par mettre à jour le fichier manifeste de votre application Web pour indiquer que vous souhaitez que votre application soit une cible de partage lors de l'installation. L'exemple suivant dirige les partages vers l'URL /share via une requête POST. Il est encodé sous la forme d'une forme en plusieurs parties, le titre étant appelé name, le texte description et les images JPEG photos.

…
"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "name",
    "text": "description",
    "files": [
      {
        "name": "photos",
        "accept": ["image/jpeg", ".jpg"]
      }
    ]
  }
}
…

Service worker de partager des cibles avec Workbox

Bien que la cible de partage soit normalement gérée par un point de terminaison de serveur, vous pouvez enregistrer une route directement auprès de votre service worker afin de traiter la requête. Votre application deviendra ainsi une cible de partage sans backend.

Pour ce faire, accédez à Workbox en enregistrant une route gérée par votre service worker. Commencez par importer registerRoute à partir de 'workbox-routing'. Notez qu'il est enregistré pour la route /share, la même que celle listée dans l'exemple de fichier manifeste d'application Web. En réponse, il appelle shareTargetHandler().

import { registerRoute } from 'workbox-routing';

registerRoute(
  '/share',
  shareTargetHandler,
  'POST'
);

La fonction shareTargetHandler() est asynchrone et reçoit l'événement, attend les données du formulaire, puis récupère les fichiers multimédias à partir de ces données.

async function shareTargetHandler ({event}) {
  const formData = await event.request.formData();
  const mediaFiles = formData.getAll('media');

  for (const mediaFile of mediaFiles) {
    // Do something with mediaFile
    // Maybe cache it or post it back to a server
  });

  // Do something with the rest of formData as you need
  // Maybe save it to IndexedDB
};

Vous pouvez ensuite faire ce que vous voulez avec ces fichiers. Vous pouvez les mettre en cache. Vous pouvez les envoyer ailleurs via une demande de récupération. Vous pouvez même utiliser les autres options du fichier manifeste, par exemple diffuser une page avec certains paramètres de requête pour les autres éléments partagés, ou stocker les données et les pointeurs vers le contenu multimédia dans l'API Cache Storage ou IndexedDB.

Vous pouvez l'essayer dans l'application exemple Fugu Journal et voir l'implémentation de son service worker dans son code source.

Une chose courante consiste à conserver des ressources partagées jusqu'à ce que de meilleures connexions réseau soient disponibles. Workbox est également compatible avec la synchronisation périodique en arrière-plan.

Conclusion

L'API Share Target est un moyen simple d'intégrer en profondeur votre progressive web app dans les appareils des utilisateurs, en les mettant au même niveau que les applications spécifiques à la plate-forme pour la tâche critique de partage de contenu entre les applications. Mais cela nécessite généralement un serveur disponible pour recevoir la requête. En utilisant Workbox pour créer une route cible de partage directement dans votre service worker, votre application élimine cette contrainte, ce qui permet à la cible de partage de fonctionner pour les applications hors connexion et sans backend.

Photo par Elaine Casap sur Unsplash