Integrazione del sistema operativo

Le app web hanno una grande copertura. Vengono eseguiti su più piattaforme. Sono facili da condividere tramite link. Ma tradizionalmente mancava di integrazione con il sistema operativo. Fino a non molto tempo fa non erano nemmeno installabili. Fortunatamente la situazione è cambiata e ora possiamo trarre vantaggio da questa integrazione per aggiungere funzionalità utili alle nostre PWA. Esaminiamo alcune di queste opzioni.

Lavorare con il file system

Un tipico flusso di lavoro dell'utente che utilizza i file è simile al seguente:

• Scegli un file o una cartella dal dispositivo e aprili direttamente.
• Apporta le modifiche ai file o alle cartelle e salva le modifiche direttamente.
• Crea nuovi file e cartelle.

Prima dell'API File System Access, le app web non potevano farlo. Per aprire i file era necessario caricare i file, per salvare le modifiche gli utenti dovevano scaricarli e il web non aveva alcun accesso per creare nuovi file e cartelle nel file system dell'utente.

Apertura di un file

Per aprire un file, utilizziamo il metodo window.showOpenFilePicker(). Tieni presente che questo metodo richiede un gesto dell'utente, ad esempio il clic su un pulsante. Ecco il resto della procedura di configurazione per l'apertura di un file:

1. Acquisisci l'handle del file dall'API di selezione file dell'accesso al file system. In questo modo otterrai informazioni di base sul file.
2. Se utilizzi il metodo getFile() dell'handle, otterrai un tipo speciale di Blob chiamato File che include ulteriori proprietà di sola lettura (come nome e data dell'ultima modifica) relative al file. Poiché si tratta di un Blob, è possibile richiamare metodi Blob, come text(), per recuperarne i contenuti.

// Have the user select a file.
const [ handle ] = await window.showOpenFilePicker();
// Get the File object from the handle.
const file = await handle.getFile();
// Get the file content.
// Also available, slice(), stream(), arrayBuffer()
const content = await file.text();

È in corso il salvataggio delle modifiche

Per salvare le modifiche apportate a un file, devi avere anche un gesto dell'utente, dopodiché:

1. Utilizza l'handle del file per creare una FileSystemWritableFileStream.
2. Apporta modifiche allo stream. In questo modo il file non viene aggiornato. In genere, viene creato un file temporaneo.
3. Infine, una volta apportate le modifiche, puoi chiudere lo stream e spostare le modifiche da temporanee a permanenti.

Vediamolo nel codice:

// Make a writable stream from the handle.
const writable = await handle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();

Gestione dei file

L'API File System Access ti consente di aprire i file dall'interno dell'app, ma cosa succede il contrario? Gli utenti vogliono impostare la loro app preferita come predefinita per aprire i file. L'API per la gestione dei file è un'API sperimentale che consente alle PWA installate di: Registrarsi come gestore di file sul dispositivo di un utente, specificando il tipo MIME e l'estensione del file supportati dalla PWA nel manifest dell'app web. Puoi specificare icone di file personalizzate per le estensioni supportate.

Una volta registrata, la PWA installata verrà visualizzata come opzione del file system dell'utente, consentendogli di aprire il file direttamente al suo interno. Ecco un esempio di configurazione del manifest per una PWA per la lettura dei file di testo:

...
"file_handlers": [
     {
         "action": "/open-file",
         "accept": {
             "text/*": [".txt"]
         }
     }
]
...

Gestione degli URL

Con la gestione degli URL, la PWA può acquisire i link che fanno parte del suo ambito dal sistema operativo e mostrarli all'interno di una finestra PWA anziché nella scheda del browser predefinito. Ad esempio, se ricevi un messaggio che rimanda alla PWA o fai clic su un link diretto (un URL che rimanda a un contenuto specifico) nella PWA, i contenuti si apriranno in una finestra indipendente.

