Naučite kako izgraditi progresivnu web-aplikaciju u nekoliko minuta uz Next.js

Mobilne aplikacije postale su gotovo nezamjenjive za tvrtke zbog svoje sposobnosti da korisnicima pruže potrebne usluge brzo i jednostavno. Međutim, što ako vam kažem da je moguće imati iskustvo poput mobilne aplikacije na webu? Tome služe Progressive Web Apps (PWA).

Sve je veća potražnja za mobilnim aplikacijama, što pokazuje istraživanje Top Design Firms . U 2022. gotovo polovica – 48% – malih poduzeća imala je svoje mobilne aplikacije u usporedbi s jednom trećinom od 32% u 2021. Ovaj trend pokazuje promjenu u potrebama korisnika koji zahtijevaju interakcije slične mobilnim na svim platformama.

Razvojem PWA, tvrtke mogu izravno pružiti ovo iskustvo izvorne aplikacije putem web-preglednika, dajući krajnjim korisnicima pouzdanu i privlačnu aplikaciju bez potrebe za zasebnom mobilnom aplikacijom

Što su PWA?

Progresivna web-aplikacija je aplikacija koja korisnicima pruža izvornu podršku, sličnu mobilnim uređajima, bez potrebe za izgradnjom s obzirom na platformu koja varira od Androida preko IOS-a do stolnih računala. Lagani su, dostupni na svim uređajima i automatski se ažuriraju kada se spoje na internet.

Zašto razmotriti PWA za svoju tvrtku?

• Jeftinije su u usporedbi s razvojnim izvornim aplikacijama
• Mogu se jednostavno instalirati na početne zaslone korisnika bez trgovine aplikacija
• PWA nude push obavijesti baš kao i mobilne aplikacije
• Oni nude izvanmrežnu funkcionalnost pohranjivanjem sadržaja u predmemoriju
• Dizajnirani su za rad na različitim uređajima

Pregled nove izvorne podrške Next.js za PWA

Nedavno sam istraživao najbolji mogući način da svoju aplikaciju NextJs pretvorim u progresivnu web-aplikaciju kada sam naišao na komentar Reddita u nastavku o nedavnim ažuriranjima Next.js-a uključujući izvornu podršku za PWA.

Pogledajte komentar ovdje .

Nakon pregleda ažuriranja, mogu reći da nikad nije bilo lakše kreirati PWA i to ću dokazati.

Postavljanje projekta i zahtjevi

• Razumno razumijevanje Reacta.
• NodeJ-ovi instalirani na vašem računalu.

PS: Dvije su datoteke vrlo važne da bi vaša aplikacija bila prepoznata kao PWA - datoteka manifesta i datoteka servisnog radnika .

• Datoteka manifesta: Manifest web-aplikacije je datoteka koja sadrži informacije o našoj aplikaciji zbog kojih se ona u biti može instalirati. Ove informacije uključuju boju teme, ikone, početni URL itd.
• Service worker: Service worker je datoteka koja sadrži skriptu koja se izvodi u pozadini aplikacije. Omogućuje značajke kao što su push obavijesti, predmemorija i izvanmrežna podrška.

1.) Postavljanje aplikacije

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

Ili

 yarn create next-app my-pwa-app

Nakon pokretanja naredbe, slijedite upute za pojedinosti vaše instalacije, a zatim idite u direktorij projekta

 cd my-pwa-app

Pokrenite razvojni poslužitelj

 npm run dev 

2.) Napravite datoteku manifesta

Izradite datoteku manifest.json ili manifest.ts u direktoriju 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', }, ], } }

• naziv: Službeni naziv aplikacije. Ovo se ime pojavljuje na početnom zaslonu i omogućuje korisnicima prepoznavanje aplikacije.
• short_name : Kratko ime se pojavljuje kada je ime dugo i nema puno prostora za prikaz
• opis : opisuje aplikaciju i što ona radi.
• start_url : Kada korisnik pokrene aplikaciju, ona počinje s ovdje navedene rute.
• display : svojstvo display konfigurira svoj izgled kada se pokrene i može biti bilo koji od standalone minimal-ui fullscreen ili browser
• background_color : važno je koristiti boju pozadine koja odgovara temi aplikacije za glatki prijelaz i korisničko iskustvo
• theme_color : Ovo određuje boju elemenata korisničkog sučelja kao što su alatna traka preglednika i statusna traka.
• ikone : Niz ikona sadrži svojstva ikona koje će se koristiti na različitim platformama, navodeći src , size i type . Za vaš PWA važno je imati barem ikone veličine 192x192 i 512x512 .

Web-mjesta poput manifest-generatora mogu se koristiti za brzo generiranje datoteke manifesta i različitih veličina ikona

3.) Kreirajte datoteku uslužnog radnika.

Uslužni radnik bi slušao push događaje i izvršavao donju funkciju za push obavijesti

 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.) Prijavite servisera

Da biste registrirali uslužnog radnika, trebate navesti rutu na kojoj je kreiran uslužni radnik.

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

Instalirajte web-push za rukovanje obavijestima i pretplatama

 npm install web-push --save

Zatim moramo dobiti pretplatu ako je korisnik ima ili pretplatiti korisnika na push događaje. U stvarnoj aplikaciji, ovu pretplatu treba poslati na poslužitelj za pohranu

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

Za generiranje VAPID ključeva, pokrenite:

 npx web-push generate-vapid-keys 

Sve to zajedno za korisničko sučelje s funkcijom testiranja push obavijesti

 "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.) Stvaranje krajnje točke

• Unutar direktorija app stvorite novu mapu pod nazivom api .
• Unutar mape api stvorite drugu mapu pod nazivom sendNotification .
• Unutar mape sendNotification stvorite datoteku pod nazivom route.ts .

Struktura bi trebala biti sljedeća

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

U datoteku route.ts uključite sljedeće retke koda

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

Kako biste potvrdili da je aplikacija sada PWA, ikona za preuzimanje trebala bi se pojaviti krajnje desno u url traci. Također biste trebali moći vidjeti informacije o web manifestu na kartici aplikacija.

Zaključak

Nedavno ažuriranje Next.js-a s izvornom podrškom za PWA učinilo je proces stvaranja progresivnih web-aplikacija vrlo besprijekornim. Uz Next.js, razvoj i implementacija PWA sada je jednostavan proces u dijelu modernog web razvoja budući da programeri sada mogu brzo kreirati aplikacije sa značajkama nalik nativnim koje korisnici očekuju, sve iz web preglednika.