Costruire un sito web offline con le PWA

Con i recenti progressi della tecnologia web, un numero sempre maggiore di sviluppatori sta rivolgendo la propria attenzione a Applicazioni web progressive (PWA). Le PWA consentono ai siti web di funzionare offline, offrendo agli utenti un'esperienza continua anche quando la connettività di rete è limitata o non disponibile. In questo post esploreremo cos'è una PWA, come implementare la funzionalità offline e come configurare i file essenziali, manifest.json e sw.jsper far funzionare il vostro sito web offline.

Che cos'è una PWA?

A App web progressive (PWA) è un tipo di applicazione che combina i vantaggi delle applicazioni web e native. Le PWA offrono un'esperienza utente veloce, affidabile e in grado di funzionare offline. Una delle caratteristiche principali di una PWA è la sua capacità di funzionare offline, grazie a una tecnologia nota come "a Lavoratore di servizio.

  • Progressivo: Funziona per ogni utente, indipendentemente dalla scelta del browser, e migliora progressivamente in base alle capacità del browser.
  • Reattivo: Si adatta a vari dispositivi e dimensioni dello schermo.
  • Capacità offline: Funziona anche in ambienti offline o a bassa connettività, migliorando l'esperienza dell'utente.
  • Esperienza simile a quella di un'app: Offre un'esperienza simile a quella delle app native, compresa la possibilità di essere aggiunte alla schermata iniziale e di inviare notifiche push.
  • Sempre aggiornati: Mantiene automaticamente il contenuto fresco senza aggiornamenti manuali.

Implementazione di funzionalità offline in una PWA

La funzionalità offline di una PWA è implementata principalmente utilizzando una Lavoratore di servizio. Un service worker è un file JavaScript che viene eseguito in background, intercetta le richieste di rete e serve le risorse in cache quando la rete non è disponibile. Per implementarlo, sono necessari due file essenziali:

  1. manifest.json: Un file di metadati che definisce il nome dell'applicazione, le icone, l'URL di avvio e altre impostazioni.
  2. sw.js: Un file service worker che gestisce la cache e le richieste di rete.

Analizziamo ogni file in dettaglio e forniamo degli esempi.

manifest.json File: Definizione dei metadati dell'app

Il manifest.json contiene le impostazioni dell'applicazione, come il nome, le icone, l'URL di avvio e la modalità di visualizzazione. Questo file è fondamentale per rendere l'applicazione web installabile e accessibile offline.

Esempio: manifest.json

{
  "nome": "Offline Capable PWA",
  "short_name": "PWA",
  "description": "Una progressive web app con capacità offline",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffff",
  "theme_color": "#0000ff",
  "icone": [
    {
      "src": "/icons/icon-192x192.png",
      "dimensioni": "192x192",
      "tipo": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "tipo": "image/png"
    }
  ]
}

In questo esempio:

  • indirizzo_iniziale: Definisce l'URL che verrà aperto quando l'utente lancia l'applicazione dalla schermata iniziale.
  • display: Impostare su standalone per dare all'applicazione l'aspetto e la sensazione di un'applicazione nativa senza l'interfaccia utente del browser.
  • icone: Specifica le icone da utilizzare quando l'applicazione viene aggiunta alla schermata iniziale.

Il manifest.json deve essere collegato al file HTML come segue:

.

sw.js File: Implementazione della funzionalità offline con un Service Worker

Il service worker è un componente chiave che consente all'applicazione web di funzionare offline. Intercetta le richieste di rete e serve le risorse nella cache, garantendo un'esperienza fluida anche quando la rete è interrotta.

Esempio: sw.js

Ecco un esempio di service worker di base per implementare la funzionalità offline:

const CACHE_NAME = 'offline-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/icons/icon-192x192.png',
  '/icons/icon-512x512.png'
];

// Evento di installazione per il lavoratore del servizio
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => {
        console.log('Cache aperta');
        return cache.addAll(urlsToCache); // Caching delle risorse essenziali
      })
  );
});

// Evento di attivazione per il service worker
self.addEventListener('activate', (event) => {
  console.log('Service Worker attivato');
  // La logica per cancellare le vecchie cache può essere aggiunta qui
});

// Evento Fetch per intercettare le richieste di rete
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        if (response) {
          return response; // Restituzione della risorsa in cache
        }
        return fetch(event.request) // Recupera dalla rete
          .catch(() => caches.match('/offline.html')); // Fornisce la pagina offline se la rete fallisce
      })
  );
});

In questo esempio:

  • Evento di installazione (installare): Il service worker mette in cache le risorse specificate in urlsToCache quando viene installato per la prima volta.
  • Attivare l'evento (attivare): Viene eseguito quando il service worker viene attivato. Questo evento può essere utilizzato per ripulire le vecchie cache.
  • Evento Fetch (recuperare): Intercetta le richieste di rete e restituisce le risposte nella cache, se disponibili; altrimenti, recupera le risorse dalla rete. Se la rete non è disponibile, serve una pagina offline (ad esempio, /offline.html).

Per registrare il service worker nel file HTML, aggiungere il seguente script:

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js')
        .then((registration) => {
          console.log('Service Worker registered with scope:', registration.scope);
        }, (error) => {
          console.error('Service Worker registration failed:', error);
        });
    });
  }
</script>

Questo script controlla se il browser supporta i service worker e registra il service worker al caricamento della pagina.

Conclusione

Le PWA sono particolarmente utili per fornire un'esperienza web affidabile, anche in ambienti offline o quando la connettività di rete è instabile. Definendo le impostazioni dell'applicazione nel file manifest.json e l'implementazione di strategie di caching in sw.jsÈ possibile creare un sito web che funzioni anche offline e che offra ai propri utenti un'esperienza veloce e simile a quella di un'app.

Ora, provate ad applicare le PWA al vostro progetto web e offrite un'applicazione web accessibile e robusta su cui gli utenti possono contare sempre e ovunque, anche senza una connessione a Internet.

In WordPress

Esiste anche un plugin chiamato Super PWA. Questo plugin consente di trasformare facilmente un sito web WordPress in una Progressive Web App (PWA) con il minimo sforzo. Super PWA aiuta a implementare le caratteristiche essenziali delle PWA, come il supporto offline, l'interfaccia simile a un'app e la possibilità per gli utenti di aggiungere il sito web alla propria schermata iniziale.

Super PWA genera automaticamente il file manifest.json e configura l'opzione sw.js (service worker), che semplifica il processo di trasformazione del sito WordPress in una PWA completamente funzionale. Offre anche opzioni di personalizzazione per definire il nome dell'applicazione, le icone, il colore del tema e altro ancora. Questo lo rende una scelta eccellente per gli utenti di WordPress che vogliono sfruttare i vantaggi delle PWA senza doversi immergere in una codifica complessa.