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

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

L'API Web Share Target vous permet d'afficher votre progressive web app feuille de partage au niveau du système de l'utilisateur après son installation. Même si cela fonctionne très bien si vous avez un serveur disponible pour recevoir la demande, il est beaucoup plus difficile de travailler si vous ne le faites pas.

Dans cet article, nous utiliserons Workbox, un ensemble de fichiers JavaScript, Bibliothèques permettant d'ajouter un fonctionnement hors connexion aux applications Web, afin de créer une URL cible de partage qui se trouve entièrement dans votre service worker. Cela permet aux sites statiques et les applications monopages servent de cibles de partage sans point de terminaison de serveur dédié.

<ph type="x-smartling-placeholder">
</ph> Téléphone Android avec l&#39;option &quot;Partager via&quot; panneau ouvert. <ph type="x-smartling-placeholder">
</ph> Sélecteur de cible de partage au niveau du système avec une PWA installée appelée Share Target Test.

Sur la même page

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

L'implémentation de la fonctionnalité cible de partage Web s'effectue en deux étapes. Tout d'abord, Mettez à jour le fichier manifeste de votre application Web pour indiquer que celle-ci doit être partagée cible 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 s'appelle description et les images JPEG sont 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"]
      }
    ]
  }
}

Service worker partage des cibles avec Workbox

Bien que normalement géré par un point de terminaison de serveur, une astuce intéressante que vous pouvez faire pour un partage consiste à enregistrer une route directement dans votre service worker afin de gérer requête. Votre application pourra ainsi devenir une cible de partage sans backend.

Pour ce faire dans Workbox, procédez comme suit : pour enregistrer une route gérée par votre service worker. Commencez par importer registerRoute de 'workbox-routing'. Notez qu'il est enregistré pour /share, la même que celle listée dans l'exemple de fichier manifeste d'application Web. Dans elle appelle shareTargetHandler().

import { registerRoute } from 'workbox-routing';

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

La fonction shareTargetHandler() est asynchrone et accepte l'événement, attend les données du formulaire, puis récupère les fichiers multimédias à partir de celle-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. Toi vous pouvez les envoyer quelque part avec une requête de récupération. Vous pouvez même utiliser les autres les options du fichier manifeste, en diffusant peut-être une page avec des paramètres de requête éléments partagés, ou le stockage des données et des pointeurs vers les médias dans le stockage cache API ou IndexedDB.

Vous pouvez l'essayer dans l'application exemple Fugu Journal et afficher son service worker dans sa source du code.

Vous pouvez par exemple mettre en attente les ressources partagées jusqu'à ce que connexions disponibles. Workbox est également compatible avec l'arrière-plan périodique Google Sync.

Conclusion

L'API Share Target permet d'intégrer facilement en profondeur votre Progressive Web sur les appareils des utilisateurs, afin de les placer au même niveau que les applications spécifiques à la plate-forme pour est une tâche essentielle de partage de contenu entre les applis. Mais cela nécessite généralement disponible pour recevoir la requête. En utilisant Workbox pour créer un partage directement dans votre service worker, cela n'affecte pas votre application ce qui permet aux applications de fonctionner hors connexion backends.

Photo par Elaine Casap sur Unsplash