Obteniu informació sobre com crear una aplicació web progressiva en qüestió de minuts amb Next.js

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 Top Design Firms . 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.

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.
• NodeJs instal·lat a la vostra màquina.

PS: Dos fitxers són molt importants perquè la vostra aplicació es reconegui com a PWA: el fitxer de manifest i el fitxer de treballador de servei .

• Fitxer de manifest: 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.
• Treballador del servei: 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.

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 manifest.json o manifest.ts al directori 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: nom oficial de l'aplicació. Aquest nom apareix a la pantalla d'inici i permet als usuaris identificar l'aplicació.
• short_name : el nom curt apareix quan el nom és llarg i no hi ha gaire espai per mostrar
• descripció : descriu l'aplicació i què fa.
• start_url : quan un usuari inicia l'aplicació, comença des de la ruta especificada aquí.
• display : la propietat de visualització configura la seva aparença quan s'inicia i pot ser qualsevol de fullscreen o browser standalone minimal-ui
• background_color : é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
• theme_color : especifica el color dels elements de la interfície d'usuari com la barra d'eines i la barra d'estat del navegador.
• icons : la matriu d'icones conté propietats de les icones que s'utilitzaran a diferents plataformes, especificant l' src , size i type . Per al vostre PWA, és important tenir com a mínim icones amb mides de 192x192 i 512x512 .

Els llocs web com el generador de manifest es poden utilitzar per generar ràpidament el fitxer de manifest i diferents mides d'icona

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 web-push per gestionar les notificacions i les subscripcions

 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 app , creeu una carpeta nova anomenada api .
• Dins de la carpeta api , creeu una altra carpeta anomenada sendNotification .
• Dins de la carpeta sendNotification , creeu un fitxer anomenat 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.