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 , 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. de Top Design Firms 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. instalado en su máquina. NodeJs PD: Hay dos archivos que son muy importantes para que tu aplicación sea reconocida como una PWA: el y el . archivo de manifiesto archivo del trabajador del servicio 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. Archivo de manifiesto: 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. Service worker: 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 o en el directorio . 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', }, ], } } Nombre oficial de la aplicación. Este nombre aparece en la pantalla de inicio y permite a los usuarios identificar la aplicación. Nombre: : El nombre corto aparece cuando el nombre es largo y no hay mucho espacio para mostrar. short_name : Describe la aplicación y lo que hace. Descripción : cuando un usuario inicia la aplicación, comienza desde la ruta especificada aquí. start_url : la propiedad de pantalla configura su apariencia cuando se inicia y puede ser cualquiera de las dos: o pantalla fullscreen minimal-ui standalone browser : 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. background_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. theme_color : la matriz icons contiene propiedades de los íconos que se usarán en diferentes plataformas, especificando , y . Para tu PWA, es importante tener al menos íconos con tamaños y . icons src size type 192x192 512x512 Se pueden utilizar sitios web como para generar el archivo de manifiesto y diferentes tamaños de íconos rápidamente. manifest-generator 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 para gestionar notificaciones y suscripciones web-push 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 , crea una nueva carpeta llamada . app api Dentro de la carpeta , crea otra carpeta llamada . api sendNotification Dentro de la carpeta , crea un archivo llamado . sendNotification 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: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 } ); } } 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.
