Next.js के साथ मिनटों में प्रगतिशील वेब ऐप बनाना सीखें

मोबाइल ऐप व्यवसायों के लिए लगभग अपरिहार्य हो गए हैं क्योंकि वे उपयोगकर्ताओं को आवश्यक सेवाएँ शीघ्रता से और आसानी से प्रदान करने की क्षमता रखते हैं। हालाँकि, क्या होगा अगर मैं आपको बताऊँ कि वेब पर मोबाइल ऐप जैसा अनुभव प्राप्त करना संभव है? प्रोग्रेसिव वेब ऐप (PWA) इसी के लिए हैं।

टॉप डिज़ाइन फ़र्म सर्वे के अनुसार, मोबाइल ऐप की मांग बढ़ रही है। 2022 में, लगभग आधे - 48% - छोटे व्यवसायों के पास अपने मोबाइल ऐप थे, जबकि 2021 में यह संख्या एक तिहाई यानी 32% थी। यह प्रवृत्ति सभी प्लेटफ़ॉर्म पर मोबाइल जैसी सहभागिता की मांग करने वाले उपयोगकर्ता की ज़रूरतों में बदलाव को दर्शाती है।

PWA विकसित करके, व्यवसाय सीधे वेब ब्राउज़र के माध्यम से इस मूल-ऐप अनुभव को प्रदान कर सकते हैं, जिससे अंतिम उपयोगकर्ताओं को एक अलग मोबाइल एप्लिकेशन की आवश्यकता के बिना एक भरोसेमंद और आकर्षक एप्लिकेशन मिल सकता है

PWA क्या हैं?

प्रोग्रेसिव वेब ऐप एक ऐसा ऐप है जो उपयोगकर्ताओं को मूल समर्थन प्रदान करता है, बिना मोबाइल डिवाइस के, प्लेटफ़ॉर्म-विशिष्ट विचारों के साथ निर्माण करना जो एंड्रॉइड से लेकर आईओएस से लेकर डेस्कटॉप तक भिन्न होते हैं। वे हल्के होते हैं, सभी डिवाइस पर सुलभ होते हैं, और इंटरनेट से कनेक्ट होने पर स्वचालित रूप से अपडेट होते हैं।

अपने व्यवसाय के लिए PWA पर विचार क्यों करें?

• वे मूल ऐप्स विकसित करने की तुलना में कम महंगे हैं
• इन्हें ऐप स्टोर के बिना भी उपयोगकर्ताओं की होम स्क्रीन पर आसानी से इंस्टॉल किया जा सकता है
• PWA मोबाइल ऐप्स की तरह ही पुश नोटिफिकेशन प्रदान करते हैं
• वे सामग्री को कैश करके ऑफ़लाइन कार्यक्षमता प्रदान करते हैं
• इन्हें विभिन्न डिवाइसों पर काम करने के लिए डिज़ाइन किया गया है

PWAs के लिए Next.js के नए मूल समर्थन का अवलोकन

मैं हाल ही में अपने NextJs ऐप को प्रगतिशील वेब ऐप बनाने के सर्वोत्तम तरीकों पर शोध कर रहा था, तभी मेरी नजर नीचे Reddit पर Next.js के हालिया अपडेट के बारे में आई, जिसमें PWA के लिए मूल समर्थन भी शामिल था।

टिप्पणी यहाँ देखें.

अद्यतन की समीक्षा करने के बाद, मैं कह सकता हूं कि PWAs बनाना पहले कभी इतना आसान नहीं था और मैं इसे साबित भी करूंगा।

परियोजना सेटअप और आवश्यकताएँ

• React की उचित समझ.
• आपके मशीन पर NodeJs स्थापित है.

पी.एस.: आपके ऐप को PWA के रूप में मान्यता दिलाने के लिए दो फ़ाइलें बहुत महत्वपूर्ण हैं - मैनिफ़ेस्ट फ़ाइल और सर्विस वर्कर फ़ाइल ।

• मैनिफ़ेस्ट फ़ाइल: वेब ऐप मैनिफ़ेस्ट एक फ़ाइल है जिसमें हमारे ऐप के बारे में जानकारी होती है जो अनिवार्य रूप से इसे इंस्टॉल करने योग्य बनाती है। इस जानकारी में थीम का रंग, आइकन, शुरुआती URL आदि शामिल हैं।
• सर्विस वर्कर: सर्विस वर्कर एक ऐसी फ़ाइल है जिसमें स्क्रिप्ट होती है जो एप्लिकेशन के बैकग्राउंड में चलती है। यह पुश नोटिफिकेशन, कैशिंग और ऑफ़लाइन सहायता जैसी सुविधाओं की अनुमति देता है।

1.) ऐप सेट अप करना

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

या

 yarn create next-app my-pwa-app

कमांड चलाने के बाद, अपनी स्थापना के विवरण के लिए संकेतों का पालन करें और फिर प्रोजेक्ट निर्देशिका में नेविगेट करें

 cd my-pwa-app

