Passa ai contenuti principali

Blogger (Google) - Creare una PWA per il Blog


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 - LinuxServer 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:

<html>
<head>
 
 <!-- ************************ -->
 <!-- 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 -->
 <!-- ************************ -->

 
 <title>dicecca.net - Blog - WebApp</title>
 
 </head>
 
 <body>
 
 <h1>Questo &egrave; la <strong>Progessive Web App
</strong> per il tuo dispostivo Chrome del Blog</h1>
 </body>
 </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:

<META HTTP-EQUIV="Refresh" CONTENT="0; URL=https://blog.dicecca.net/">

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.


Commenti

Post più popolari

Mac OS X - Installare ed usare una stampante sul Print Server GetNet 3 Port 2 USB e 1 LPT

Abbiamo visto come installare il Print Server GetNet 3 in 1 sui più diffusi sistemi operativi Windows (vedi articoli correlati in fondo al post). La "scatoletta" ha anche un protocollo di comunicazione Apple Talk, quindi può essere collegata (fare da tramite) anche a stampanti che abbiano la gestione post script integrata (quasi tutte le stampanti salvo quelle del gruppo Ricoh che hanno bisogno di un apposito moduol installato) sul Mac. Print Server GetNet 1 Parallela e 2 USB Il metodo di installazione è molto simile a quello visto su Windows, con la differenza sostanziale che non è necessario scegliere tra moltissimi modelli, ma si gestisce in modo più semplice. Purtroppo sul Mac non è possibile (allo stato attuale) collegare print server di tipo TP-Link, ovvero replicatori di porta USB su Lan, in quanto non esiste un driver adatto. Detto questo, consideriamo la stampante che vogliamo collegare al Mac. Il caso che abbiamo usato nei precedenti post,

BlackBerry - Importare i dati da altri cellulari

English translated post Un amico mi porta un BlackBerry Pearl 8110 e mi chiede di trasferire i dati dal suo cellulare Nokia a questo telefono. Premesso che personalmente non ho mai reputato il BlackBerry un telefono "semplice", l'operazione si è reputata piuttosto complessa. Scartata l'idea di mandare i vcard via bluetooth (come si fa con quasi tutti i Nokia e Samsung), l'unica alternativa è quella di appoggiarsi a Microsoft Outlook !!! Come fare? 1 - Installare il Microsoft Outlook (XP o 2003) nel proprio PC 2 - Installare (nel caso specifico del Nokia) il programma Nokia PC Suite 3 - Sincronizzare solo la Rubrica (ovviamente dipende sempre se il cellulare Nokia è il Vostro o di un Vostro amico) del Nokia con l'Outlook, così che tutti i dati presenti nella Rubrica siano copiati nella sezione Contatti dell'Outlook 4 - Scaricare l'ultima versione del BlackBerry Desktop Manager (se il pacchetto è quello Vodafone, la versione sul CD non è mo

Joomla! - Mettere la testata in Stampa

Come è noto Joomla! è uno dei più usati CMS (Content Managment System) che consente di avere un ambiente (environment) sul quale costruire e sviluppare siti e portali. Uno dei problemi più noti è quello di poter inserire la testata nel file da stampare. Ad esempio se il mio sito si chiama dicecca.net - Blog ed ha un logo particolare che voglio pubblicare come testata, nella conformazione classica, non posso farlo. Come risolvere? Premesso che tutto il sistema è scritto in linguaggio PHP, il file che viene chiamato in causa è component.php che si trova nella cartella /[sito (1)] /templates/system Il file ( che è possibile scaricare qui in formato testo ), alla riga 40 inizia il Body del testo. Alla riga 41 inizia l'inclusione del testo dell'articolo che si è deciso di stampare, che a sua volta viene aperto in una finestra popup. Dando un taso invio, dalla riga 41 è possibile inserire il riferimento ad una immagine e/o un formattato HTML della testata del nos