Partager via

Intégrer Progressive Web Apps à Windows Share

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 vers une autre. La PWA s’inscrit en tant que cible de partage pour recevoir et gérer des fichiers partagés au sein de l’application.

Qu’est-ce que la cible de partage ?

La cible de partage est une fonctionnalité introduite dans Windows 8 et permet à une application de recevoir des données d’une autre application. Share Target fonctionne comme un Presse-papiers, mais avec du contenu dynamique.

Partager du contenu à partir de votre PWA

Pour partager du contenu, une PWA génère du contenu (par exemple, du texte, des liens ou des fichiers) et remet le contenu partagé au système d’exploitation. Le système d’exploitation permet à l’utilisateur de décider de l’application à utiliser pour recevoir ce contenu. Les PWA peuvent utiliser l’API de partage Web pour déclencher l’affichage de la fenêtre de partage dans Windows. L’API Web Share est prise en charge dans Microsoft Edge et dans d’autres navigateurs chromium.

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

Recevoir des fichiers partagés dans votre PWA

Pour recevoir du contenu, une PWA agit en tant que cible de contenu. La PWA doit être inscrite auprès du système d’exploitation en tant que cible de partage de contenu.

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

"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 pour le contenu partagé, la PWA est lancée. Une GET requête HTTP est envoyée à l’URL spécifiée par la action propriété. Les données partagées sont passées en tant que paramètres de requête title, text et url. La requête suivante est effectuée : /handle-shared-content/?title=shared title&text=shared text&url=shared url.

L’exemple suivant montre comment inscrire le worker de service étendu :

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

Le worker du service gère les données de partage comme vous le souhaitez, puis répond à la demande, ou il peut rediriger la requête 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;
});

Consultez l’exemple réception de contenu partagé dans la documentation Microsoft Edge pour plus d’informations.

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 de latence potentiels peuvent survenir lorsque les demandes sont interrompues par le worker du service. Pour résoudre ce problème, envisagez de définir le share_target comme un pseudo sous-chemin et d'enregistrer un service worker spécifiquement assigné à ce chemin. Cette approche permet l’utilisation d’un gestionnaire d’extraction pour la cible de partage sans inscrire le même gestionnaire d’extraction pour d’autres appels.

Exemple d’application PWA

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

Voir aussi

  • Last updated on