React: creare una PWA (Progressive Web App)

Le Progressive Web Apps (PWA) rappresentano un'evoluzione delle applicazioni web e offrono un'esperienza utente simile a quella delle app native. Grazie alla loro capacità di funzionare anche offline, fornire notifiche push e migliorare le prestazioni, le PWA stanno guadagnando sempre più popolarità tra gli sviluppatori. In questa guida, vedremo come trasformare un'app React in una PWA utilizzando Create React App (CRA), configurare il Service Worker, gestire il manifest.json e testare l'app con Lighthouse.

Cos'è una Progressive Web App (PWA)?

Una PWA è un'applicazione web che utilizza tecnologie moderne per offrire un'esperienza fluida e performante. Le principali caratteristiche di una PWA sono:

• Installabilità
• Supporto offline
• Prestazioni elevate
• Notifiche push

Le PWA sono compatibili con la maggior parte dei browser moderni e possono essere distribuite tramite un semplice URL, evitando la necessità di pubblicarle sugli store.

Creazione di un progetto React PWA con CRA

Per creare una PWA con React, possiamo utilizzare Create React App (CRA) che include il supporto per le PWA.

I passaggi per creare un progetto React PWA

Apri il terminale ed esegui il seguente comando:

npx create-react-app my-pwa-app --template cra-template-pwa
cd my-pwa-app
npm start

Il parametro --template cra-template-pwa assicura che il progetto venga creato con il supporto per PWA già configurato.

Configurare il manifest.json

Il file manifest.json

Modifica del file public/manifest.json

{
  "short_name": "MyPWA",
  "name": "My Progressive Web App",
  "icons": [
    {
      "src": "icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000"
}

Le proprietà utilizzate

• short_name
• name
• icons
• start_url
• display standalone
• theme_color

Abilitare il Service Worker

Un Service Worker è uno script in background che gestisce la cache e permette all'app di funzionare offline. CRA include già un Service Worker ma per abilitarlo dobbiamo registrarlo in src/index.js:

import * as serviceWorkerRegistration from './serviceWorkerRegistration';

// Registra il Service Worker
serviceWorkerRegistration.register();

Ora il nostro Service Worker sarà attivo e pronto a gestire la cache dell'app.

Gestire la cache per il supporto offline

Il Service Worker intercetta le richieste di rete e può servire i file direttamente dalla cache, migliorando la velocità di caricamento.

Modifica di src/service-worker.js

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('my-pwa-cache').then(cache => {
            return cache.addAll([
                '/',
                '/index.html',
                '/static/js/main.js',
                '/static/css/main.css',
            ]);
        })
    );
});
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request);
        })
    );
});

Questa configurazione salva nella cache i file principali e li serve quando l'utente è offline.

Testare la PWA basata su React con Lighthouse

Google Chrome offre uno strumento chiamato Lighthouse che consente di verificare se un'app soddisfa i requisiti di una PWA.

Passaggi per testare la PWA

1. Avvia il progetto con npm start
2. Apri Google Chrome e premi F12
3. Vai alla scheda Lighthouse
4. Seleziona l'opzione Progressive Web App

Se il punteggio è inferiore a 100 Lighthouse fornirà suggerimenti su come migliorare la tua PWA.

Distribuzione di una PWA sviluppata con React

Una volta completata la PWA, è necessario distribuirla su un hosting che supporti HTTPS (requisito obbligatorio per i Service Worker).

Opzione 1: Netlify

1. Registra un account su Netlify
2. Collega il repository GitHub.
3. Configura il build command: npm run build
4. Netlify eseguirà il deploy automatico della tua PWA.

Opzione 2: Vercel

1. Registra un account su Vercel
2. Installa la CLI di Vercel: npm install -g vercel
3. Esegui il deploy con: vercel

Entrambe le piattaforme offrono certificati SSL gratuiti garantendo la sicurezza della tua PWA.

Conclusione: creare una PWA con React

Creare una PWA con React è un processo relativamente semplice grazie a Create React App. Seguendo questa guida abbiamo imparato a:

• creare un progetto React con supporto PWA.
• Configurare il file manifest.json
• Attivare e personalizzare il Service Worker.
• Implementare la gestione della cache per il supporto offline.
• Testare l'app con Lighthouse. Effettuare il deploy su Netlify o Vercel.

Ora hai tutte le conoscenze necessarie per trasformare un'app React in una Progressive Web App performante e moderna!