Aplicațiile mobile au devenit aproape indispensabile pentru companii datorită capacității lor de a oferi utilizatorilor serviciile necesare rapid și cu ușurință. Totuși, ce se întâmplă dacă ți-aș spune că este posibil să ai o experiență asemănătoare aplicației mobile pe web? Pentru asta sunt aplicațiile web progresive (PWA).
Există o cerere din ce în ce mai mare pentru aplicații mobile, așa cum arată sondajul Top Design Firms . În 2022, aproape jumătate – 48% – dintre întreprinderile mici aveau aplicațiile lor mobile, comparativ cu o treime 32% în 2021. Această tendință arată o schimbare a nevoilor utilizatorilor care solicită interacțiuni asemănătoare dispozitivelor mobile pe toate platformele.
Prin dezvoltarea unui PWA, companiile pot oferi direct această experiență de aplicație nativă prin intermediul browserului web, oferind utilizatorilor finali o aplicație de încredere și captivantă, fără a fi nevoie de o aplicație mobilă separată.
O aplicație web progresivă este o aplicație care oferă utilizatorilor suport nativ, asemănător cu dispozitivele mobile, fără a fi nevoiți să fie construită cu considerații specifice platformei, care variază de la Android la IOS la desktop-uri. Sunt ușoare, accesibile pe toate dispozitivele și se actualizează automat atunci când sunt conectate la internet.
Recent, am căutat cel mai bun lucru posibil pentru a face aplicația mea NextJs o aplicație web progresivă când am dat peste comentariul Reddit de mai jos despre actualizările recente Next.js, inclusiv suportul nativ pentru PWA.
Vezi comentariul aici .
După ce am revizuit actualizarea, pot spune că nu a fost niciodată mai ușor să creezi PWA și o voi dovedi.
PS: Două fișiere sunt foarte importante pentru ca aplicația să fie recunoscută ca PWA - fișierul manifest și fișierul service worker .
npx create-next-app@latest my-pwa-app
Sau
yarn create next-app my-pwa-app
După ce rulați comanda, urmați instrucțiunile pentru specificațiile de instalare, apoi navigați în directorul proiectului
cd my-pwa-app
Porniți serverul de dezvoltare
npm run dev
Creați un fișier manifest.json
sau manifest.ts
în directorul 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
și browser
minimal-ui
standalone
src
, size
și type
. Pentru PWA, este important să aveți cel puțin pictograme cu dimensiunile 192x192
și 512x512
.Site-urile web precum generatorul de manifeste pot fi folosite pentru a genera rapid fișierul manifest și diferite dimensiuni ale pictogramei
Lucrătorul de service ar asculta evenimentele push și va efectua funcția de mai jos pentru notificări 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 });
Pentru a înregistra lucrătorul de service, trebuie să furnizați ruta pe care este creat lucrătorul de service.
const registration = await navigator.serviceWorker.register("/sw.js", { //provide the route to the service worker scope: "/", updateViaCache: "none", });
Instalați web-push pentru a gestiona notificările și abonamentele
npm install web-push --save
Apoi, trebuie să obținem abonamentul dacă utilizatorul are unul sau să îl abonam pe utilizator pentru a împinge evenimente. Într-o aplicație reală, acest abonament ar trebui trimis la server pentru stocare
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); } }
Pentru a genera cheile VAID, rulați:
npx web-push generate-vapid-keys
Adunarea totul pentru interfața de utilizare cu o funcție pentru a testa notificarea 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
, creați un folder nou numit api
.api
, creați un alt folder numit sendNotification
.sendNotification
, creați un fișier numit route.ts
.
Structura ar trebui să fie după cum urmează
app/ └── api/ └── sendNotification/ └── route.ts
În fișierul route.ts, includeți următoarele linii de cod
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 } ); } }
Pentru a confirma că aplicația este acum o PWA, pictograma de descărcare ar trebui să apară în extrema dreaptă în bara de adrese URL. De asemenea, ar trebui să puteți vedea informații despre web-ul manifestat în fila aplicații.
Actualizarea recentă a Next.js cu suport nativ PWA a făcut procesul de creare a aplicațiilor web progresive foarte ușor. Cu Next.js, dezvoltarea și implementarea unui PWA este acum un proces simplu în parte a dezvoltării web moderne, deoarece dezvoltatorii pot acum să creeze rapid aplicații cu caracteristicile native pe care utilizatorii le așteptă, toate dintr-un browser web.