Le app web hanno una grande copertura. Sono disponibili su più piattaforme. Sono facili da condividere tramite link. Tuttavia, tradizionalmente non erano integrate con il sistema operativo. Non molto tempo fa non erano nemmeno installabili. Fortunatamente, la situazione è cambiata e ora possiamo sfruttare questa integrazione per aggiungere funzionalità utili alle nostre PWA. Vediamo alcune di queste opzioni.
Utilizzare il file system
Un tipico flusso di lavoro dell'utente che utilizza i file è il seguente:
- Scegli un file o una cartella dal dispositivo e aprili direttamente.
- Apporta le modifiche ai file o alle cartelle e salvale direttamente.
- Creare nuovi file e cartelle.
Prima dell'API File System Access, le app web non potevano farlo. L'apertura dei file richiedeva un caricamento, il salvataggio delle modifiche richiedeva il download e il web non aveva accesso per creare nuovi file e cartelle nel file system dell'utente.
L'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 un clic sul pulsante. Ecco il resto della configurazione per l'apertura di un file:
- Acquisisci l'handle del file dall'API del selettore di file dell'accesso al file system. Vengono visualizzate informazioni di base sul file.
- Utilizzando il metodo
getFile()
dell'handle, otterrai un tipo speciale diBlob
chiamatoFile
che include proprietà di sola lettura aggiuntive (come il nome e la data dell'ultima modifica) relative al file. Poiché si tratta di un blob, è possibile chiamare i metodi Blob, ad esempiotext()
, 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();
Salvataggio delle modifiche in corso…
Per salvare le modifiche a un file, è necessario anche un gesto dell'utente. A questo punto:
- Utilizza l'handle del file per creare un
FileSystemWritableFileStream
. - Apporta modifiche allo stream. In questo modo, il file non verrà aggiornato in blocco, ma in genere viene creato un file temporaneo.
- Infine, quando hai finito di apportare le modifiche, chiudi lo stream, in modo che le modifiche diventino permanenti.
Vediamo come funziona 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 Accesso al file system ti consente di aprire file dall'interno della tua app, ma che dire del contrario? Gli utenti vogliono impostare la loro app preferita come predefinita per l'apertura dei file. L'API di gestione dei file è un'API sperimentale che consente alle PWA installate di: Registrarsi come gestori 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 nel file system dell'utente, che potrà aprirla direttamente al suo interno. Ecco un esempio di configurazione del manifest per una PWA che legge i file di testo:
...
"file_handlers": [
{
"action": "/open-file",
"accept": {
"text/*": [".txt"]
}
}
]
...
Gestione degli URL
Con la gestione degli URL, la tua PWA può acquisire i link che fanno parte del suo ambito dal sistema operativo e visualizzarli in 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 autonoma.
Questo comportamento è disponibile automaticamente su Android quando viene utilizzato WebAPK, ad esempio quando gli utenti installano una PWA con Chrome. Non è possibile 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. Questa specifica è attualmente sperimentale e aggiunge un nuovo membro del file manifest: url_handlers
. Questa proprietà prevede un array di origini che la PWA vuole acquisire. L'origine della tua PWA verrà concessa automaticamente e ogni altra origine deve accettare la gestione tramite un file denominato web-app-origin-association
.
Ad esempio, se il manifest della tua PWA è ospitato su web.dev e vuoi aggiungere l'origine app.web.dev, il codice sarà il seguente:
"url_handlers": [
{"origin": "https://app.web.dev"},
]
In questo caso, il browser controllerà se esiste un file in app.web.dev/.well-known/web-app-origin-association
, accettando la gestione dell'URL dall'URL ambito della PWA. Questo file deve essere creato dallo sviluppatore. Nell'esempio seguente, il file ha il seguente aspetto:
{
"web_apps": [
{
"manifest": "/mypwa/app.webmanifest",
"details": {
"paths": [ "/*" ]
}
}
]
}
Gestione del protocollo URL
La gestione degli URL funziona con gli URL di protocollo https
standard, ma è possibile utilizzare schemi URI personalizzati, come pwa://
. In diversi sistemi operativi, le app installate acquisiscono questa capacità registrando i propri schemi.
Per le PWA, questa funzionalità è abilitata utilizzando l'API URL protocol handler, disponibile solo sui computer. Puoi consentire protocolli personalizzati solo per i dispositivi mobili distribuendo la tua PWA sugli store.
Per la registrazione, puoi utilizzare il metodo registerProtocolHandler() o il membro protocol_handlers
nel file manifest, con lo schema e l'URL che vuoi caricare nel contesto della tua 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 tua PWA. %s
è un segnaposto per l'URL con caratteri di escape che ha attivato l'operazione, quindi se da qualche parte hai un link come <a href="web+pwa://testing">
, la tua PWA aprirà /from-protocol?value=testing
.
Chiamate ad altre app
Puoi utilizzare gli schemi URI per connetterti a qualsiasi altra app installata (PWA o meno) sui dispositivi degli utenti su ogni piattaforma. Devi solo creare un link o utilizzare navigator.href
e indicare lo schema URI che preferisci, passando gli argomenti in formato URL codificato.
Puoi utilizzare schemi standard ben noti, come tel:
per le chiamate, mailto:
per l'invio di email o sms:
per i messaggi; oppure puoi scoprire gli schemi URL di altre app, ad esempio di messaggistica, mappe, navigazione, riunioni online, social network e store di app ben noti.
Condivisione web
Con l'API Web Share, la tua PWA può inviare contenuti ad altre app installate sul dispositivo tramite il canale condiviso.
L'API è disponibile solo sui sistemi operativi con un meccanismo share
, tra cui Android, iOS, iPadOS, Windows e ChromeOS.
Puoi condividere un oggetto contenente:
- Testo (proprietà
title
etext
) - Un URL (proprietà
url
) - File (proprietà
files
).
Per verificare se il dispositivo corrente può condividere dati semplici, come il testo, controlla la presenza del metodo navigator.share()
, mentre per condividere file controlla la presenza del metodo navigator.canShare()
.
Richiedi l'azione di condivisione chiamando navigator.share(objectToShare)
. Questa chiamata restituisce una promessa che si risolve con undefined
o viene rifiutata con un'eccezione.
Target di condivisione web
L'API Target di condivisione web consente alla tua PWA di essere il target di un'operazione di condivisione da un'altra app sul dispositivo, che si tratti o meno di una PWA. La tua 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 tua PWA. Il browser registra la destinazione della condivisione all'interno del sistema operativo quando l'app è installata.
Imposti il target di condivisione web nel file manifest con il membro share_target
definito nella specifica della bozza del target di 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 del verbo HTTP, ad esempio
GET
,POST
oPUT
. enctype
- (Facoltativo) Tipo di codifica per i parametri. Per impostazione predefinita è
application/x-www-form-urlencoded
, ma può essere impostato anche sumultipart/form-data
per metodi comePOST
. params
- Un oggetto che mappa i dati condivisi (dalle chiavi
title
,text
,url
efiles
di Condivisione web) agli argomenti che il browser passerà nell'URL (inmethod: 'GET'
) o nel corpo della richiesta utilizzando la codifica selezionata.
Ad esempio, puoi definire per la tua PWA che vuoi ricevere dati condivisi (solo titolo e URL) aggiungendo al manifest:
...
"share_target": {
"action": "/receive-share/",
"method": "GET",
"params": {
"title": "shared_title",
"url": "shared_url"
}
}
...
Nell'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 /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 dalla stringa window.location
analizzandola con il costruttore URL
.
Il browser utilizzerà il nome e l'icona della PWA dal manifest per alimentare la voce di condivisione del sistema operativo. Non puoi scegliere un altro set per questo scopo.
Per esempi più dettagliati e su come ricevere i file, consulta Ricevere i 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 tua PWA può quindi ricevere i dati che ti interessano da questi contatti.
L'API Contact Picker è disponibile principalmente sui dispositivi mobili e tutto viene eseguito tramite l'interfaccia navigator.contacts
sulle piattaforme compatibili.
Puoi richiedere le proprietà disponibili per eseguire query con navigator.contacts.getProperties()
e richiedere la selezione di uno o più contatti con un elenco delle 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 ricevere in cambio.
Il seguente esempio elenca 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
- L'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
- Eseguire l'integrazione con l'interfaccia utente di condivisione del sistema operativo con l'API Web Share
- Condividere contenuti con altre app
- Ricezione dei dati condivisi con l'API Web Share Target
- Un selettore di contatti per il web