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
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.
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.
PS: Dvije su datoteke vrlo važne da bi vaša aplikacija bila prepoznata kao PWA - datoteka manifesta i datoteka servisnog radnika .
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
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', }, ], } }
standalone
minimal-ui
fullscreen
ili browser
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
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 });
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;
app
stvorite novu mapu pod nazivom api
.api
stvorite drugu mapu pod nazivom sendNotification
.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.
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.