Pubblicato il 28/01/24 - aggiornato il  | Nessun commento :

Trasformare siti in app con le Progressive Web App di Edge e Chrome

Convertire una pagina web di un sito in una Progressive Web App o PWA con i browser Chrome e Edge per creare icone nel desktop e aprirle senza browser

Il nome delle Progressive Web App, spesso indicate con l'acronimo PWA o anche con il nome italiano Applicazioni Web Progressive, è stato coniato da Google e si riferisce ad applicazioni web che vengono sviluppate e caricate come normali pagine web ma che si comportano in modo simile alle applicazioni native che girano nei dispositivi mobili. Si tratta di un ibrido tra pagine web e applicazioni che sfrutta le funzionalità dei moderni browser con il beneficio non secondario di poter essere usate anche in mobilità.

Sebbene siano state pensate per rendere più fluida la navigazione da mobile possono essere utilizzate anche nei computer desktop per migliorare la produttività e l'esperienza d'uso. Come esempio delle PWA si può pensare a Youtube o a WhatsApp. Se dallo smartphone tocchiamo su un link che riguarda questi siti, non si apre il browser ma l'applicazione corrispondente. Possiamo fare la stessa cosa anche su computer desktop oppure limitarci a aprire l'app relativa al sito in oggetto solo all'occorrenza. Per le pagine dei siti che non supportano le PWA si possono creare delle scorciatoie nel desktop per aprirle con un doppio click come se fossero dei collegamenti a programmi.

In questo post vedremo come creare le PWA con i browser Chrome e Edge e come impostarne le preferenze. Per controllare le app che sono state installate su Chrome si può aprire la pagina chrome://apps/ mentre per visualizzare quelle installate su Edge la pagina da aprire è quella edge://apps/. Probabilmente avrete nei vostri browser delle app installate a vostra insaputa perché può capitare di installarle senza rendercene conto.

Ho pubblicato sul mio Canale Youtube una guida per installare le PWA dai browser Edge e Chrome.

Nei PC Windows le PWA installate vengono aggiunte anche all'elenco dei programmi che può essere visualizzato nel Pannello di Controllo o nelle Impostazioni andando su App → App Installate. Vedremo separatamente come installare le Progressive Web App da Chrome e da Edge e come eventualmente disinstallarle.

COME INSTALLARE LE PWA DA CHROME

Alcuni siti permettono l'installazione nativa delle PWA. Tra gli altri ricordo Youtube, WhatsApp Web, X (ex Twitter) e Telegram Web. Per i siti che non lo consentono si può ovviare su Chrome creando delle scorciatoie.

Si apre la pagina web del sito che può essere la home ma anche una pagina qualsiasi. Si clicca sul menù dei 3 puntini.

Tra le opzioni che si visualizzano si sceglie Salva e Condividi. Se il sito a cui appartiene la pagina supporta le PWA allora si visualizzerà il link Installa [nome del sito] che nello screenshot precedente è Youtube.

Dopo averci cliccato sopra si visualizzerà un popup in cui andare su Installa per confermare la volontà. L'icona con il collegamento al sito verrà aggiunta nel desktop e l'applicazione si potrà visualizzare anche nella griglia di quelle installate su Chrome aprendo la pagina chrome://apps/. In basso a destra visualizzeremo anche un popup che mostra l'opzione per aggiungere l'app nella TaskBar. Con un doppio click sul collegamento apriremo il sito.

pwa di youtube

Non si aprirà però su Chrome ma in una scheda indipendente. Potremo cioè utilizzare l'app PWA anche senza aprire il browser Chrome. Queste applicazioni possono anche essere disinstallate con diverse procedure.

Si può per esempi aprire la pagina chrome://apps/ e cliccare con il destro del mouse sull'app in oggetto.

disinstallare le PWA

Nel menù si sceglie Disinstalla quindi si va su Rimuovi. Alternativamente si può aprire il Pannello di Controllo e andare su Programmi → Disinstalla un programma. Si seleziona l'app dall'elenco in ordine alfabetico quindi ci si clicca sopra con il destro del mouse e si va su Disinstalla. Infine si possono aprire le Impostazioni e andare su App → App Installate. Si cerca l'app quindi si va su Disinstalla nel menù.

COME INSTALLARE LE PWA DA EDGE

I siti che supportano le PWA vengono rilevati da Edge che ne mostra l'icona nella Barra degli Indirizzi.

installare X su Edge

Nello screenshot precedente viene mostrata la Home di X (ex Twitter) che supporta le PWA. Cliccando sulla icona mostrata accanto all'indirizzo della pagina web visualizzeremo un popup in cui andare su Installa.

Su Edge si possono fare delle personalizzazioni ulteriori rispetto a Chrome. Verrà infatti aperta una nuova finestra.

opzioni PWA

Si mette la spunta su una o più autorizzazioni per la PWA. Si può aggiungere alla Barra delle Applicazioni, si può aggiungere al menù Start, si può creare un collegamento nel desktop (consigliato) e si può avviare automaticamente la PWA all'apertura del dispositivo. Dopo aver apposto le flag desiderate si clicca su Consenti.

Anche le PWA create con Edge possono essere disinstallate con diverse modalità. Si può aprire per esempio la pagina edge://apps/ e cliccare su Disinstalla dopo aver aperto il menù dei tre puntini della PWA in oggetto.

disinstallare PWA di Edge

Come alternativa si può andare su Impostazioni → App → App installate, cercare l'app in questione, cliccare sul suo menù e scegliere Disinstalla. La disinstallazione di una PWA eliminerà anche il suo collegamento dal desktop.

COME CREARE DELLE SCORCIATOIE PER I SITI NON PWA

Solo alcuni siti supportano le PWA ma si possono creare applicazioni anche per quelli che non le supportano, sia su Chrome ma soprattutto nel browser Edge. Su Chrome si apre la pagina web di cui creare una scorciatoia.

Si va nel menù dei tre puntini e, come visto in precedenza, si va su Salva e Condividi. Stavolta non ci sarà Installa [nome sito] quindi si clicca su Crea scorciatoia. Si aprirà un'altra finestra in cui opzionalmente modificare il nome del sito. Prima di andare su Crea si può opzionalmente mettere la spunta su Apri come finestra.

Se non si mette tale spunta, un doppio click sul collegamento aprirà la scheda del browser. Se invece si mette tale spunta, l'applicazione aprirà il sito esattamente come fosse una PWA in una scheda indipendente del browser.

creare scorciatoia su chrome

Su Edge invece anche le pagine dei siti che non supportano le PWA possono essere installati come App.

Si apre una pagina web, si va nel menù dei tre puntini quindi si clicca su App → Installa il sito come app.

installare sito come app su edge

Ci verrà mostrato un popup in cui opzionalmente modificare il nome dell'app e andare su Installa.

Visualizzeremo lo stesso menù delle PWA in cui selezionare le autorizzazioni e andare su Consenti.

disinstallare le app su edge

Con un doppio click sui collegamenti aggiunti al desktop si apriranno delle schede come quelle delle PWA. Per la loro disinstallazione, si apre la pagina delle app su Edge quindi si va su Disinstalla nel menù dei tre puntini per ogni app da rimuovere. Si potranno eliminare anche andando su Impostazioni → App → App installate.



Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy