Comment faire afficher votre PWA aux côtés des applications natives dans les interfaces utilisateur de partage au niveau du système
L'API de destination de partage Web vous permet d'afficher votre Application Web progressive sur le partage natif d'un utilisateur drap de lit après son installation. Bien que cela fonctionne très bien si vous avez un serveur disponible pour recevoir la demande, il est beaucoup plus difficile de se mettre au travail si vous ne le faites pas.
Dans cet article, nous utiliserons
Boîte de travail, un ensemble de bibliothèques JavaScript pour ajouter une prise en charge hors ligne aux applications Web, pour créer une URL de destination partagée entièrement intégrée à votre service worker. Cela permet aux sites statiques et aux applications à page unique de servir de destinations pour le partage sans point de terminaison de serveur dédié.
Sélecteur de destination partagé au niveau du système avec un PWA installé nommé
Partager le test cible Comme une option.
Dans la même page
Si vous ne connaissez pas le fonctionnement de Web Share Target, Recevoir des données partagées avec l'API Web Share Target vous donne une introduction détaillée. Voici un bref examen.
L'implémentation de la fonctionnalité cible de partage Web comporte deux parties. Tout d'abord, mettez à jour le manifeste de votre application Web pour indiquer que vous souhaitez que votre application soit une destination partagée lors de son installation. L'exemple suivant dirige les actions vers / Compartir URL via PUBLIER demander. Il est codé sous forme de formulaire en plusieurs parties et le titre est appelé
patate douce, texte appelé la description, et les images JPEG sont appelées Photos.
...
"share_target" : {
"action" : "/ partager" ,
"méthode" : "POST" ,
"enctype" : "multipart / form-data" ,
"params" : {
"title" : "name" ,
"texte" : "description" ,
"fichiers" : [
{
"nom" : "photos" ,
"accepter" : [ "image / jpeg" , ".jpg" ]
}
]
}
}
...Le technicien de service partage ses objectifs avec Workbox
Bien que normalement géré par un point de terminaison de serveur, une bonne astuce que vous pouvez faire pour une cible partagée consiste à enregistrer une route directement auprès de votre service worker pour gérer la demande. Cela permettra à votre application d'être une cible de partage sans backend.
Vous faites cela dans Boîte de travail consigner un itinéraire conduit par votre technicien de service. Commencez par importer
registerRoute de 'routage de boîte de travail'. Veuillez noter que vous êtes inscrit pour
/ Compartir route, la même que celle qui apparaît dans le manifeste de l'exemple d'application Web. En réponse, appelez shareTargetHandler ().
importer { registerRoute } depuis 'workbox-routing' ; registerRoute (
'/ partager' ,
shareTargetHandler ,
'PUBLIER'
) ;
Les shareTargetHandler () La fonction est asynchrone et prend l'événement, attend les données du formulaire, puis récupère les fichiers multimédias à partir de cela.
fonction asynchrone shareTargetHandler ( { event } ) {
const formData = attendre l' événement . demande . formData ( ) ;
const mediaFiles = formData . getAll ( 'média' ) ; for ( const mediaFile of mediaFiles ) {
} ) ;
} ;
Vous pouvez alors faire ce que vous voulez avec ces fichiers. Vous pouvez les mettre en cache. Vous pouvez les envoyer quelque part avec une demande de récupération. Vous pouvez même utiliser les autres options du manifeste, peut-être servir une page avec des paramètres de requête pour les autres éléments partagés ou stocker les données et les pointeurs vers le média dans le API de mise en cache
ou IndexedDB.
Vous pouvez l'essayer dans l'exemple d'application Journal de Fugu et affichez l'implémentation de votre service worker dans votre code source.
Une chose courante que vous pouvez faire est de conserver les ressources partagées jusqu'à ce que de meilleures connexions réseau soient disponibles. Workbox prend également en charge 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 sur les appareils des utilisateurs, en les mettant au même niveau que les applications natives 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 demande. En tirant parti de Workbox pour créer un chemin de destination partagé directement dans votre service worker, votre application est libre de cette restriction, ce qui permet à Share Target de fonctionner pour les applications hors ligne et sans backend.
photo par Elaine Casap au Unsplash
