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

Afficher votre PWA à côté des applications spécifiques à une plate-forme dans les UI de partage au niveau du système

Jeff Posnick

Joe Medley

Sam Richard

L'API Web Share Target vous permet d'afficher votre application Web progressive dans une feuille de partage au niveau du système d'un utilisateur après son installation. Bien que cela fonctionne parfaitement si vous disposez d'un serveur pour recevoir la requête, il est beaucoup plus difficile de le faire fonctionner si vous n'en avez pas.

Dans cet article, nous allons utiliser Workbox, un ensemble de bibliothèques JavaScript permettant d'ajouter la prise en charge hors connexion aux applications Web, pour créer une URL cible de partage 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é.

Sur la même page

Si vous ne connaissez pas le fonctionnement de Web Share Target, l'article Receiving shared data with the Web Share Target API (Réception des données partagées avec l'API Web Share Target) vous fournit une présentation détaillée. Voici un récapitulatif rapide.

L'implémentation de la fonctionnalité de cible de partage Web se fait en deux étapes. Tout d'abord, mettez à jour le fichier manifeste de votre application Web pour indiquer que vous souhaitez que votre application soit une cible de partage lorsqu'elle est installée. L'exemple suivant redirige les partages vers l'URL /share via une requête POST. Il est encodé sous la forme d'un formulaire multipartite, avec le titre appelé name, le texte appelé description et les images JPEG appelées photos.

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

Cibles de partage de service worker avec Workbox

Bien que normalement géré par un point de terminaison de serveur, une astuce intéressante que vous pouvez utiliser pour une cible de partage consiste à enregistrer un itinéraire directement dans votre service worker pour gérer la requête. Cela permettra à votre application d'être une cible de partage sans backend.

Pour ce faire, dans Workbox, enregistrez un itinéraire géré par votre service worker. Commencez par importer registerRoute depuis 'workbox-routing'. Notez qu'il est enregistré pour la route /share, la même que celle listée dans l'exemple de fichier manifeste de l'application Web. En réponse, il appelle shareTargetHandler().

import { registerRoute } from 'workbox-routing';

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

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

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 quelque part avec une requête fetch. Vous pouvez même utiliser les autres options de fichier manifeste, peut-être en diffusant une page avec des paramètres de requête pour les autres éléments partagés ou en stockant les données et les pointeurs vers le contenu multimédia dans l'API Cache Storage ou IndexedDB.

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

Une action courante consiste à conserver les 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 application Web progressive aux appareils des utilisateurs, en la mettant au même niveau que les applications spécifiques à la plate-forme pour la tâche essentielle 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 un itinéraire cible de partage directement dans votre service worker, votre application est libérée de cette contrainte, ce qui permet à Share Target de fonctionner pour les applications hors connexion et sans backend.

Photo de Elaine Casap sur Unsplash