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 . Î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. Top Design Firms 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ă. Ce sunt PWA-urile? 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. De ce să luați în considerare un PWA pentru afacerea dvs.? Sunt mai puțin costisitoare în comparație cu dezvoltarea de aplicații native Acestea pot fi instalate cu ușurință pe ecranele de start ale utilizatorilor fără un magazin de aplicații PWA oferă notificări push la fel ca aplicațiile mobile Ele oferă funcționalitate offline prin memorarea în cache a conținutului Sunt concepute pentru a funcționa pe diferite dispozitive Prezentare generală a noului suport nativ Next.js pentru PWA 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. Configurarea proiectului și cerințe O înțelegere rezonabilă a React. instalat pe mașina dvs. NodeJs PS: Două fișiere sunt foarte importante pentru ca aplicația să fie recunoscută ca PWA - și . fișierul manifest fișierul service worker manifestul aplicației web este un fișier care conține informații despre aplicația noastră care, în esență, o face instalabilă. Aceste informații includ culoarea temei, pictogramele, adresa URL de pornire etc. Fișierul manifest: lucrătorul de serviciu este un fișier care conține scriptul care rulează în fundal al aplicației. Permite funcții precum notificări push, cache și suport offline. Lucrător de serviciu: 1.) Configurarea aplicației 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 2.) Creați fișierul manifest Creați un fișier sau în directorul . 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', }, ], } } numele oficial al aplicației. Acest nume apare pe ecranul de start și permite utilizatorilor să identifice aplicația. nume: : numele scurt apare atunci când numele este lung și nu există mult spațiu de afișat short_name : Descrie aplicația și ceea ce face. descriere : Când un utilizator lansează aplicația, aceasta începe de la ruta specificată aici. start_url : proprietatea de afișare își configurează aspectul atunci când este lansată și poate fi oricare dintre și afișare fullscreen browser minimal-ui standalone : este important să folosiți o culoare de fundal care să se potrivească cu tema aplicației pentru o tranziție ușoară și o experiență de utilizator background_color : Aceasta specifică culoarea elementelor UI, cum ar fi bara de instrumente și bara de stare a browserului. theme_color : matricea de pictograme conține proprietăți ale pictogramelor care urmează să fie utilizate pe diferite platforme, specificând , și . Pentru PWA, este important să aveți cel puțin pictograme cu dimensiunile și . pictograme src size type 192x192 512x512 Site-urile web precum pot fi folosite pentru a genera rapid fișierul manifest și diferite dimensiuni ale pictogramei generatorul de manifeste 3.) Creați fișierul lucrător de service. 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 }); 4.) Înregistrați lucrătorul de service 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 pentru a gestiona notificările și abonamentele web-push 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; 5.) Crearea punctului final În directorul , creați un folder nou numit . app api În folderul , creați un alt folder numit . api sendNotification În interiorul folderului , creați un fișier numit . sendNotification 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: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 } ); } } 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. Concluzie 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.
