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 . 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. Top Design Firms 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. installato sul tuo computer. NodeJs PS: Due file sono molto importanti affinché la tua app venga riconosciuta come PWA: il e il . file manifest file service worker 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. File manifesto: 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. Service worker: 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 o nella directory . manifest.json manifest.ts 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', }, ], } } Nome ufficiale dell'app. Questo nome appare nella schermata iniziale e consente agli utenti di identificare l'app. name: : il nome breve appare quando il nome è lungo e non c'è molto spazio da visualizzare short_name : descrive l'applicazione e le sue funzioni. descrizione : quando un utente avvia l'app, questa parte dal percorso specificato qui. start_url : la proprietà display configura il suo aspetto quando viene avviato e può essere qualsiasi tra o display standalone minimal-ui fullscreen browser : è importante utilizzare un colore di sfondo che corrisponda al tema dell'app per una transizione fluida e un'esperienza utente ottimale. background_color : specifica il colore degli elementi dell'interfaccia utente, come la barra degli strumenti e la barra di stato del browser. theme_color : L'array icons contiene le proprietà delle icone da utilizzare su diverse piattaforme, specificando , e . Per la tua PWA, è importante avere almeno icone con dimensioni e . icons src size type 192x192 512x512 Siti web come possono essere utilizzati per generare rapidamente il file manifest e diverse dimensioni di icone manifest-generator 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 per gestire notifiche e abbonamenti web-push 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 , crea una nuova cartella denominata . app api All'interno della cartella , crea un'altra cartella denominata . api sendNotification All'interno della cartella , creare un file denominato . sendNotification 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:your-email@example.com", // 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.
