Integrazione delle PWA nelle UI di condivisione integrate con Workbox

Come mostrare la tua PWA accanto ad app specifiche per piattaforma nelle UI di condivisione a livello di sistema

L'API Web Share Target ti consente di visualizzare la tua app web progressiva in una foglio di condivisione a livello di sistema dell'utente dopo l'installazione. Anche se è ideale se hai un server disponibile per ricevere la richiesta, è molto più difficile iniziare a farlo se non si riceve.

In questo articolo useremo Workbox, un insieme di JavaScript librerie per aggiungere il supporto offline alle app web, al fine di creare un URL di destinazione per la condivisione che risiede interamente all'interno del service worker. Ciò consente ai siti statici e le app a pagina singola fungono da target di condivisione senza un endpoint server dedicato.

Smartphone Android con la funzionalità "Condividi tramite" riquadro a scomparsa aperto.
. Selettore del target di condivisione a livello di sistema con una PWA installata di nome Share Target Test opzionale.

Sulla stessa pagina

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

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


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

Condivisione dei target dei service worker con Workbox

Anche se normalmente gestito da un endpoint server, un trucco perfetto per una condivisione registrare una route direttamente nel Service worker per gestire richiesta. In questo modo la tua app potrà essere una destinazione di condivisione senza un backend.

Per farlo in Workbox devi: registrando una route gestita dal tuo service worker. Inizia importando registerRoute da 'workbox-routing'. Tieni presente che è registrata /share, la stessa elencata nel file manifest dell'app web di esempio. Nella risposta che chiama shareTargetHandler().

import { registerRoute } from 'workbox-routing';

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

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

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 procedere come preferisci con questi file. Puoi memorizzarle nella cache. Tu può inviarle una richiesta di recupero. Puoi anche utilizzare l'altro del file manifest, ad esempio pubblicando una pagina con alcuni parametri di query elementi condivisi o l'archiviazione di dati e puntatori ai contenuti multimediali nella sezione Archiviazione cache dell'API o IndexedDB.

Puoi provarla nell'app di esempio Fugu Journal e vedere il service worker implementazione nella sua fonte il codice sorgente.

Una cosa comune che potresti fare è conservare le risorse condivise fino a quando una rete e le connessioni disponibili. Workbox supporta anche la visualizzazione periodica degli sfondi sincronizzazione.

Conclusione

L'API Share Target è un modo semplice per integrare in modo approfondito il tuo Progressive Web l'applicazione nei dispositivi degli utenti, in modo che possano essere paragonate alle applicazioni specifiche della piattaforma per il è fondamentale per la condivisione di contenuti tra le app. Ma per farlo di solito è necessario server disponibile per ricevere la richiesta. Utilizzando Workbox per creare una condivisione di destinazione direttamente nel Service worker, la tua app è priva di che consente il funzionamento di Share Target per le app in modalità offline e senza di backend.

Foto di Elaine Casap su Unsplash