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 . 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. Top Design Firms 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. instalirani na vašem računalu. NodeJ-ovi PS: Dvije su datoteke vrlo važne da bi vaša aplikacija bila prepoznata kao PWA - i . datoteka manifesta datoteka servisnog radnika 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. Datoteka manifesta: 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. Service worker: 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 ili u direktoriju . 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', }, ], } } Službeni naziv aplikacije. Ovo se ime pojavljuje na početnom zaslonu i omogućuje korisnicima prepoznavanje aplikacije. naziv: : Kratko ime se pojavljuje kada je ime dugo i nema puno prostora za prikaz short_name : opisuje aplikaciju i što ona radi. opis : Kada korisnik pokrene aplikaciju, ona počinje s ovdje navedene rute. start_url : svojstvo display konfigurira svoj izgled kada se pokrene i može biti bilo koji od ili display standalone minimal-ui fullscreen browser : važno je koristiti boju pozadine koja odgovara temi aplikacije za glatki prijelaz i korisničko iskustvo background_color : Ovo određuje boju elemenata korisničkog sučelja kao što su alatna traka preglednika i statusna traka. theme_color : Niz ikona sadrži svojstva ikona koje će se koristiti na različitim platformama, navodeći , i . Za vaš PWA važno je imati barem ikone veličine i . ikone src size type 192x192 512x512 Web-mjesta poput mogu se koristiti za brzo generiranje datoteke manifesta i različitih veličina ikona manifest-generatora 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 za rukovanje obavijestima i pretplatama web-push 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 stvorite novu mapu pod nazivom . app api Unutar mape stvorite drugu mapu pod nazivom . api sendNotification Unutar mape stvorite datoteku pod nazivom . sendNotification 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: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 } ); } } 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.
