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

Afficher votre PWA à 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 application Web progressive dans la 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 la faire fonctionner si ce n'est pas le cas.

Dans cet article, nous allons utiliser Workbox, un ensemble de bibliothèques JavaScript permettant d'ajouter une compatibilité hors connexion aux applications Web, afin de créer une URL cible de partage qui réside entièrement dans votre service worker. Cela permet aux sites statiques et aux applications à page unique de servir de cibles de partage sans point de terminaison de serveur dédié.

Sur la même page

Si vous ne savez pas comment fonctionne Web Share Target, consultez la section Recevoir des données partagées avec l'API Web Share Target pour obtenir une présentation détaillée. Voici un bref aperçu.

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 une fois 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 multipart, 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 qu'il soit normalement géré par un point de terminaison de serveur, vous pouvez enregistrer une route directement dans votre service worker pour gérer la requête. Votre application pourra ainsi être une cible de partage sans backend.

Pour ce faire, enregistrez une route gérée par votre service worker dans Workbox by. 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 prend l'événement, attend les données du formulaire, puis récupère les fichiers multimédias.

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, par exemple 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 les médias 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 pratique courante consiste à conserver les ressources partagées jusqu'à ce que des connexions réseau plus performantes 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 votre application Web progressive en profondeur dans les appareils des utilisateurs, en les 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. Toutefois, cela nécessite généralement qu'un serveur soit disponible pour recevoir la requête. En tirant parti de Workbox pour créer une route cible de partage directement dans votre service worker, votre application n'est plus soumise à cette contrainte, ce qui permet à Share Target de fonctionner pour les applications hors connexion et sans backend.