Integrazione del sistema operativo

Le app web hanno una grande copertura. Vengono eseguiti su più piattaforme. Sono facili da condividere tramite link. Tradizionalmente, però, mancava l'integrazione con il sistema operativo. Fino a non molto tempo fa, non erano nemmeno installabili. Fortunatamente le cose sono cambiate e ora possiamo sfruttare questa integrazione per aggiungere funzionalità utili alle nostre PWA. Esaminiamo alcune di queste opzioni.

Lavorare con il file system

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

• Seleziona un file o una cartella sul 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 eseguire questa operazione. L'apertura dei file richiedeva il caricamento di un file, il salvataggio delle modifiche richiedeva agli utenti di scaricarli e il web non aveva alcun 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 su un pulsante. Ecco il resto della procedura per l'apertura di un file:

1. Acquisisci l'handle del file dall'API del selettore file di accesso al file system. In questo modo otterrai informazioni di base sul file.
2. Se utilizzi il metodo getFile() dell'handle, ottieni un tipo speciale di Blob denominato 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 chiamare metodi BLOB, come text(), per ottenerne 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, è necessario anche un gesto dell'utente: quindi:

1. Utilizza l'handle del file per creare una FileSystemWritableFileStream.
2. Apporta modifiche allo stream. Il file non verrà aggiornato. viene creato un file temporaneo.
3. Infine, quando hai finito di apportare modifiche, chiudi lo stream e le modifiche passano da temporanee a permanenti.

Vediamo come 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 di file

L'API File System Access ti consente di aprire i file dall'interno dell'app, ma cosa accade invece? Gli utenti vogliono impostare l'app preferita come app predefinita con cui aprire i file. L'API File Management è un'API sperimentale che consente alle PWA installate di: Registrati come gestore di file sul dispositivo di un utente, specificando il tipo MIME e l'estensione del file supportati dalla PWA nel file 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 file manifest per una PWA per leggere i 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 visualizzarli all'interno di una finestra della PWA, invece che 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 separata.

Questo comportamento è disponibile automaticamente su Android quando viene utilizzato 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. Questa specifica è attualmente sperimentale; viene aggiunto 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 ogni altra origine deve accettare questa gestione che opera 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, l'aspetto 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 dell'ambito PWA. Lo sviluppatore deve creare questo file. Nell'esempio seguente, il file ha il seguente aspetto:

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

Gestione del protocollo degli URL

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

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

Per registrarti, puoi utilizzare il metodoregisterProtocolprov() o utilizzare il membro protocol_handlers nel file manifest, con lo schema desiderato e l'URL da caricare nel contesto della PWA, ad esempio:

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

Puoi instradare 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, ad esempio <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 (o PWA) nell'account utente su ogni piattaforma. Devi solo creare un link o utilizzare navigator.href e puntare allo schema URI che vuoi, passando gli argomenti sotto forma di URL con caratteri di escape.

Puoi utilizzare schemi standard noti, ad esempio tel: per le telefonate, mailto: per l'invio di email o sms: per i messaggi di testo. oppure puoi trovare informazioni su altre app Schemi di URL, ad esempio relativi a messaggi, mappe, navigazione, riunioni online, social network e store 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 meccanismo share, inclusi Android, iOS, iPadOS, Windows e ChromeOS. Puoi condividere un oggetto contenente:

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

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

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

Target condivisione web

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

Al momento è 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 nelle specifiche della bozza di target 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à usato il metodo verbale HTTP, ad esempio GET, POST o PUT.

enctype

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

params

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

di Gemini Advanced.

Ad esempio, puoi definire per la PWA che vuoi ricevere i dati condivisi (solo titolo e URL) aggiungendo nel file 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 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, analizzandoli con il costruttore URL.

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

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

Selezionatore contatti

Con l'API Contact Selecter, puoi richiedere al dispositivo di eseguire il rendering di una finestra di dialogo nativa con tutti i contatti dell'utente, in modo che quest'ultimo possa sceglierne uno o più. La PWA può quindi ricevere i dati che vuoi da questi contatti.

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

Puoi richiedere le proprietà disponibili per eseguire query con navigator.contacts.getProperties() e richiedere una singola o più selezione di 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), trasmettendo un array di proprietà che vuoi ricevere in cambio.

Nel seguente esempio saranno 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
• Consenti alle applicazioni web installate di diventare gestori di file
• Gestire i file nelle app web progressive
• Integrazione con l'interfaccia utente di condivisione del sistema operativo con l'API Web Share
• Condividere contenuti con altre app
• Ricezione di dati condivisi con l'API Web Share Target
• Un selettore contatti per il web