Pelajari Cara Membuat Aplikasi Web Progresif dalam Hitungan Menit dengan Next.js

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 Top Design Firms . 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.

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.
• NodeJs terinstal di komputer Anda.

PS: Ada dua file yang sangat penting untuk membuat aplikasi Anda dikenali sebagai PWA - file manifes dan file pekerja layanan .

• Berkas manifes: 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.
• Service worker: 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.

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 manifest.json atau manifest.ts di direktori 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: Nama resmi aplikasi. Nama ini muncul di layar beranda dan memungkinkan pengguna untuk mengidentifikasi aplikasi.
• short_name : Nama pendek muncul ketika namanya panjang dan tidak banyak ruang untuk ditampilkan
• deskripsi : Menjelaskan aplikasi dan apa yang dilakukannya.
• start_url : Saat pengguna meluncurkan aplikasi, aplikasi dimulai dari rute yang ditentukan di sini.
• display : Properti display mengonfigurasikan tampilannya saat diluncurkan dan bisa berupa minimal-ui fullscreen atau browser standalone
• background_color : Penting untuk menggunakan warna latar belakang yang sesuai dengan tema aplikasi untuk transisi yang lancar dan pengalaman pengguna
• theme_color : Ini menentukan warna elemen UI seperti bilah alat dan bilah status browser.
• ikon : Susunan ikon berisi properti ikon yang akan digunakan di berbagai platform, yang menentukan src , size , dan type . Untuk PWA Anda, penting untuk memiliki setidaknya ikon berukuran 192x192 dan 512x512 .

Situs web seperti manifest-generator dapat digunakan untuk membuat file manifest dan berbagai ukuran ikon dengan cepat

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 web-push untuk menangani notifikasi dan langganan

 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 app , buat folder baru bernama api .
• Di dalam folder api , buat folder lain bernama sendNotification .
• Di dalam folder sendNotification , buat file bernama 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:[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 } ); } }

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.