Les aplicacions mòbils s'han tornat gairebé indispensables per a les empreses a causa de la seva capacitat per oferir als usuaris els serveis necessaris de manera ràpida i senzilla. Tanmateix, què passaria si us digués que és possible tenir una experiència similar a una aplicació mòbil al web? Per a això serveixen les aplicacions web progressives (PWA). Hi ha una demanda creixent d'aplicacions mòbils, tal com mostra l'enquesta de . L'any 2022, gairebé la meitat, el 48%, de les petites empreses tenien les seves aplicacions mòbils, en comparació amb un terç del 32% el 2021. Aquesta tendència mostra un canvi en les necessitats dels usuaris que exigeixen interaccions semblants al mòbil a totes les plataformes. Top Design Firms En desenvolupar una PWA, les empreses poden oferir directament aquesta experiència d'aplicació nativa a través del navegador web, oferint als usuaris finals una aplicació fiable i atractiva sense necessitat d'una aplicació mòbil independent. Què són les PWA? Una aplicació web progressiva és una aplicació que ofereix als usuaris un suport natiu, semblant als dispositius mòbils sense haver de construir-se amb consideracions específiques de la plataforma que varien des d'Android fins a IOS i ordinadors de sobretaula. Són lleugers, accessibles en tots els dispositius i s'actualitzen automàticament quan es connecten a Internet. Per què considerar una PWA per al vostre negoci? Són menys costosos en comparació amb el desenvolupament d'aplicacions natives Es poden instal·lar fàcilment a les pantalles d'inici dels usuaris sense una botiga d'aplicacions Les PWA ofereixen notificacions push igual que les aplicacions mòbils Ofereixen funcionalitat fora de línia mitjançant la memòria cau Estan dissenyats per funcionar en diferents dispositius Visió general del nou suport natiu de Next.js per a PWA Recentment estava investigant el millor possible per convertir la meva aplicació NextJs en una aplicació web progressiva quan em vaig trobar amb el comentari de Reddit a continuació sobre les actualitzacions recents de Next.js, inclosa el suport natiu per a PWA. Consulteu el comentari . aquí Després de revisar l'actualització, puc dir que mai ha estat tan fàcil crear PWA i ho demostraré. Configuració del projecte i requisits Una comprensió raonable de React. instal·lat a la vostra màquina. NodeJs PS: Dos fitxers són molt importants perquè la vostra aplicació es reconegui com a PWA: el i el . fitxer de manifest fitxer de treballador de servei el manifest de l'aplicació web és un fitxer que conté informació sobre la nostra aplicació que bàsicament la fa instal·lable. Aquesta informació inclou el color del tema, les icones, l'URL d'inici, etc. Fitxer de manifest: el treballador del servei és un fitxer que conté l'script que s'executa en segon pla de l'aplicació. Permet funcions com les notificacions push, la memòria cau i el suport fora de línia. Treballador del servei: 1.) Configuració de l'aplicació npx create-next-app@latest my-pwa-app O yarn create next-app my-pwa-app Després d'executar l'ordre, seguiu les instruccions per a les dades d'instal·lació i navegueu al directori del projecte cd my-pwa-app Inicieu el servidor de desenvolupament npm run dev 2.) Creeu el fitxer de manifest Creeu un fitxer o al directori . 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', }, ], } } nom oficial de l'aplicació. Aquest nom apareix a la pantalla d'inici i permet als usuaris identificar l'aplicació. nom: : el nom curt apareix quan el nom és llarg i no hi ha gaire espai per mostrar short_name : descriu l'aplicació i què fa. descripció : quan un usuari inicia l'aplicació, comença des de la ruta especificada aquí. start_url : la propietat de visualització configura la seva aparença quan s'inicia i pot ser qualsevol de o display fullscreen browser standalone minimal-ui : és important utilitzar un color de fons que coincideixi amb el tema de l'aplicació per a una transició fluida i una experiència d'usuari background_color : especifica el color dels elements de la interfície d'usuari com la barra d'eines i la barra d'estat del navegador. theme_color : la matriu d'icones conté propietats de les icones que s'utilitzaran a diferents plataformes, especificant l' , i . Per al vostre PWA, és important tenir com a mínim icones amb mides de i . icons src size type 192x192 512x512 Els llocs web com es poden utilitzar per generar ràpidament el fitxer de manifest i diferents mides d'icona el generador de manifest 3.) Creeu el fitxer de treballador de servei. El treballador del servei escoltaria els esdeveniments push i duria a terme la funció següent per a les notificacions 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.) Registre el treballador del servei Per registrar el treballador del servei, cal que proporcioneu la ruta on es crea el treballador del servei. const registration = await navigator.serviceWorker.register("/sw.js", { //provide the route to the service worker scope: "/", updateViaCache: "none", }); Instal·leu per gestionar les notificacions i les subscripcions web-push npm install web-push --save Aleshores hem d'obtenir la subscripció si l'usuari en té una o subscriure l'usuari per impulsar esdeveniments. En una aplicació real, aquesta subscripció s'ha d'enviar al servidor per a l'emmagatzematge 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 generar les claus VAPID, executeu: npx web-push generate-vapid-keys Ajuntant-ho tot per a la interfície d'usuari amb una funció per provar la notificació 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.) Creació del punt final Dins del directori , creeu una carpeta nova anomenada . app api Dins de la carpeta , creeu una altra carpeta anomenada . api sendNotification Dins de la carpeta , creeu un fitxer anomenat . sendNotification route.ts L'estructura ha de ser la següent app/ └── api/ └── sendNotification/ └── route.ts Al fitxer route.ts, incloeu les següents línies de codi 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 confirmar que l'aplicació és ara una PWA, la icona de descàrrega hauria d'aparèixer a l'extrem dret de la barra d'URL. També hauríeu de poder veure informació sobre el web manifestar-lo a la pestanya d'aplicacions. Conclusió La recent actualització de Next.js amb suport natiu de PWA ha fet que el procés de creació d'aplicacions web progressives sigui molt fluid. Amb Next.js, desenvolupar i desplegar una PWA és ara un procés senzill en part del desenvolupament web modern, ja que els desenvolupadors ara poden crear ràpidament aplicacions amb les funcions natives que esperen els usuaris, tot des d'un navegador web.
