Aprenda a crear una aplicación web progresiva en minutos con Next.js

Las aplicaciones móviles se han vuelto casi indispensables para las empresas debido a su capacidad de proporcionar a los usuarios los servicios que necesitan de forma rápida y sencilla. Sin embargo, ¿qué pasaría si te dijera que es posible tener una experiencia similar a la de una aplicación móvil en la web? Para eso están las aplicaciones web progresivas (PWA).

Según la encuesta de Top Design Firms , cada vez hay más demanda de aplicaciones móviles. En 2022, casi la mitad (el 48 %) de las pequeñas empresas contaban con aplicaciones móviles, frente a un tercio (el 32 %) en 2021. Esta tendencia muestra un cambio en las necesidades de los usuarios, que exigen interacciones similares a las de los dispositivos móviles en todas las plataformas.

Al desarrollar una PWA, las empresas pueden proporcionar directamente esta experiencia de aplicación nativa a través del navegador web, lo que brinda a los usuarios finales una aplicación confiable y atractiva sin la necesidad de una aplicación móvil separada.

¿Qué son las PWA?

Una aplicación web progresiva es una aplicación que ofrece a los usuarios compatibilidad nativa, similar a la de los dispositivos móviles, sin tener que crearla teniendo en cuenta consideraciones específicas de la plataforma, que varían desde Android hasta iOS y computadoras de escritorio. Son livianas, accesibles en todos los dispositivos y se actualizan automáticamente cuando se conectan a Internet.

¿Por qué considerar una PWA para su negocio?

• Son menos costosos en comparación con el desarrollo de aplicaciones nativas.
• Se pueden instalar fácilmente en las pantallas de inicio de los usuarios sin una tienda de aplicaciones.
• Las PWA ofrecen notificaciones push al igual que las aplicaciones móviles
• Ofrecen funcionalidad sin conexión almacenando contenido en caché.
• Están diseñados para funcionar en diferentes dispositivos.

Descripción general del nuevo soporte nativo de Next.js para PWA

Recientemente estaba investigando la mejor manera posible de hacer de mi aplicación NextJs una aplicación web progresiva cuando encontré el comentario de Reddit a continuación sobre las actualizaciones recientes de Next.js, incluido el soporte nativo para PWA.

Mira el comentario aquí .

Después de revisar la actualización, puedo decir que nunca ha sido más fácil crear PWA y lo demostraré.

Configuración y requisitos del proyecto

• Una comprensión razonable de React.
• NodeJs instalado en su máquina.

PD: Hay dos archivos que son muy importantes para que tu aplicación sea reconocida como una PWA: el archivo de manifiesto y el archivo del trabajador del servicio .

• Archivo de manifiesto: el manifiesto de la aplicación web es un archivo que contiene información sobre nuestra aplicación que, en esencia, la hace instalable. Esta información incluye el color del tema, los íconos, la URL de inicio, etc.
• Service worker: El service worker es un archivo que contiene el script que se ejecuta en segundo plano de la aplicación. Permite funciones como notificaciones push, almacenamiento en caché y soporte sin conexión.

1.) Configuración de la aplicación

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

O

 yarn create next-app my-pwa-app

Después de ejecutar el comando, siga las indicaciones para conocer los detalles de su instalación y luego navegue hasta el directorio del proyecto.

 cd my-pwa-app

Iniciar el servidor de desarrollo

 npm run dev 

2.) Crea el archivo de manifiesto

Cree un archivo manifest.json o manifest.ts en el directorio 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', }, ], } }

• Nombre: Nombre oficial de la aplicación. Este nombre aparece en la pantalla de inicio y permite a los usuarios identificar la aplicación.
• short_name : El nombre corto aparece cuando el nombre es largo y no hay mucho espacio para mostrar.
• Descripción : Describe la aplicación y lo que hace.
• start_url : cuando un usuario inicia la aplicación, comienza desde la ruta especificada aquí.
• pantalla : la propiedad de pantalla configura su apariencia cuando se inicia y puede ser cualquiera de las dos: fullscreen minimal-ui standalone o browser
• background_color : es importante utilizar un color de fondo que coincida con el tema de la aplicación para lograr una transición fluida y una mejor experiencia del usuario.
• theme_color : Esto especifica el color de los elementos de la interfaz de usuario, como la barra de herramientas y la barra de estado del navegador.
• icons : la matriz icons contiene propiedades de los íconos que se usarán en diferentes plataformas, especificando src , size y type . Para tu PWA, es importante tener al menos íconos con tamaños 192x192 y 512x512 .

Se pueden utilizar sitios web como manifest-generator para generar el archivo de manifiesto y diferentes tamaños de íconos rápidamente.

3.) Cree el archivo del trabajador de servicio.

El trabajador de servicio escucharía los eventos push y llevaría a cabo la siguiente función para las notificaciones 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.) Registrar el trabajador de servicio

Para registrar el service worker, debe proporcionar la ruta donde se crea el service worker.

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

Instalar web-push para gestionar notificaciones y suscripciones

 npm install web-push --save

Luego, debemos obtener la suscripción si el usuario tiene una o suscribir al usuario para recibir eventos push. En una aplicación real, esta suscripción debe enviarse al servidor para su almacenamiento.

 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); } }

Para generar las claves VAPID, ejecute:

 npx web-push generate-vapid-keys 

Juntándolo todo para la interfaz de usuario con una función para probar la notificación 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ón del punto final

• Dentro del directorio app , crea una nueva carpeta llamada api .
• Dentro de la carpeta api , crea otra carpeta llamada sendNotification .
• Dentro de la carpeta sendNotification , crea un archivo llamado route.ts .

La estructura debe ser la siguiente

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

En el archivo route.ts, incluya las siguientes líneas de código

 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 } ); } }

Para confirmar que la aplicación ahora es una PWA, el ícono de descarga debería aparecer en el extremo derecho de la barra de URL. También debería poder ver información sobre el manifiesto web en la pestaña de aplicaciones.

Conclusión

La reciente actualización de Next.js con compatibilidad nativa con PWA ha hecho que el proceso de creación de aplicaciones web progresivas sea muy sencillo. Con Next.js, desarrollar e implementar una PWA es ahora un proceso sencillo que forma parte del desarrollo web moderno, ya que los desarrolladores pueden crear rápidamente aplicaciones con las funciones nativas que esperan los usuarios, todo desde un navegador web.