Scopri come creare un'app Web progressiva in pochi minuti con Next.js

Le app mobili sono quasi diventate indispensabili per le aziende, grazie alla loro capacità di fornire agli utenti i servizi necessari in modo rapido e semplice. Tuttavia, cosa diresti se ti dicessi che è possibile avere un'esperienza simile a quella delle app mobili sul web? Ecco a cosa servono le Progressive Web App (PWA).

C'è una domanda crescente di app mobili, come dimostra il sondaggio Top Design Firms . Nel 2022, quasi la metà (48%) delle piccole imprese aveva le proprie app mobili rispetto a un terzo (32%) nel 2021. Questa tendenza mostra un cambiamento nelle esigenze degli utenti che richiedono interazioni simili a quelle dei dispositivi mobili su tutte le piattaforme.

Sviluppando una PWA, le aziende possono fornire direttamente questa esperienza di app nativa tramite il browser web, offrendo agli utenti finali un'applicazione affidabile e coinvolgente senza la necessità di un'applicazione mobile separata.

Cosa sono le PWA?

Una Progressive Web App è un'app che fornisce agli utenti un supporto nativo, simile ai dispositivi mobili senza dover creare con considerazioni specifiche della piattaforma che variano da Android a IOS ai desktop. Sono leggere, accessibili su tutti i dispositivi e si aggiornano automaticamente quando sono connesse a Internet.

Perché prendere in considerazione una PWA per la tua azienda?

• Sono meno costosi rispetto allo sviluppo di app native
• Possono essere facilmente installati nelle schermate iniziali degli utenti senza un App Store
• Le PWA offrono notifiche push proprio come le app mobili
• Offrono funzionalità offline memorizzando nella cache i contenuti
• Sono progettati per funzionare su dispositivi diversi

Panoramica del nuovo supporto nativo di Next.js per le PWA

Di recente stavo cercando il modo migliore per trasformare la mia app NextJs in una Progressive Web App quando mi sono imbattuto nel commento di Reddit qui sotto sui recenti aggiornamenti di Next.js, tra cui il supporto nativo per le PWA.

Dai un'occhiata al commento qui .

Dopo aver esaminato l'aggiornamento, posso dire che non è mai stato così facile creare PWA e lo dimostrerò.

Impostazione e requisiti del progetto

• Una ragionevole conoscenza di React.
• NodeJs installato sul tuo computer.

PS: Due file sono molto importanti affinché la tua app venga riconosciuta come PWA: il file manifest e il file service worker .

• File manifesto: il manifesto dell'app Web è un file che contiene informazioni sulla nostra app che essenzialmente la rendono installabile. Queste informazioni includono il colore del tema, le icone, l'URL di partenza, ecc.
• Service worker: il service worker è un file contenente lo script che viene eseguito in background nell'applicazione. Consente funzionalità come notifiche push, memorizzazione nella cache e supporto offline.

1.) Impostazione dell'app

 npx create-next-app@latest my-pwa-app

O

 yarn create next-app my-pwa-app

Dopo aver eseguito il comando, segui le istruzioni per le specifiche di installazione, quindi accedi alla directory del progetto

 cd my-pwa-app

Avviare il server di sviluppo

 npm run dev 

2.) Creare il file manifesto

Creare un file manifest.json o manifest.ts nella directory app .

 import type { MetadataRoute } from 'next' export default function manifest(): MetadataRoute.Manifest { return { name: 'Next.js PWA', short_name: 'NextPWA', description: 'A Progressive Web App built with Next.js', start_url: '/', display: 'standalone', background_color: '#ffffff', theme_color: '#000000', icons: [ { src: '/icon-192x192.png', sizes: '192x192', type: 'image/png', }, { src: '/icon-512x512.png', sizes: '512x512', type: 'image/png', }, ], } }

• name: Nome ufficiale dell'app. Questo nome appare nella schermata iniziale e consente agli utenti di identificare l'app.
• short_name : il nome breve appare quando il nome è lungo e non c'è molto spazio da visualizzare
• descrizione : descrive l'applicazione e le sue funzioni.
• start_url : quando un utente avvia l'app, questa parte dal percorso specificato qui.
• display : la proprietà display configura il suo aspetto quando viene avviato e può essere qualsiasi tra standalone minimal-ui fullscreen o browser
• background_color : è importante utilizzare un colore di sfondo che corrisponda al tema dell'app per una transizione fluida e un'esperienza utente ottimale.
• theme_color : specifica il colore degli elementi dell'interfaccia utente, come la barra degli strumenti e la barra di stato del browser.
• icons : L'array icons contiene le proprietà delle icone da utilizzare su diverse piattaforme, specificando src , size e type . Per la tua PWA, è importante avere almeno icone con dimensioni 192x192 e 512x512 .

