Integrazione delle PWA nelle UI di condivisione integrate con Workbox

Come fare in modo che la tua PWA venga visualizzata accanto alle app specifiche della piattaforma nelle UI di condivisione a livello di sistema

Jeff Posnick

Joe Medley

Sam Richard

L'API Web Share Target ti consente di visualizzare la tua app web progressiva in un foglio di condivisione a livello di sistema dell'utente dopo l'installazione. Sebbene funzioni perfettamente se hai un server disponibile per ricevere la richiesta, è molto più difficile farlo funzionare se non ne hai uno.

In questo articolo utilizzeremo Workbox, un insieme di librerie JavaScript per aggiungere il supporto offline alle app web, per creare un URL di destinazione di condivisione che risiede interamente all'interno del service worker. In questo modo, i siti statici e le app a pagina singola possono fungere da destinazioni di condivisione senza un endpoint server dedicato.

In questa pagina

Se non hai familiarità con il funzionamento di Web Share Target, Ricevere dati condivisi con l'API Web Share Target fornisce un'introduzione approfondita. Ecco una breve recensione.

L'implementazione della funzionalità di destinazione di condivisione web è composta da due parti. Innanzitutto, aggiorna il manifest dell'app web per indicare che vuoi che la tua app sia una destinazione di condivisione quando viene installata. L'esempio seguente indirizza le condivisioni all'URL /share tramite una richiesta POST. Viene codificato come un modulo multipart, con il titolo chiamato name, il testo chiamato description e le immagini JPEG chiamate photos.

…
"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "name",
    "text": "description",
    "files": [
      {
        "name": "photos",
        "accept": ["image/jpeg", ".jpg"]
      }
    ]
  }
}
…

Destinazioni di condivisione dei service worker con Workbox

Sebbene normalmente gestita da un endpoint server, una soluzione interessante che puoi adottare per una destinazione di condivisione è registrare una route direttamente nel service worker per gestire la richiesta. In questo modo, la tua app può essere una destinazione di condivisione senza un backend.

Per farlo in Workbox by registra una route gestita dal service worker. Inizia importando registerRoute da 'workbox-routing'. Tieni presente che è registrato per la route /share, la stessa elencata nell'esempio di manifest dell'app web. In risposta, chiama shareTargetHandler().

import { registerRoute } from 'workbox-routing';

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

La funzione shareTargetHandler() è asincrona, accetta l'evento, attende i dati del modulo e poi recupera i file multimediali da questi.

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

A questo punto puoi fare quello che vuoi con questi file. Puoi memorizzarli nella cache. Puoi inviarli da qualche parte con una richiesta di recupero. Puoi anche utilizzare le altre opzioni del manifest, ad esempio pubblicare una pagina con alcuni parametri di query per gli altri elementi condivisi o archiviare i dati e i puntatori ai contenuti multimediali nell'API IndexedDB o in IndexedDB.

Puoi provarlo sull'app di esempio Fugu Journal e vedere la sua implementazione del service worker nel suo codice sorgente.

Una cosa comune che potresti fare è conservare le risorse condivise finché non sono disponibili connessioni di rete migliori. Workbox supporta anche la sincronizzazione periodica in background sync.

Conclusione

L'API Share Target è un modo semplice per integrare in modo approfondito la tua app web progressiva nei dispositivi degli utenti, mettendola alla pari con le applicazioni specifiche della piattaforma per l'attività fondamentale di condivisione dei contenuti tra le app. Tuttavia, in genere è necessario un server disponibile per ricevere la richiesta. Sfruttando Workbox per creare una route di destinazione di condivisione direttamente nel service worker, la tua app non è soggetta a questo vincolo, consentendo a Share Target di funzionare per le app offline e senza backend.