Integra le Progressive Web App con Windows Share

In questo articolo viene illustrato come integrare un'app Web progressiva (PWA) con la funzionalità Windows Share. Questa funzionalità consente agli utenti di condividere contenuti da un'app Windows a un'altra. La PWA si registra come destinazione di condivisione per ricevere e gestire i file condivisi all'interno dell'app.

Che cos'è Share Target?

La destinazione di condivisione è una funzionalità introdotta in Windows 8 che consente a un'app di ricevere dati da un'altra app. La destinazione di condivisione funziona come gli Appunti, ma con contenuto dinamico.

Condividere i contenuti dalla PWA

Per condividere il contenuto, una PWA genera contenuti (come testo, collegamenti o file) e passa il contenuto condiviso al sistema operativo. Il sistema operativo consente all'utente di decidere quale app usare per ricevere il contenuto. Le PWA possono usare l'API Web Share API per visualizzare lo Share Sheet in Windows. L'API di condivisione Web è supportata in Microsoft Edge e negli altri browser basati su Chromium.

Vedere Condivisione del contenuto nella documentazione di Microsoft Edge per un esempio completo di come condividere il contenuto da una PWA.

Ricevi file condivisi nella tua PWA

Per ricevere contenuto, una PWA funge da destinazione del contenuto. La PWA deve essere registrata con il sistema operativo come destinazione di condivisione del contenuto.

Il membro share_target deve contenere le informazioni necessarie affinché il sistema passi il contenuto condiviso all'app. Si consideri il seguente esempio di configurazione di share_target del manifest:

"share_target": {
  "action": "./share_target_path/?custom_param=foo",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "mapped_files",
        "accept": ["image/jpeg"]
      }
    ]
  }
},

Quando l'app viene selezionata dall'utente come destinazione del contenuto condiviso, viene avviata la PWA. Viene effettuata una richiesta HTTP POST all'URL specificato dalla proprietà action. I dati condivisi vengono inviati a tale URL quando viene richiamata la destinazione di condivisione.

L'esempio seguente illustra come registrare il service worker con ambito definito:

navigator.serviceWorker.register('scoped-service-worker.js',
                { scope: "./share_target_path/" })

Il service worker gestisce i dati condivisi come desiderato e quindi o completa la richiesta oppure la reindirizza al di fuori del percorso personalizzato. Nell'esempio seguente viene illustrato come far tornare la richiesta fuori dal percorso personalizzato:

self.addEventListener('fetch', (event) => {
    event.respondWith((async () => {
        // Read the shared data here, then
        // Redirect back out of the share_target_path to the actual site
        return Response.redirect(event.request.url.replace("share_target_path/", ""));
    })());
    return;
});

Vedere l'esempio di Ricezione del contenuto condiviso nella documentazione di Microsoft Edge per altre informazioni.

Considerazioni sulle prestazioni

Se il gestore fetch viene aggiunto esclusivamente per supportare la condivisione, potrebbero verificarsi problemi di latenza poiché le richieste vengono intercettate dal service worker. Per risolvere questo problema, considera di impostare share_target come pseudo sottopercorso e di registrare un service worker con ambito specificamente limitato a quel percorso. Questo approccio abilita l'uso di un gestore di recupero per la destinazione di condivisione senza dover registrare lo stesso gestore di recupero per altre chiamate.

Esempio di app PWA

L'app di esempio stampa con logo PWA su GitHub dimostra come integrare una PWA con lo strumento di condivisione Windows. L'app consente agli utenti di stampare il logo PWA su una stampante. L'app usa lo strumento di condivisione Windows per condividere il logo con le altre app.

Vedi anche

  • Last updated on