Abbiamo affrontato in precedenza un articolo che illustrava come creare una semplice PWA (Progressive Web App) che consente di bypassare la costruzione di una App vera e propria nativa per avere il pulsante sullo smartphone Android o PC/Mac.
Quanto esposto vale per qualsiasi tipo di sito web sul quale si ha un controllo totale della gestione dei file (quindi Hosting oppure Web Server proprietari [1]), ma "vale un po' meno" per tutte quelle strutture come Blogger dove non si ha lo stesso tipo di controllo.
[1] - Ref.: The Matrix Machine Project - Linux, Server Aruba
Non si può quindi fare una PWA?
La risposta è ni, ovvero si deve avere uno spazio web esterno a blogger dove avere un https accedibile da ftp sul quale appoggiare i dati che ci servono per creare la nostra PWA, ovvero manifest.json e sw.js
Noi ci rifaremo al nostro dicecca.net - Web Site, spazio web con https che non ospita il blog in senso stretto (per ragioni storiche che si perdono nella notte dei tempi del web)
Sul nostro sito, abbiamo creato una cartella Blog che contiene i file necessari:
index.html (o php)
manifest.json
sw.js
Il file index.html
Il file index.html (o php a seconda di quanto vogliamo perdere tempo) è quello più semplice da scrivere, poiché contiene solo le chiamate agli altri due file.
Un esempio semplice di codice potrebbe essere questo:
<head>
<!-- ************************ -->
<!-- Begin PWA by dicecca.net -->
<!-- ************************ -->
<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 -->
<!-- ************************ -->
<title>dicecca.net - Blog - WebApp</title>
</head>
<body>
<h1>Questo è la <strong>Progessive Web App</strong> per il tuo dispostivo Chrome del Blog</h1>
</html>
In verde sono evidenziate i commenti che delimitano il codice per la PWA, mentre in giallo sono evidenziati i file da chiamare, come descritto nel precedente articolo.
La differenza la fanno i due file di sistema manifest.json e sw.js.
Il file manifest.json
Come detto, il programma si trova su un sito e quello che dobbiamo vedere si trova da un'altra parte... a "migliaia di chilometri" dal nostro sito, il file manifest.json fa la differenza:
{
"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/blog.html",
"display": "fullscreen",
"lang": "it-IT",
"background_color": "#fff",
"theme_color": "#fff",
"orientation": "portrait-primary"
}
Non mi dilungo sui dettagli, essendo gli stessi del precedente articolo (vedi bibliografia a fine articolo), ma il file selezionato in giallo ha il suo motivo
Il file blog.html
Se il nostro blog sta a migliaia di km dal nostro sito, allora dobbiamo dire alla nostra PWA di caricarlo.
In questo file andiamo ad inserire il seguente codice:
che altro non fa che caricare il blog con l'url intero (in giallo)
Il file sw.js
In ultimo il Service Worker, che come manifest.json, carica i dati dal sito dove si trova la WebApp, deve essere instradato:
/*************************************************
* Progressive Web App - dicecca.net - Blog
*
* dEC Framework
*
* (C) 2021 - dicecca.net - Editorial Video Lab.
* dEC - dicecca.net/Enterprise-Company
*************************************************
*
* Questo è il Service Worker della PWA del
*
* dicecca.net - Blog su Blogger
*
*************************************************/
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/blog.html',
'/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);
})
);
});
Evidenziato il giallo ci sono i due file da inserire, quello dell'icona e quello che deve materialmente caricare il blog.
Andando sul sito www.dicecca.net/blog, avremo
Versione molto scarna e dimostrativa (come da file index.html mostrato in precedenza), oppure
un po' più barocca
In entrambi i casi si deve cliccare il banner a footer dello smartphone.
Sul nostro smartphone Android avremo:
Se usiamo il browser Chrome su PC, avremo questo:
Analogo discorso su Microsoft Edge
Una volta installata su Windows 10 avremo:
Cioè sia l'icona sul Desktop che nel Pulsante Start di Windows 10
Cancellare la Progressive WebApp dal PC
Se da smartphone Android è relativamente semplice, ovvero si disinstalla come una qualsiasi App, su PC va disinstallata dall'App stessa:
Come da immagine si clicca sui tre puntini e poi Disinstallare dicecca.net - blog.
- Introduttivo alla problematiche generali di una PWA generica
- Specifico nella costruzione dei VirtuaHost su porta 443
- SSL su Multi PHP
Commenti