Questo comportamento è disponibile automaticamente su Android quando viene utilizzato l'APK WebAPK, ad esempio quando gli utenti installano una PWA con Chrome. È impossibile acquisire gli URL delle PWA installate su iOS e iPadOS da Safari.

Per i browser desktop, la community dei browser web ha creato una nuova specifica, che al momento è sperimentale; aggiunge un nuovo membro del file manifest: url_handlers. Questa proprietà prevede un array di origini che la PWA vuole acquisire. L'origine della PWA verrà concessa automaticamente e ciascuna altra origine deve accettare questa gestione tramite un file denominato web-app-origin-association. Ad esempio, se il manifest della PWA è ospitato su web.dev e vuoi aggiungere l'origine app.web.dev, l'URL sarà simile al seguente:

"url_handlers": [
    {"origin": "https://app.web.dev"},
]

In questo caso, il browser verificherà se un file esiste in app.web.dev/.well-known/web-app-origin-association, accettando la gestione dell'URL dall'URL di ambito PWA. Lo sviluppatore deve creare questo file. Nell'esempio seguente, il file è simile al seguente:

{
    "web_apps": [
        {
            "manifest": "/mypwa/app.webmanifest",
            "details": {
                "paths": [ "/*" ]
            }
        }
    ]
}

Gestione del protocollo URL

La gestione degli URL funziona con gli URL con protocollo https standard, ma è possibile utilizzare schemi URI personalizzati, come pwa://. In diversi sistemi operativi, le app installate ottengono questa possibilità in quanto registrano i propri schemi.

Per le PWA, questa funzionalità viene attivata utilizzando l'API del gestore di protocollo URL, disponibile solo sui dispositivi desktop. Puoi consentire protocolli personalizzati per i dispositivi mobili solo distribuendo la tua PWA sugli store.

Per eseguire la registrazione, puoi utilizzare il metodo registerProtocolHandler() o il membro protocol_handlers nel tuo manifest, con lo schema che preferisci e l'URL che vuoi caricare nel contesto della PWA, ad esempio:

...
{
  "protocol_handlers": [
    {
      "protocol": "web+pwa",
      "url": "/from-protocol?value=%s"
    },
  ]
}
...

Puoi indirizzare l'URL from-protocol al gestore corretto e ottenere la stringa di query value nella PWA. %s è un segnaposto per l'URL con caratteri di escape che ha attivato l'operazione. Di conseguenza, se hai un link in una posizione simile a <a href="web+pwa://testing">, la PWA aprirà /from-protocol?value=testing.

Chiamata ad altre app

Puoi utilizzare gli schemi URI per connetterti a qualsiasi altra app installata (PWA o meno) nei dispositivi degli utenti su ogni piattaforma. Devi solo creare un link o utilizzare navigator.href e puntare allo schema URI che preferisci, passando gli argomenti in formato URL con caratteri di escape.

Puoi utilizzare schemi standard ben noti, come tel: per le telefonate, mailto: per l'invio di email o sms: per i messaggi di testo, oppure puoi ottenere informazioni sugli schemi URL di altre app, ad esempio da quelli di messaggistica, mappe, navigazione, riunioni online, social network e store rinomati.

Condivisione web

Con l'API Web Share, la PWA può inviare contenuti ad altre app installate nel dispositivo tramite il canale condiviso.

L'API è disponibile solo sui sistemi operativi con meccanismo share, tra cui Android, iOS, iPadOS, Windows e ChromeOS. Puoi condividere un oggetto contenente:

• Testo (proprietà title e text)
• Un URL (proprietà url)
• File (proprietà files).

Per verificare se il dispositivo attuale può condividere, per dati semplici come il testo devi verificare la presenza del metodo navigator.share(), per condividere i file verifichi la presenza del metodo navigator.canShare().

Puoi richiedere l'azione di condivisione chiamando il numero navigator.share(objectToShare). La chiamata restituisce una promessa che si risolve con undefined o la rifiuta con un'eccezione.

Target condivisione web

