Partager via

Intégrer des applications Web progressives avec Windows Share

  • Article

Cet article explique comment intégrer une application Web progressive (PWA) à la fonctionnalité Windows Share. Cette fonctionnalité permet aux utilisateurs de partager du contenu d'une application Windows à une autre. La PWA s'enregistre en tant que cible Share pour recevoir et traiter les fichiers partagés au sein de l'application.

Qu'est-ce qu'une cible Share?

Cible Share est une fonctionnalité qui a été introduite dans Windows 8 et qui permet à une application de recevoir des données d'une autre application. Cible Share fonctionne comme un presse-papiers, mais avec un contenu dynamique.

Partager du contenu à partir de votre PWA

Pour partager du contenu, une PWA génère du contenu (texte, liens ou fichiers) et transmet le contenu partagé au système d'exploitation. Le système d'exploitation laisse l'utilisateur décider de l'application qu'il souhaite utiliser pour recevoir ce contenu. Les PWA peuvent utiliser l'API Web Share pour déclencher l'affichage de la feuille de partage dans Windows. L'API Web Share est prise en charge par Microsoft Edge et d'autres navigateurs basés sur Chromium.

Pour un exemple complet de partage de contenu à partir d'une PWA, consultez la section Partage de contenu dans la documentation de Microsoft Edge.

Recevoir des fichiers partagés dans votre PWA

Pour recevoir du contenu, une PWA fait office de cible de contenu. La PWA doit être enregistrée auprès du système d'exploitation en tant que cible de partage de contenu.

Le membre share_target doit contenir les informations nécessaires pour que le système transmette le contenu partagé à votre application. Considérez l'exemple suivant de configuration du manifeste share_target :

"share_target": {
  "action": "./share_target_path/?custom_param=foo",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "mapped_files",
        "accept": ["image/jpeg"]
      }
    ]
  }
},

Lorsque votre application est sélectionnée par l'utilisateur comme cible de contenu partagé, la PWA est lancée. Une requête HTTP GET est adressée à l'URL spécifiée par la propriété action. Les données partagées sont transmises en tant que paramètres de requête title, text et url. La requête suivante est formulée : /handle-shared-content/?title=shared title&text=shared text&url=shared url.

L'exemple suivant illustre la manière d'enregistrer le service worker défini :

navigator.serviceWorker.register('scoped-service-worker.js',
                { scope: "./share_target_path/" })

Le service worker traite les données de partage comme il le souhaite, puis exécute la requête ou la redirige hors du chemin personnalisé. L'exemple suivant montre comment rediriger la requête hors du chemin personnalisé :

self.addEventListener('fetch', (event) => {
    event.respondWith((async () => {
        // Read the shared data here, then
        // Redirect back out of the share_target_path to the actual site
        return Response.redirect(event.request.url.replace("share_target_path/", ""));
    })());
    return;
});

Pour plus d'informations, consultez l'exemple Recevoir du contenu partagé dans la documentation Microsoft Edge.

Considérations relatives aux performances

Si le gestionnaire de récupération est ajouté uniquement pour la prise en charge des partages, des problèmes potentiels de latence peuvent survenir, car les requêtes sont interrompues par le gestionnaire de service. Pour résoudre ce problème, envisagez de définir le share_target comme un pseudo-sous-chemin et d'enregistrer un agent de service spécifiquement adapté à ce chemin. Cette approche permet d'utiliser un gestionnaire de récupération pour la cible de partage sans enregistrer le même gestionnaire de récupération pour d'autres appels.

Exemple d'application PWA

L'application d'exemple d'impression de logo PWA sur GitHub montre comment intégrer une PWA à la feuille de partage de Windows. L'application permet aux utilisateurs d'imprimer le logo de la PWA sur une imprimante. L'application utilise la feuille Windows Share pour partager le logo avec d'autres applications.

Voir aussi