Progressive Web Apps (PWAs): creare applicazioni web che si comportano come applicazioni native

È dagli inizi degli anni 2000 che le tecnologie per lo sviluppo web hanno spinto alla produzione di pagine dinamiche a sfavore di quelle statiche, attraverso strumenti lato server (PHP) o lato client (Javascript e di conseguenza Ajax) e lo stesso vale per il concetto di responsive web design. Nonostante questo, i primi tentativi nel portare le web-app su terminali mobile hanno visto favorire le applicazioni native.

Con il progresso del panorama tecnologico, i continui miglioramenti dei principali linguaggi web quali HTML5, CSS3 e Javascript hanno raggiunto un livello di performance in linea per competere con le applicazioni di prima classe.

Nel 2015, lo sviluppatore Alex Russell, del team di Google Chrome, ha coniato il termine di “Progressive Web App” per descrivere quelle applicazioni aventi sia i benefici dei siti web, che quelli delle “platform-specific” apps.

Precisazioni: il modello PWA.

Come spesso accade, con la scoperta di una nuova tecnologia, l’entusiasmo collettivo cresce e in tanti vi si cimentano pur non avendo ancora una piena comprensione dell’ambito in cui si stanno inserendo.

La realtà è che identificarsi come PWA per un'applicazione non implica l'adozione di un'architettura tecnica o di un framework specifico, ma rappresenta piuttosto l'adesione a un insieme di principi e standard che l'applicazione deve rispettare.

Vediamo allora quali sono le caratteristiche che rendono una PWA tale:

• Reperibilità: possono essere trovate attraverso motori di ricerca e di conseguenza essere soggette alla SEO friendliness; allo stesso tempo, condivisibili attraverso URL.
• Scaricabilità: l’utente deve avere la possibilità di installarle sul proprio dispositivo, allo stesso livello delle applicazioni specifiche per piattaforma.
• Network Independence: questa proprietà è forse la più sorprendente, le PWA, indipendentemente dalla rete, possono funzionare online o in ogni caso far fronte a connessioni di rete scarsa.
• Coinvolgenza: a differenza dei siti tradizionali i quali, una volta chiusi, non è più possibile per gli utenti interagirci, in questo caso gli utenti possono scegliere di ricevere notifiche push.
• Ottimizzazione e scalabilità: queste app sono accessibili anche per i browser più vecchi e seguono il principio di design web reattivo, ossia funzionano su qualsiasi device, con qualsiasi dimensione dello schermo, che sia un telefono, una televisione o perfino un frigorifero.

Dato questo, la scelta di utilizzare questo tipo di applicazione per un progetto è utile quando è previsto che la UI sarà molto complessa e i costi di sviluppo più alti (d’altra parte si risparmierà su altri aspetti, come lo sviluppo su più device).

Altro punto a favore di tale scelta è se desideri un’alta velocità di caricamento, elevate prestazioni e se necessiti che la tua app funzioni offline.

Casi d’uso

La scelta di costruire nuove applicazioni, o convertire architetture ormai antiquate in web-app progressive, non è data dal caso ma convenuta dal loro successo affermato in termini statistici.

Tra gli esempi più rappresentativi troviamo:

• Spotify

La usiamo quotidianamente e proprio per questo possiamo confermarne i principi chiave: semplicità, efficienza e affidabilità.

Grazie alla PWA di Spotify è possibile ascoltare musica con una connessione debole (e ve ne sarete accorti da un utilizzo minimo della connessione dati) oppure offline, previo scaricamento delle canzoni. La conseguenza? L’azienda ha visto una conversione free-to-paid passare dal 26.6% al 58%.

• Telegram

