मोबाइल ऐप व्यवसायों के लिए लगभग अपरिहार्य हो गए हैं क्योंकि वे उपयोगकर्ताओं को आवश्यक सेवाएँ शीघ्रता से और आसानी से प्रदान करने की क्षमता रखते हैं। हालाँकि, क्या होगा अगर मैं आपको बताऊँ कि वेब पर मोबाइल ऐप जैसा अनुभव प्राप्त करना संभव है? प्रोग्रेसिव वेब ऐप (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 : यह ब्राउज़र के टूलबार और स्टेटस बार जैसे UI तत्वों का रंग निर्दिष्ट करता है। theme_color : आइकन सरणी में विभिन्न प्लेटफ़ॉर्म पर उपयोग किए जाने वाले आइकन के गुण होते हैं, जो , और निर्दिष्ट करते हैं। आपके PWA के लिए, कम से कम और आकार वाले आइकन होना महत्वपूर्ण है। आइकन src size type 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: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 } ); } } यह पुष्टि करने के लिए कि ऐप अब PWA है, डाउनलोड आइकन URL बार में सबसे दाईं ओर दिखाई देना चाहिए। आपको एप्लिकेशन टैब में वेब मैनिफ़ेस्ट के बारे में जानकारी भी देखने में सक्षम होना चाहिए। निष्कर्ष Next.js के हाल ही में किए गए अपडेट में नेटिव PWA सपोर्ट के साथ प्रोग्रेसिव वेब ऐप बनाने की प्रक्रिया को बहुत सहज बना दिया है। Next.js के साथ, PWA को विकसित करना और तैनात करना अब आधुनिक वेब डेवलपमेंट के हिस्से में एक सीधी प्रक्रिया है क्योंकि डेवलपर्स अब वेब ब्राउज़र के भीतर से ही उपयोगकर्ताओं की अपेक्षा के अनुसार नेटिव जैसी सुविधाओं के साथ एप्लिकेशन बना सकते हैं।
