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

L'API target di condivisione web ti consente di mostrare la tua app web progressiva in un scheda 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 l'aggiunta del supporto offline alle app web, per creare un URL di destinazione della condivisione 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.

Smartphone Android con il riquadro a scomparsa "Condividi tramite" aperto.
Selezionatore di destinazione di condivisione a livello di sistema con un'opzione PWA installata chiamata Share Target Test.

Nella stessa pagina

Se non sai come funziona la destinazione di condivisione web, consulta la sezione Ricevere i dati condivisi con l'API Web Share Target per un'introduzione approfondita. Ecco una breve recensione.

L'implementazione della funzionalità di targeting per la quota di condivisione web è composta da due parti. Innanzitutto, aggiornate il manifest dell'app web per indicare che volete che l'app sia un target di condivisione quando è installata. L'esempio seguente indirizza le condivisioni all'URL /share tramite una richiesta POST. È codificato come modulo multipartito, 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"]
      }
    ]
  }
}

I service worker condividono i target con Workbox

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

In Workbox, lo fai registrando un percorso gestito dal tuo service worker. Inizia importando registerRoute da 'workbox-routing'. Tieni presente che è registrato per il percorso/share, lo stesso elencato 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 e poi 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 ciò 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 memorizzare 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 suo servizio worker nel codice sorgente.

Una cosa comune che potresti fare è mantenere 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 in modo approfondito la tua app web progressiva nei dispositivi degli utenti, mettendoli alla pari con le applicazioni specifiche della piattaforma per la compito fondamentale della condivisione di contenuti tra app. Tuttavia, in genere è necessario un server disponibile per ricevere la richiesta. Sfruttando Workbox per creare un percorso di destinazione della condivisione direttamente nel tuo 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