Una PWA (Progressive Web Application) è un sito web, o parte di esso, che gira in un device come se fosse proprio un'app e, meraviglia delle meraviglie, può girare anche offline.
Ma non è il solo vantaggio avere un sito come PWA, infatti viene avvantaggiata l'usabilità, navigazione quasi istantanea, ecc vediamo ora come passare a trasformare il nostro sito in una PWA.
Ovviamente servono dei minimi requisiti: il sito deve avere un certificato https, deve essere responsivo.
Iniziamo col creare il file manifest che chiameremo manifest.json usando notepad++ o simili
{ "name": "Sito", "short_name": "Sito", "icons": [ { "src": "images/icons/iapple-touch-icon-144x144.png", "sizes": "144x144", "type": "image/png" },{ "src": "images/icons/iapple-touch-icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { { "src": "images/icons/iapple-touch-icon-512x512.png", "sizes": "512x512", "type": "image/png" }], "start_url": "/index.php", "display": "fullscreen", "lang": "it-IT", "background_color": "#3E4EB8", "theme_color": "#2F3BA2", "orientation" : "portrait-primary" "scope" : ""}
Vediamo cosa significano le varie sezioni di codice:
- name: Inseriamo il nome completo del sito
- short-name: Inseriamo un nome breve del sito, (non deve superare i 12 caratteri)
- icons: inseriamo il percorso alle icone, minimo due da 192x192 e 512x512
- start_url: Inseriamo la pagina iniziale che si aprirà quando si lancia l'applicazione, (non deve essere necessariamente la home del sito)
- display: Si possono inserire varie opzioni come:
- standalone: Apre l'app Web per sembrare un'app nativa autonoma. L'app viene eseguita in una finestra separata, separata dal browser, e nasconde gli elementi dell'interfaccia utente del browser standard come la barra degli indirizzi, ecc.
- fullscreen: Apre l'applicazione Web senza alcuna interfaccia utente del browser e occupa l'intera area di visualizzazione disponibile.
- minimal-ui: Non supportato da Chrome
Questa modalità è simile a schermo intero, ma fornisce all'utente alcuni mezzi per accedere a un insieme minimo di elementi dell'interfaccia utente per il controllo della navigazione (ad esempio, indietro, avanti, ricarica, ecc.). - browser: Un'esperienza browser standard.
- lang: Inseriamo la lingua principale del sito
- background_color: Quì impostiamo il colore di sfondo della splash screen della app
- theme_color: Dovrebbe corrispondere al colore del tema meta specificato nel titolo del documento.
- orientation: quì impostiamo l'orientamento verticale od orizzontale (landscape) della app.
- scope:
Ora salviamo e carichiamo il file manifest.json nella root e inseriamo il richiamo inserendo questo codice:<link rel="manifest" href="/manifest.json">
nell'head del sito.
Creiamo adesso un secondo file Service Worker che chiameremo sw.js
// Copyright 2016 Google Inc.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
È importante inserire correttamente tutti gli url delle pagine che si vogliono mntenere in cache, immagini, css, js, font, ecc.
Per caricare il file sw.js dobbiamo aggiungere un terzo file di registrazione load.js
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registrato con successo con scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('Registrazione di ServiceWorker fallita: ', err);
});
});
}come prima va inserito nell'head del sito con
<link rel="manifest" href="/load.js">
A questo punto dobbiamo verificare se abbiamo fatto tutto bene, per questo ci serviremo di chrome e del DEV TOOL.
Apriamo la pagina del nostro sito da chrome (almeno versione 70) , cancelliamo la cach e e apriamo il DEV TOOL (percorso altri strumenti --> Strumenti per sviluppatori.
Se tutto ok possiamo aprire da smartphone e browser chrome (almeno versione 70) il nostro sito, una volta aperto dovrebbe comparire un box che ci invita ad aggiungere il nostro sito alla schermata iniziale, se non compare basta cliccare in alto a destra e cliccare sempre su aggiungi a schermata iniziale.
Se tutto è andato come dovrebbe abbiamo una versione APP del nostro sito.
Prossimamente vedremo come ottimizzare e verificare la procedura per sfruttare al masssimo i vantaggi delle PWA.