Siti web come manifest-generator possono essere utilizzati per generare rapidamente il file manifest e diverse dimensioni di icone

3.) Creare il file del service worker.

Il service worker ascolterebbe gli eventi push ed eseguirebbe la funzione seguente per le notifiche push

 self.addEventListener("push", function (event) { if (event.data) { const data = event.data.json(); const options = { body: data.body, icon: data.icon || '/icon.png', badge: "/icons/timer-icon-144.png", vibrate: [100, 50, 100], data: { dateOfArrival: Date.now(), primaryKey: "5", }, }; event.waitUntil(self.registration.showNotification(data.title, options)); } }); self.addEventListener("notificationclick", function (event) { console.log("Notification click received."); event.notification.close(); event.waitUntil(clients.openWindow("<https://your-website.com>")); //This should be the url to your website });

4.) Registrare il service worker

Per registrare il service worker, è necessario fornire il percorso in cui è stato creato.

 const registration = await navigator.serviceWorker.register("/sw.js", { //provide the route to the service worker scope: "/", updateViaCache: "none", });

Installa web-push per gestire notifiche e abbonamenti

 npm install web-push --save

Dobbiamo quindi ottenere la sottoscrizione se l'utente ne ha una o sottoscrivere l'utente per gli eventi push. In un'applicazione reale, questa sottoscrizione dovrebbe essere inviata al server per l'archiviazione

 async function registerServiceWorker() { const registration = await navigator.serviceWorker.register("/sw.js", { scope: "/", updateViaCache: "none", }); const sub = await registration.pushManager.getSubscription(); if (sub) { setSubscription(sub); //This would be sent to a server } else { const pushSubscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY, // Your VAPID public key }); setSubscription(pushSubscription); } }

Per generare le chiavi VAPID, eseguire:

 npx web-push generate-vapid-keys 

Mettere insieme il tutto per l'interfaccia utente con una funzione per testare la notifica push

 "use client"; import { useEffect, useState } from "react"; const Home = () => { const [subscription, setSubscription] = useState<PushSubscription | null>( null ); useEffect(() => { if ("serviceWorker" in navigator && "PushManager" in window) { registerServiceWorker(); } }, []); async function registerServiceWorker() { const registration = await navigator.serviceWorker.register("/sw.js", { //provide the route to the service worker scope: "/", updateViaCache: "none", }); const sub = await registration.pushManager.getSubscription(); if (sub) { setSubscription(sub); //This would be sent to a server } else { const pushSubscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY, // Your VAPID public key }); setSubscription(pushSubscription); } } //Create a function to test the notification const handleSendNotification = async () => { await fetch("/api/sendNotification", { method: "POST", body: JSON.stringify({ message: "Your timer has completed!", subscription: subscription, // This ideally, should not be included in the body. It should have already been saved on the server }), headers: { "Content-Type": "application/json", }, }); }; return ( <div> <h1>My PWA with Push Notifications</h1> <button onClick={handleSendNotification}>Notify Me!</button> </div> ); }; export default Home;

5.) Creazione dell'endpoint

• All'interno della directory app , crea una nuova cartella denominata api .
• All'interno della cartella api , crea un'altra cartella denominata sendNotification .
• All'interno della cartella sendNotification , creare un file denominato route.ts .

La struttura dovrebbe essere la seguente

 app/ └── api/ └── sendNotification/ └── route.ts

Nel file route.ts, includi le seguenti righe di codice

 import { NextResponse } from "next/server"; import webpush from "web-push"; webpush.setVapidDetails( "mailto:[email protected]", // Your email process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!, process.env.VAPID_PRIVATE_KEY! ); export async function POST(req: Request) { const { message, subscription } = await req.json(); if (!subscription) { return NextResponse.json( { error: "No subscription available" }, { status: 400 } ); } try { await webpush.sendNotification( subscription, JSON.stringify({ title: "Notification", body: message }) ); return NextResponse.json({ success: true }); } catch (error) { console.error("Error sending notification:", error); return NextResponse.json( { error: "Failed to send notification" }, { status: 500 } ); } }

Per confermare che l'app è ora una PWA, l'icona di download dovrebbe apparire all'estrema destra nella barra degli URL. Dovresti anche essere in grado di vedere le informazioni sul web manifest nella scheda applicazioni.

Conclusione

Il recente aggiornamento di Next.js con supporto nativo PWA ha reso il processo di creazione di app web progressive molto fluido. Con Next.js, sviluppare e distribuire una PWA è ora un processo semplice in parte dello sviluppo web moderno, poiché gli sviluppatori possono ora creare rapidamente applicazioni con le funzionalità native che gli utenti si aspettano, il tutto dall'interno di un browser web.