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

Link al Web

Lista di Comandi Linux Mozilla FireFox / Thunderbird / FileZilla Portable FireFox Download localizzati FireFox Portable - Pagina download localizzati ThunterBird Portable - Pagina dei download localizzati FileZilla Portable Avast Avast Download Avast Registrazione Vecchie versioni Avast Attivazione della copia gratuita per 1 anno Adobe Reader Get Adobe Acrobat e Adobe Reader Cartella tutte le versioni Adobe Reader da scaricare offline Microsoft 365 Accedere ad area riservata Microsoft 365 Scarica Office (365 o versione unica) dal Sito Microsoft Windows 365 VideoLAN VLC Video Player Pagina di Download di VLC Pix Resizer for Windows Pagina dell'autore del programma WinRAR Preleva winrar Java Runtime & Development Kit (Java SDK) Java SE Downloads NetBeans Java Runtime Editio Download Pagine Facebook Rendere Amministratore di una pagina Convertitore Immagine 2 ASCII Art PICASCII Adobe Flash Pl

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 è molto efficac