Il concetto di App è entrato fortemente nel nostro vivere quotidiano, ormai dal 2009, quando fu presentato iPhone 3G che cambiò radicalmente l'approccio a quello che oggi chiamiamo smartphone.
Dall'App del meteo a quella di Facebook, sembra che sul nostro schermo dello smartphone c'è un pulsante per ogni esigenza.
Per molti anni l'App è stato sinonimo di AppStore in casa Apple, Google Play per Android, passando per la sfortunata stagione del WindowsPhone (un vero peccato non aver investito), ovvero un "magazzino" dove poter scaricare/comprare il programmino da mettere sul nostro smartphone per fare qualche cosa.
In tutto questo a avere la peggio parte è stato il Web, che sembrava (e forse in parte lo è) in un declino senza limiti.
Nel 2015, Frances Berriman e lo sviluppatore Alex Russell di Google Chrome hanno coniato il termine "Progressive Web Apps" per descrivere le app che sfruttavano le nuove funzionalità offerte dai moderni browser, inclusi Service Workers e Web App Manifests, che consentono agli utenti di promuovere le WebApp affinché si comportino come applicazioni di prima classe, ovvero come applicazioni native, nel sistema operativo dei loro device.
Dato lo sviluppo più performante dei processori e, di conseguenza, dei sistemi operativi per sistemi mobili, il Web che sembrava sul viale del tramonto ha ripreso coscienza (del resto Big G ci ha fatto una carriera come motore di ricerca...)(1)
(1) Wikipedia - Progressive Web App
Requisiti per iniziare a progettare una PWA
Il requisito fondamentale per poter pensare di costruire una PWA è HTTPS, il famigerato web su porta 443 (2)
(2) Server Aruba Cloud - CentOS 7 - Installare Virtual Host SSL su Apache2 (porta 443)
Google Chorme su Andorid, PC e/o Mac OS (10.x o 11.x)
Chrome su iOS non si comporta come i sistemi precedentemente elencati
Il linguaggio di programmazione usato per lo sviluppo della nostra PWA è del tutto ininfluente
Le altre due cose che servono sono due file dentro il nostro sito:
- manifest.json
- sw.js
che vediamo ora come costruire.
Il manifest.json
Il file manifest.json, per quello che ci interessa in questo momento (non è escluso che ci possano essere altri post relativi alla PWA), deve inserire le seguenti informazioni che devono essere presenti nel sito, cioè non possono essere caricati da esterno (non è vero in assoluto, ma in questo post la penseremo così per semplicità)
short_name: inserisci il nome breve della tua WebApp (ad esempio Blog)
name: inserisci il nome completo del tuo sito web (ad esempio dicecca.net - Blog)
icons: inserisci il riferimento ad almeno una icona. Quando si salva una PWA nella schermata iniziale, Chrome cerca innanzitutto le icone che corrispondono alla densità del display e hanno una densità di 48dpi. Se nessuna icona corrispondente viene trovata, Chrome cerca l’icona più adatta alle caratteristiche del dispositivo
start_url: indirizzo di partenza del sito, generalmente è un /, oppure il path assoluto (ad esempio /blog/index.php) che fa riferimento al sito dove sta il file
display: generalmente di usa fullscreen per indicare che la nostra WebApp deve essere visualizzato a tutto schermo
lang: it-IT (la lingua del sito)
background_color: Colore di sfondo dello Splash Screen mentre avvia la WebApp
theme_color: questo valore imposta il colore della barra degli indirizzi se il campo display è impostato su browser (ha un valore differente in ambito PC, ma lo vedremo dopo)
orientation: generalmente portrait (verticale), come si tiene il telefono in mano
Vediamo un esempio concreto
{
"short_name": "Blog - dicecca.net",
"name": "dicecca.net - Blog",
"icons": [
{
"src": "/blog/ico/apple-icon-57x57.png",
"type": "image/png",
"sizes": "57x57"
},
{
"src": "/blog/ico/favicon-96x96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/blog/ico/apple-icon-144x144.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/blog/ico/android-icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "/blog/index.php",
"display": "fullscreen",
"lang": "it-IT",
"background_color": "#fff",
"theme_color": "#fff",
"orientation": "portrait-primary"
}
Il Service Worker (sw.js)
Un Service Worker è uno script che il browser esegue in background, separato da una pagina Web, aprendo la porta a funzionalità che non richiedono una pagina Web o l’interazione dell’utente.
In buona sostanza è uno script che fa partire tutto l'apparato della WebApp.
Vediamolo:
* Progressive Web App - dicecca.net - Blog
*
* dEC Framework
*
* (C) 2021 - dicecca.net - Editorial Video Lab.
*************************************************
*
* Questo è il Service Worker della PWA del
*
* dicecca.net - Blog
*
*************************************************/
self.addEventListener('install', e => {
console.log('PWA Service Worker installing.');
let timeStamp = Date.now();
e.waitUntil(
caches.open('blog_service_worker').then(cache => {
return cache.addAll([
'/blog/index.php',
'/blog/ico/android-icon-192x192.png'
])
.then(() => self.skipWaiting());
})
)
});
self.addEventListener('activate', event => {
console.log('PWA Service Worker activating.');
event.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
In giallo sono state evidenziate le righe che si possono modificare
Inserire i file nel codice del nostro sito
A questo punto dobbiamo inserire il codice della nostra WebApp nel nostro sito, generalmente nella pagina index.php, or, index.html, or, default.php, or.... qualunque sia la vostra idea di file base, dopo il tag <head> e prima del tag </head>
Vediamo come
<!-- Begin PWA by dicecca.net -->
<!-- ************************ -->
<link rel="manifest" href="/blog/manifest.json">
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/blog/sw.js')
.then(function(registration) {
console.log('Registration successful, scope is:', registration.scope);
})
.catch(function(error) {
console.log('Service worker registration failed, error:', error);
});
}
</script>
<!-- ************************ -->
<!-- Ends PWA by dicecca.net -->
<!-- ************************ -->
</head>
Carichiamo sul nostro sito i file index.php, manifest.json e sw.js ed apriamo Chrome su PC / Mac per verificare che il codice sia senza errori, usando l'opzione Altri Strumenti -> Strumenti per sviluppatori
Basta che anche uno solo dei parametri precedenti sia sbagliato che non funge più nulla.
Nel browser Chrome per PC / Mac, inseriamo l'indirizzo del nostro sito web:
In alto a destra compare la seguente immagine:
Installando, avremo, quindi, sul PC la seguente icona in tutto e per tutto uguale a quella di un qualsiasi programma PC, cliccando si avvierà un browser ridotto con il nostro Blog
Nota: Su questo specifico caso, quello di blogger, ne riparleremo in un post specifico, ma per il momento immaginiamo che vada così...
Test sullo smartphone Android
Accedendo a Chrome da Android ed andando sulla pagina del nostro sito generico, automaticamente a footer comparirà:
Cliccandovi sopra si installerà la WebApp e la conseguente icona sullo smartphone
Commenti