Delen via

Progressive Web Apps integreren met Windows Share

In dit artikel wordt uitgelegd hoe u een Progressive Web App (PWA) integreert met de functie Windows Share . Met deze functie kunnen gebruikers inhoud van de ene Windows-app naar een andere delen. De PWA registreert zich als een gedeeld doelwit om gedeelde bestanden binnen de app te ontvangen en te verwerken.

Wat is de functie "Share Target"?

Share Target is een functie die is geïntroduceerd in Windows 8 en waarmee een app gegevens van een andere app kan ontvangen. Share Target werkt als een Klembord, maar met dynamische inhoud.

Inhoud delen vanuit uw PWA

Een PWA genereert inhoud (zoals tekst, koppelingen of bestanden) en geeft de gedeelde inhoud af aan het besturingssysteem om inhoud te delen. Met het besturingssysteem kan de gebruiker bepalen welke app ze willen gebruiken om die inhoud te ontvangen. PWA's kunnen de webshare-API gebruiken om het shareblad in Windows weer te geven. De Web Share-API wordt ondersteund in Microsoft Edge en andere chromium-browsers.

Zie Inhoud delen in de Microsoft Edge-documentatie voor een volledig voorbeeld van het delen van inhoud van een PWA.

Gedeelde bestanden ontvangen in uw PWA

Voor het ontvangen van content fungeert een PWA als een distributiepunt voor de inhoud. De PWA moet worden geregistreerd bij het besturingssysteem als doel voor het delen van inhoud.

Het share_target lid moet de benodigde informatie bevatten om de gedeelde inhoud naar uw app door te sturen. Bekijk de volgende voorbeeldmanifestconfiguratie 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"]
      }
    ]
  }
},

Wanneer uw app door de gebruiker is geselecteerd als doel voor gedeelde inhoud, wordt de PWA gestart. Er wordt een GET HTTP-aanvraag verzonden naar de URL die is opgegeven door de action eigenschap. De gedeelde gegevens worden doorgegeven als de title, text en url query parameters. De volgende aanvraag wordt ingediend: /handle-shared-content/?title=shared title&text=shared text&url=shared url.

In het volgende voorbeeld ziet u hoe u de scoped service worker registreert:

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

De service worker verwerkt de gedeelde gegevens naar wens en voldoet vervolgens aan de aanvraag, of kan de aanvraag omleiden naar een ander pad. In het volgende voorbeeld ziet u hoe u de aanvraag terugleidt uit het aangepaste pad:

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;
});

Zie het voorbeeld van gedeelde inhoud ontvangen in de Microsoft Edge-documentatie voor meer informatie.

Prestatie-overwegingen

Als de fetch-handler alleen wordt toegevoegd voor ondersteuning voor delen, kunnen er potentiële latentieproblemen optreden wanneer de aanvragen worden onderbroken door de servicemedewerker. U kunt dit probleem oplossen door het share_target instellen als een pseudosubpad en het registreren van een servicemedewerker die specifiek is afgestemd op dat pad. Deze aanpak maakt het gebruik van een fetch-handler mogelijk voor het sharedoel zonder dezelfde fetch-handler te registreren voor andere aanroepen.

Voorbeeld-PWA-app

De voorbeeld-app van de PWA-logoprinter op GitHub laat zien hoe u een PWA integreert met het Windows Share Sheet. Met de app kunnen gebruikers het PWA-logo afdrukken naar een printer. De app gebruikt het Windows Share Sheet om het logo te delen met andere apps.

Zie ook

  • Last updated on