L'API Web Share Target consente alla PWA di essere target di un'operazione di condivisione da un'altra app su quel dispositivo, indipendentemente dal fatto che si tratti di una PWA o meno. La PWA riceve i dati condivisi da un'altra app.

È attualmente disponibile su Android con WebAPK e ChromeOS e funziona solo dopo che l'utente ha installato la PWA. Il browser registra la destinazione della condivisione all'interno del sistema operativo quando l'app viene installata.

Configuri la destinazione della condivisione web nel file manifest con il membro share_target definito nella specifica della bozza della destinazione della condivisione web. share_target è impostato su un oggetto con alcune proprietà:

action

URL che verrà caricato in una finestra PWA che dovrebbe ricevere i dati condivisi.

method

Per l'azione verrà utilizzato il metodo verbale HTTP, ad esempio GET, POST o PUT.

enctype

(Facoltativo) Il tipo di codifica per i parametri. Il valore predefinito è application/x-www-form-urlencoded, ma può anche essere impostato su multipart/form-data per metodi come POST.

params

Un oggetto che mapperà i dati condivisi (dalle chiavi: title, text, url e files della condivisione web) agli argomenti che il browser trasmetterà nell'URL (su method: 'GET') o nel corpo della richiesta utilizzando la codifica selezionata.

Ad esempio, puoi definire per la PWA che vuoi ricevere i dati condivisi (solo titolo e URL) aggiungendo il tuo manifest:

...
"share_target": {
   "action": "/receive-share/",
   "method": "GET",
   "params": {
      "title": "shared_title",
      "url": "shared_url"
   }
}
...

Dall'esempio precedente, se un'app nel sistema condivide un URL con un titolo e l'utente sceglie la tua PWA dalla finestra di dialogo, il browser creerà una nuova navigazione verso il /receive-share/?shared_title=AAA&shared_url=BBB dell'origine, dove AAA è il titolo condiviso e BBB è l'URL condiviso. Puoi utilizzare JavaScript per leggere i dati della stringa window.location analizzandoli con il costruttore URL.

Il browser utilizzerà il nome e l'icona della PWA del file manifest per alimentare la voce di condivisione del sistema operativo. Non puoi scegliere un set diverso per quello scopo.

Per esempi più dettagliati e su come ricevere file, vedi Ricezione di dati condivisi con l'API Web Share Target

Selezionatore contatti

Con l'API Contact Picker, puoi richiedere al dispositivo di visualizzare una finestra di dialogo nativa con tutti i contatti dell'utente in modo che l'utente possa sceglierne uno o più. La PWA potrà quindi ricevere i dati che preferisci da quei contatti.

L'API Contact Picker è disponibile principalmente sui dispositivi mobili e tutto viene eseguito tramite l'interfaccia di navigator.contacts sulle piattaforme compatibili.

Puoi richiedere le proprietà disponibili per eseguire una query con navigator.contacts.getProperties() e richiedere la selezione di uno o più contatti con un elenco di proprietà desiderate.

Alcune proprietà di esempio sono name, email, address e tel. Quando chiedi all'utente di scegliere uno o più contatti, puoi chiamare navigator.contacts.select(properties), passando un array di proprietà che vuoi ottenere in cambio.

Nell'esempio seguente sono elencati i contatti ricevuti dal selettore.

async function getContacts() {
   const properties = ['name', 'email', 'tel'];
   const options = { multiple: true };
   try {
     const contacts = await navigator.contacts.select(properties, options);
     console.log(contacts);
   } catch (ex) {
     // Handle any errors here.
   }
}

Risorse

• API File System Access: semplificare l'accesso ai file locali
• Consentire alle applicazioni web installate di essere gestori di file
• Gestire i file nelle app web progressive
• Integrazione con l'UI di condivisione del sistema operativo con l'API Web Share
• Condividere contenuti con altre app
• Ricevere dati condivisi con l'API Web Share Target
• Un selettore contatti per il web