Passa ai contenuti principali

Web - Realizzare una semplice Progressive Web App (PWA)


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

<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 -->
 <!-- ************************ -->
 
 
 
 </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.



Verifichiamo la WebApp sul PC e sullo smartphone Android

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

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