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 UI de partage au niveau du système

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 le faire si ce n'est pas le cas.

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 de partage cible 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é.

Téléphone Android avec le panneau "Partager via" ouvert.
Sélecteur de cible de partage au niveau du système avec une PWA installée appelée Share Target Test en option.

Sur la même page

Si vous ne connaissez pas le fonctionnement de la cible de partage Web, consultez Recevoir des données partagées avec l'API Web Share Target pour en savoir plus. Voici un bref récapitulatif.

La mise en œuvre de la fonctionnalité de partage Web cible se fait en deux étapes. Tout d'abord, modifiez le fichier manifeste de votre application Web pour indiquer que vous souhaitez que votre application soit une cible de partage lors de son installation. L'exemple suivant redirige les partages vers l'URL /share via une requête POST. Il est encodé sous forme multipart, 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"]
      }
    ]
  }
}

Partager des cibles avec Workbox

Bien que normalement géré par un point de terminaison de serveur, vous pouvez enregistrer un parcours 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, dans Workbox, enregistrez un parcours géré par votre service worker. Commencez par importer registerRoute à partir de 'workbox-routing'. Notez qu'il est enregistré pour l'itinéraire /share, le même que celui indiqué 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. Elle prend l'événement, attend les données du formulaire, puis en 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 ailleurs à l'aide d'une requête de récupération. Vous pouvez même utiliser les autres options de fichier manifeste, en diffusant peut-être 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 éléments multimé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 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, les mettant ainsi sur un pied d'égalité avec les applications spécifiques à la plate-forme pour la tâche cruciale de partage de contenu entre les applications. Toutefois, cela nécessite généralement un serveur disponible pour recevoir la requête. En utilisant Workbox pour créer un chemin de cible de partage directement dans votre service worker, votre application est exempte de cette contrainte, ce qui permet à Share Target de fonctionner pour les applications hors connexion et sans backend.

Photo par Elaine Casap sur Unsplash