डेव सर्वर प्रारंभ करें

 npm run dev 

2.) मैनिफ़ेस्ट फ़ाइल बनाएँ

app निर्देशिका में manifest.json या manifest.ts फ़ाइल बनाएँ.

 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', }, ], } }

• नाम: ऐप का आधिकारिक नाम। यह नाम होम स्क्रीन पर दिखाई देता है और उपयोगकर्ताओं को ऐप की पहचान करने की अनुमति देता है।
• संक्षिप्त नाम : संक्षिप्त नाम तब प्रदर्शित होता है जब नाम लंबा होता है और प्रदर्शित करने के लिए अधिक स्थान नहीं होता
• विवरण : एप्लिकेशन का वर्णन करता है और यह क्या करता है।
• start_url : जब कोई उपयोगकर्ता ऐप लॉन्च करता है, तो यह यहां निर्दिष्ट रूट से शुरू होता है।
• डिस्प्ले : डिस्प्ले प्रॉपर्टी लॉन्च होने पर इसके स्वरूप को कॉन्फ़िगर करती है और यह standalone minimal-ui fullscreen या browser में से कोई भी हो सकती है
• background_color : सहज संक्रमण और उपयोगकर्ता अनुभव के लिए ऐप की थीम से मेल खाने वाले पृष्ठभूमि रंग का उपयोग करना महत्वपूर्ण है
• theme_color : यह ब्राउज़र के टूलबार और स्टेटस बार जैसे UI तत्वों का रंग निर्दिष्ट करता है।
• आइकन : आइकन सरणी में विभिन्न प्लेटफ़ॉर्म पर उपयोग किए जाने वाले आइकन के गुण होते हैं, जो src , size और type निर्दिष्ट करते हैं। आपके PWA के लिए, कम से कम 192x192 और 512x512 आकार वाले आइकन होना महत्वपूर्ण है।

मैनिफ़ेस्ट-जेनरेटर जैसी वेबसाइटों का उपयोग मैनिफ़ेस्ट फ़ाइल और विभिन्न आकारों के आइकन को शीघ्रता से उत्पन्न करने के लिए किया जा सकता है

3.) सर्विस वर्कर फ़ाइल बनाएँ.

सेवा कार्यकर्ता पुश घटनाओं को सुनेगा और पुश सूचनाओं के लिए नीचे दिए गए कार्य को पूरा करेगा

 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.) सेवा कार्यकर्ता को पंजीकृत करें

सेवा कार्यकर्ता को पंजीकृत करने के लिए, आपको वह रूट प्रदान करना होगा जहां सेवा कार्यकर्ता बनाया गया है।

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

नोटिफ़िकेशन और सदस्यता को संभालने के लिए वेब-पुश इंस्टॉल करें

 npm install web-push --save

फिर हमें सब्सक्रिप्शन प्राप्त करने की आवश्यकता है यदि उपयोगकर्ता के पास कोई सब्सक्रिप्शन है या उपयोगकर्ता को सब्सक्राइब करने के लिए ईवेंट पुश करना है। वास्तविक एप्लिकेशन में, इस सब्सक्रिप्शन को स्टोरेज के लिए सर्वर पर भेजा जाना चाहिए

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

VAPID कुंजियाँ उत्पन्न करने के लिए चलाएँ:

 npx web-push generate-vapid-keys 

पुश नोटिफिकेशन का परीक्षण करने के लिए एक फ़ंक्शन के साथ UI के लिए यह सब एक साथ रखना

 "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.) समापन बिंदु बनाना

• app निर्देशिका के अंदर, api नाम से एक नया फ़ोल्डर बनाएं।
• api फ़ोल्डर के भीतर, sendNotification नाम से एक और फ़ोल्डर बनाएँ।
• sendNotification फ़ोल्डर के अंदर route.ts नाम की एक फ़ाइल बनाएँ।

संरचना इस प्रकार होनी चाहिए

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

Route.ts फ़ाइल में कोड की निम्नलिखित पंक्तियाँ शामिल करें

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

यह पुष्टि करने के लिए कि ऐप अब PWA है, डाउनलोड आइकन URL बार में सबसे दाईं ओर दिखाई देना चाहिए। आपको एप्लिकेशन टैब में वेब मैनिफ़ेस्ट के बारे में जानकारी भी देखने में सक्षम होना चाहिए।

निष्कर्ष

Next.js के हाल ही में किए गए अपडेट में नेटिव PWA सपोर्ट के साथ प्रोग्रेसिव वेब ऐप बनाने की प्रक्रिया को बहुत सहज बना दिया है। Next.js के साथ, PWA को विकसित करना और तैनात करना अब आधुनिक वेब डेवलपमेंट के हिस्से में एक सीधी प्रक्रिया है क्योंकि डेवलपर्स अब वेब ब्राउज़र के भीतर से ही उपयोगकर्ताओं की अपेक्षा के अनुसार नेटिव जैसी सुविधाओं के साथ एप्लिकेशन बना सकते हैं।