Nel 2020, Telegram contava circa 400 milioni di utenti registrati (https://www.businessofapps.com/data/telegram-statistics/) e in seguito alla decisione da parte dei developers di sostituire la vecchia mobile app con una PWA, si è registrata una crescita del 100% di utenti registrati; lo stesso vale per i download che sono passati da 840 milioni a più di 2 miliardi nel 2023. Inevitabilmente anche la percentuale di utenti paganti è aumentata, dai 10 milioni di dollari nel 2022, il servizio Premium ha generato 45 milioni nel 2023.

Abilitatori architetturali

Abbiamo detto che le PWA non prevedono strutture specifiche, ma piuttosto, oltre ad avere funzionalità basiche e comuni ai website come l’oggetto globale Window e l’accesso a tutte le website API tra cui FetchAPI, HistoryAPI ecc, hanno caratteristiche aggiuntive chiave denominati “Abilitatori architetturali”.

Il primo è un file manifest, di tipo JSON, che fornisce informazioni al browser quali il nome dell’app, l’icona fino a impostazioni più avanzate come lo start URL o quali tipi di file l’app può sostenere.

Il secondo è il service worker, script che viene eseguito separatamente e gestisce le richieste della rete e la memorizzazione della cache e dunque abilita le PWA a depositare e ottenere le risorse sul dispositivo e gestire le notifiche in assenza di rete.

Il terzo fattore richiedente è che le PWA utilizzino il protocollo HTTPS che assicura che tutte le comunicazioni siano sicure.

Infine, c’è da sottolineare che utilizzare le tecniche di sviluppo web tradizionali renderebbe il tutto troppo complesso ed è per questo motivo che moderni framework Javascript sono incoraggiati, come React o Vue o meglio ancora Next o Nuxt, che forniscono strumenti adatti che aderiscano ai principi PWA.

Configurare un’applicazione web Next.js in Progressive Web App

Step 1 — Inizializza un’app con Next.js, per farlo lancia il seguente comando:

npx create-next-app@latest --typescript

Una configurazione tipo potrebbe essere:

What is your project named? next-with-pwa
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? No

Step 2 — Genera il file manifest.json per la configurazioni delle risorse, all’interno della cartella public. Ci sono diversi tool online ma una base potrebbe essere:

    {
        "name": "Next-13 PWA",
        "short_name": "PWA",
        "theme_color": "#2196f3",
        "background_color": "#2196f3",
        "display": "standalone",
        "orientation": "portrait",
        "scope": "/",
        "start_url": "/",
        "icons": [
          {
            "src": "icons/icon-48x48.png",
            "sizes": "48x48",
            "type": "image/png",
            "purpose": "maskable any"
          },
          {
            "src": "icons/icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png",
            "purpose": "maskable any"
          },
          {
            "src": "icons/icon-96x96.png",
            "sizes": "96x96",
            "type": "image/png",
            "purpose": "maskable any"
          },
          {
            "src": "icons/icon-128x128.png",
            "sizes": "128x128",
            "type": "image/png",
            "purpose": "maskable any"
          },
          {
            "src": "icons/icon-144x144.png",
            "sizes": "144x144",
            "type": "image/png",
            "purpose": "maskable any"
          },
          {
            "src": "icons/icon-152x152.png",
            "sizes": "152x152",
            "type": "image/png",
            "purpose": "maskable any"
          },
          {
            "src": "icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "maskable any"
          },
          {
            "src": "icons/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png",
            "purpose": "maskable any"
          },
          {
            "src": "icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable any"
          }
        ],
        "splash_pages": null
      }

Step 3 — Aggiungi il seguente pacchetto:

npm i next-pwa

Step 4 — Puoi configurare il pacchetto installato nel file next.config.js:

    // next.config.js

    const withPWA = require("next-pwa");
    
    // Configuration object for Next.js
    const nextConfig = {
      reactStrictMode: true, // Enable React strict mode for improved error handling
      swcMinify: true, // Enable SWC minification for improved performance
      compiler: {
        removeConsole: process.env.NODE_ENV !== "development", // Remove console.log in production
      },
    };
    
    // Configuration object for next-pwa plugin
    const pwaConfig = withPWA({
      dest: "public", // Destination directory for the PWA files
      disable: process.env.NODE_ENV === "development", // Disable PWA in development mode
      register: true, // Register the PWA service worker
      skipWaiting: true, // Skip waiting for service worker activation
    });
    
    // Combine configurations for Next.js with PWA support
    module.exports = withPWA(nextConfig);    

Step 5 — Creare/modificare layout.tsx nell’app directory:

    import "./globals.css";
    import type { Metadata } from "next";
    import { Inter } from "next/font/google";
    
    const inter = Inter({ subsets: ["latin"] });
    
    export const metadata: Metadata = {
      title: "PWA with Next 13",
      description: "PWA application with Next 13",
      generator: "Next.js",
      manifest: "/manifest.json",
      keywords: ["nextjs", "nextjs13", "next13", "pwa", "next-pwa"],
      themeColor: [{
        media: "(prefers-color-scheme: dark)",
        color: "#fff",
      }],
      authors: [
        { name: "Rajesh Prajapati" },
        { name: "Rajesh Prajapati", url: "https://www.linkedin.com/in/raazeshp96/" },
      ],
      viewport: "minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover",
      icons: [
        { rel: "apple-touch-icon", url: "icons/icon-128x128.png" },
        { rel: "icon", url: "icons/icon-128x128.png" },
      ],
    };
    
    export default function RootLayout({ children }: { children: React.ReactNode }) {
      return ({children});
    }    

Finita la configurazione, si può passare al testing dell’app generando una nuova build:

npm run build

N.B: dopo la build, verranno generati diversi file .js in public, che tipicamente non sono necessari nella tua repo, di conseguenza, per escluderli vanno aggiunti nel file .gitignore:

    # Auto Generated PWA files
    **/public/sw.js
    **/public/sw.js.map
    **/public/workbox-*.js
    **/public/workbox-*.js.map
    **/public/worker-*.js
    **/public/worker-*.js.map    

A questo punto, dopo aver eseguito l’applicazione in locale sarà possibile visualizzare un’icona sulla barra di ricerca in alto a destra; cliccandola, un piccolo popup ci chiederà se vogliamo scaricare l’applicazione sul nostro computer.



A questo punto il gioco è fatto! Possiamo far partire la nostra applicazione e averla sul desktop.

Conclusione

Con la capacità di offrire un'esperienza utente simile a quella delle applicazioni native su dispositivi mobili e desktop, le PWA combinano i vantaggi della rete con le funzionalità avanzate delle applicazioni.

Con un'elevata scalabilità, una maggiore accessibilità e la capacità di raggiungere un vasto pubblico senza la necessità di distribuzione attraverso app store, le PWA continuano a guadagnare terreno come una soluzione versatile e potente per lo sviluppo di applicazioni web moderne.