Aflați cum să creați o aplicație web progresivă în câteva minute cu Next.js

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ă.

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.
• NodeJs instalat pe mașina dvs.

PS: Două fișiere sunt foarte importante pentru ca aplicația să fie recunoscută ca PWA - fișierul manifest și fișierul service worker .

• Fișierul manifest: 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.
• Lucrător de serviciu: 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.

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 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', }, ], } }

• nume: numele oficial al aplicației. Acest nume apare pe ecranul de start și permite utilizatorilor să identifice aplicația.
• short_name : numele scurt apare atunci când numele este lung și nu există mult spațiu de afișat
• descriere : Descrie aplicația și ceea ce face.
• start_url : Când un utilizator lansează aplicația, aceasta începe de la ruta specificată aici.
• afișare : proprietatea de afișare își configurează aspectul atunci când este lansată și poate fi oricare dintre fullscreen și browser minimal-ui standalone
• background_color : 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
• theme_color : Aceasta specifică culoarea elementelor UI, cum ar fi bara de instrumente și bara de stare a browserului.
• pictograme : matricea de pictograme conține proprietăți ale pictogramelor care urmează să fie utilizate pe diferite platforme, specificând 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

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

5.) Crearea punctului final

• În directorul app , creați un folder nou numit api .
• În folderul api , creați un alt folder numit sendNotification .
• În interiorul folderului 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.

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.