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.
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.
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é.
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 .
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
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', }, ], } }
fullscreen
o browser
standalone
minimal-ui
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
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 });
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;
app
, creeu una carpeta nova anomenada api
.api
, creeu una altra carpeta anomenada sendNotification
.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:[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 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.
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.