Aplikasi seluler hampir menjadi hal yang sangat penting bagi bisnis karena kemampuannya untuk menyediakan layanan yang dibutuhkan pengguna dengan cepat dan mudah. Namun, bagaimana jika saya memberi tahu Anda bahwa pengalaman seperti aplikasi seluler dapat dinikmati di web? Untuk itulah Progressive Web Apps (PWA) diciptakan. Permintaan aplikasi seluler terus meningkat, seperti yang ditunjukkan oleh survei . Pada tahun 2022, hampir setengah – 48% – dari usaha kecil memiliki aplikasi seluler dibandingkan dengan sepertiganya yaitu 32% pada tahun 2021. Tren ini menunjukkan adanya pergeseran kebutuhan pengguna yang menuntut interaksi seperti perangkat seluler di semua platform. Top Design Firms Dengan mengembangkan PWA, bisnis dapat langsung menyediakan pengalaman aplikasi asli ini melalui browser web, memberikan pengguna akhir aplikasi yang dapat diandalkan dan menarik tanpa memerlukan aplikasi seluler terpisah. Apa itu PWA? Aplikasi Web Progresif adalah aplikasi yang menyediakan dukungan asli bagi pengguna, mirip dengan perangkat seluler tanpa harus dibuat dengan pertimbangan khusus platform yang bervariasi dari Android, iOS, hingga desktop. Aplikasi ini ringan, dapat diakses di semua perangkat, dan diperbarui secara otomatis saat terhubung ke internet. Mengapa mempertimbangkan PWA untuk Bisnis Anda? Biaya pengembangan aplikasi asli lebih murah dibandingkan dengan pengembangan aplikasi asli. Mereka dapat dengan mudah dipasang di layar beranda pengguna tanpa App Store PWA menawarkan pemberitahuan push seperti aplikasi seluler Mereka menawarkan fungsionalitas offline dengan melakukan caching konten Mereka dirancang untuk bekerja pada perangkat yang berbeda Tinjauan umum dukungan asli baru Next.js untuk PWA Saya baru-baru ini meneliti cara terbaik untuk menjadikan aplikasi NextJs saya sebagai Aplikasi Web Progresif ketika saya menemukan komentar Reddit di bawah tentang pembaruan Next.js terkini termasuk dukungan asli untuk PWA. Lihat komentarnya . di sini Setelah meninjau pembaruan, saya dapat mengatakan bahwa membuat PWA tidak pernah semudah ini dan saya akan membuktikannya. Pengaturan dan Persyaratan Proyek Pemahaman yang wajar tentang React. terinstal di komputer Anda. NodeJs PS: Ada dua file yang sangat penting untuk membuat aplikasi Anda dikenali sebagai PWA - dan . file manifes file pekerja layanan Manifes aplikasi web adalah berkas yang berisi informasi tentang aplikasi kita yang pada dasarnya membuatnya dapat diinstal. Informasi ini mencakup warna tema, ikon, URL awal, dll. Berkas manifes: Service worker adalah berkas yang berisi skrip yang berjalan di latar belakang aplikasi. Service worker memungkinkan fitur-fitur seperti pemberitahuan push, penyimpanan sementara, dan dukungan offline. Service worker: 1.) Menyiapkan Aplikasi npx create-next-app@latest my-pwa-app Atau yarn create next-app my-pwa-app Setelah menjalankan perintah, ikuti petunjuk untuk spesifikasi instalasi Anda lalu navigasikan ke direktori proyek cd my-pwa-app Mulai server dev npm run dev 2.) Buat file manifes Buat file atau di direktori . 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', }, ], } } Nama resmi aplikasi. Nama ini muncul di layar beranda dan memungkinkan pengguna untuk mengidentifikasi aplikasi. nama: : Nama pendek muncul ketika namanya panjang dan tidak banyak ruang untuk ditampilkan short_name : Menjelaskan aplikasi dan apa yang dilakukannya. deskripsi : Saat pengguna meluncurkan aplikasi, aplikasi dimulai dari rute yang ditentukan di sini. start_url : Properti display mengonfigurasikan tampilannya saat diluncurkan dan bisa berupa atau display minimal-ui fullscreen browser standalone : Penting untuk menggunakan warna latar belakang yang sesuai dengan tema aplikasi untuk transisi yang lancar dan pengalaman pengguna background_color : Ini menentukan warna elemen UI seperti bilah alat dan bilah status browser. theme_color : Susunan ikon berisi properti ikon yang akan digunakan di berbagai platform, yang menentukan , , dan . Untuk PWA Anda, penting untuk memiliki setidaknya ikon berukuran dan . ikon src size type 192x192 512x512 Situs web seperti dapat digunakan untuk membuat file manifest dan berbagai ukuran ikon dengan cepat manifest-generator 3.) Buat file pekerja layanan. Pekerja layanan akan mendengarkan peristiwa push dan menjalankan fungsi di bawah ini untuk pemberitahuan 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.) Daftarkan pekerja layanan Untuk mendaftarkan pekerja layanan, Anda perlu menyediakan rute tempat pekerja layanan dibuat. const registration = await navigator.serviceWorker.register("/sw.js", { //provide the route to the service worker scope: "/", updateViaCache: "none", }); Instal untuk menangani notifikasi dan langganan web-push npm install web-push --save Kita kemudian perlu mendapatkan langganan jika pengguna memilikinya atau mendaftarkan pengguna untuk melakukan push events. Dalam aplikasi nyata, langganan ini harus dikirim ke server untuk penyimpanan. 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); } } Untuk menghasilkan kunci VAPID, jalankan: npx web-push generate-vapid-keys Menyatukan semuanya untuk UI dengan fungsi untuk menguji pemberitahuan 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.) Membuat titik akhir Di dalam direktori , buat folder baru bernama . app api Di dalam folder , buat folder lain bernama . api sendNotification Di dalam folder , buat file bernama . sendNotification route.ts Strukturnya harus seperti berikut app/ └── api/ └── sendNotification/ └── route.ts Dalam file route.ts, sertakan baris kode berikut 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 } ); } } Untuk mengonfirmasi bahwa aplikasi tersebut kini merupakan PWA, Ikon unduhan akan muncul di paling kanan pada bilah url. Anda juga akan dapat melihat informasi tentang manifes web di tab aplikasi. Kesimpulan Pembaruan terbaru Next.js dengan dukungan PWA asli telah membuat proses pembuatan aplikasi web progresif menjadi sangat mudah. Dengan Next.js, pengembangan dan penerapan PWA kini menjadi proses yang mudah sebagai bagian dari pengembangan web modern karena pengembang kini dapat dengan cepat membuat aplikasi dengan fitur-fitur seperti bawaan yang diharapkan pengguna, semuanya dari dalam peramban web.
