Integrazione delle PWA nelle UI di condivisione integrate con Workbox

Come visualizzare la PWA 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. Funziona alla perfezione se hai un server disponibile a ricevere la richiesta, ma è molto più difficile da configurare 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 della condivisione che si trova interamente all'interno del service worker. In questo modo, i siti statici e le app a una sola pagina possono fungere da destinazioni di condivisione senza un endpoint server dedicato.

Nella stessa pagina

Se non hai dimestichezza con il funzionamento di Web Share Target, la sezione Ricezione di dati condivisi con l'API Web Share Target offre un'introduzione approfondita. Ecco un breve riepilogo.

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. È codificato come modulo in più parti, 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"]
      }
    ]
  }
}
…

Service worker share targets con Workbox

Normalmente gestita da un endpoint server, una soluzione semplice 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 potrà essere una destinazione di condivisione senza un backend.

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

import { registerRoute } from 'workbox-routing';

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

La funzione shareTargetHandler() è asincrona e prende l'evento, attende i dati del modulo, quindi recupera i file multimediali.

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 ovunque con una richiesta di recupero. Puoi anche utilizzare le altre opzioni del manifest, ad esempio pubblicare una pagina con alcuni parametri di ricerca per gli altri elementi condivisi o archiviare i dati e i puntatori ai contenuti multimediali nell'API Cache Storage o in IndexedDB.

Puoi provarlo nell'app di esempio Fugu Journal e vedere l'implementazione del service worker nel 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.

Conclusione

L'API Share Target è un modo semplice per integrare in profondità 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 a ricevere la richiesta. Sfruttando Workbox per creare una route di destinazione di condivisione direttamente nel service worker, la tua app è libera da questo vincolo, consentendo a Share Target di funzionare per le app offline e senza backend.

Foto di Elaine Casap su Unsplash