Integrazione delle PWA nelle UI di condivisione integrate con Workbox

Come mostrare la tua PWA accanto ad 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 nel foglio di condivisione a livello di sistema di un utente dopo l'installazione. Sebbene sia molto efficace se hai un server disponibile per ricevere la richiesta, è molto più difficile lavorare in caso contrario.

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 si trovi interamente all'interno del tuo service worker. In questo modo, i siti statici e le app a pagina singola possono essere utilizzati come target di condivisione senza un endpoint del server dedicato.

Sempre sulla stessa pagina

Se non hai familiarità con il funzionamento di Web Share Target, consulta la sezione Ricezione di dati condivisi con l'API Web Share target per un'introduzione approfondita. Ecco un riepilogo.

L'implementazione della funzionalità di destinazione della condivisione web prevede due parti. Innanzitutto, aggiorna il file manifest dell'app web per indicare che, una volta installata, vuoi che l'app sia una destinazione di condivisione. L'esempio seguente indirizza le condivisioni all'URL /share tramite una richiesta POST. È codificato come formato multiparte, con il nome name del titolo, quello del testo description e quello delle immagini JPEG chiamato photos.

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

Target di condivisione dei service worker con Workbox

Sebbene normalmente sia gestito da un endpoint del server, un trucco che puoi fare per un target di condivisione consiste nel registrare una route direttamente nel tuo service worker per gestire la richiesta. In questo modo la tua app sarà una destinazione di condivisione senza un backend.

Puoi farlo in Workbox registrando una route gestita dal tuo service worker. Inizia importando registerRoute da 'workbox-routing'. Nota che è registrata per la route /share, la stessa elencata nel file manifest dell'app web di esempio. La 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 e 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
};

Puoi quindi fare tutto ciò che vuoi con questi file. Puoi memorizzarle nella cache. Puoi inviarli da qualche parte con una richiesta di recupero. Puoi anche utilizzare le altre opzioni del file 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 Cache Storage o in IndexedDB.

Puoi provarla nell'app di esempio Fugu Journal e vedere l'implementazione del service worker nel suo codice sorgente.

Una cosa che potresti fare è archiviare a fini legali le risorse condivise fino a quando 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 profondamente la tua app web progressiva nei dispositivi degli utenti, mettendoli alla pari con le applicazioni specifiche della piattaforma per l'attività critica di condivisione di contenuti tra app. Tuttavia, questa operazione richiede generalmente un server disponibile per ricevere la richiesta. Sfruttando Workbox per creare una route di destinazione di condivisione direttamente nel service worker, la tua app è priva di questo vincolo, consentendo il funzionamento della condivisione di destinazione per le app in modalità offline e senza backend.

Foto di Elaine Casap su Unsplash