वर्षों से कोई कहता है, "हे, क्या हम इस ऐप को स्थापित कर सकते हैं और ऑफ़लाइन भी काम कर सकते हैं? PWA खरगोश छेद में धीमी, दर्दनाक गिरावट का सामना करें: फ्लैश सेवा कार्यकर्ता सेटिंग्स, कैश हास्य, ऐप रूटर चीजों को तोड़ना, और उपयोगकर्ता पुराने संस्करणों के साथ फंस गए जब तक कि वे मैन्युअल रूप से कैश देवताओं को कॉल न करें। इसलिए मैंने ऐसा किया जो किसी भी उचित डेवलपर्स ने बहुत अधिक कॉफी के साथ किया होगा और पर्याप्त धैर्य नहीं था: मैंने अपना खुद का दुष्ट पैकेज बनाया। Introducing: next-pwa-pack यह Next.js के लिए एक ड्रॉप-इन वॉरेपर है (Yep, App Router के साथ ठीक से काम करता है) जो आपको अपने लेआउट को एक प्रदाता के साथ पैक करके आपको पूर्ण PWA समर्थन देता है। import { PWAProvider } from "next-pwa-pack"; export default function layout({ children }) { return <PWAProvider>{children}</PWAProvider>; } और अपने ऐप को एक मूल के रूप में स्थापित करें, ऑफ़लाइन काम करें, कैश पेज, सिंक्रनाइज़ टैब, और यहां तक कि एक अंतर्निहित डेव पैनल के साथ जहाज भी करें ताकि आपको अनुमान लगाने की ज़रूरत न हो कि क्या कुछ भी काम कर रहा है। boom बस इसे छोड़ दें और अपने जीवन के साथ आगे बढ़ें। क्यों बनाया यह हर बार एक ग्राहक ने "ऑफ़लाइन-पहले" या "पीडब्ल्यूए सुविधाओं" के लिए पूछा, मैं थोड़ा अंदर मर गया। , केवल यह खोजने के लिए कि यह नवीनतम ऐप राउटर का समर्थन नहीं करता था, या मैं अपना खुद का रोल करने की कोशिश करूंगा और यह देखने के लिए कि क्या सेवा कर्मचारी वास्तव में अद्यतन किया गया है, यह देखने के लिए पृष्ठ को गुस्से से ताज़ा करता था। next-pwa अंत में, मुझे एहसास हुआ कि मैं जो चाहता था वह एक न-ब्रेनर सेटिंग था. कुछ ऐसा जो मुझे एक काम करने वाले सेवा कर्मचारी, प्री-चैचिंग, अद्यतन तर्क, और संस्करण नियंत्रण दिया - और रास्ता से बाहर आया. कुछ ऐसा जो मैं किसी भी Next.js परियोजना में जोड़ सकता था और भरोसा कर सकता था। इसलिए मैंने इसे बनाया। वास्तव में क्या चल रहा है हथियार के नीचे, जहाजों की कमी , और यह sw.js एक स्वस्थ डिफ़ॉल्ट के साथ HTML और स्थिर संपत्ति कैशिंग को संभालता है - HTML प्रतिक्रियाओं को 10 मिनट का TTL मिलता है, और JS, CSS, और छवियों जैसे संपत्ति स्थायी रूप से संग्रहीत की जाती है। next-pwa-pack sw.js manifest.json offline.html सभी ब्राउज़र टैब को सिंक्रनाइज़ करने के लिए, यह उपयोग करता है सत्र के दौरान अद्यतनों को प्रसारित करने के लिए घटनाएं. यदि आप ऑफ़लाइन जाते हैं, तो यह एक हल्के इसलिए उपयोगकर्ताओं को भयभीत सफेद स्क्रीन का सामना नहीं करना चाहिए। localStorage offline.html और चूंकि यह सिर्फ "ऑफ़लाइन होने" के बारे में नहीं है, मैंने एक छोटे से एपीआई भी जोड़ा ताकि आप कैशिंग परत के साथ बातचीत कर सकें। कॉल. नई सामग्री प्रकाशित करने के बाद कुछ पृष्ठों को प्रीफैच करना चाहते हैं? ये भी है ये है ये है ये है ये है ये है ये है ये है ये है ये है यदि आपको स्थापना की स्थिति का ट्रैक करने या नए संस्करणों के लिए सुनने की आवश्यकता है। clearAllCache() updateSWCache(["/blog", "/dashboard"]) usePWAStatus() Dev Mode के फायदे यदि आप अनुमति प्रदाता में, आपको अपने ऐप में एक फ्लोटिंग PWA डिबग पैनल मिलता है. यह आपकी ऑनलाइन / ऑफ़लाइन स्थिति को प्रदर्शित करता है, आपको कैश को साफ करने या नवीनीकृत करने की अनुमति देता है, सेवा कर्मचारियों को रजिस्टर करना बंद कर देता है, और यहां तक कि परीक्षण करते समय कैशिंग को चालू या बंद कर देता है. अब Chrome DevTools के माध्यम से काटने या हर पांच मिनट में मैन्युअल रूप से रजिस्टर किए जाने वाले सेवा कर्मचारियों को नहीं। devMode याद रखने के लिए कुछ चीजें यह जादू नहीं है, इसलिए आपको अभी भी अपने manifest.json को अनुकूलित करने और आइकन अपलोड करने की आवश्यकता होगी यदि आप बैनर को अच्छी तरह से स्थापित करना चाहते हैं। सीधे (अब के लिए - एक config सिस्टम आ रहा है)। sw.js लेकिन प्रदर्शन के दृष्टिकोण से, प्रभाव न्यूनतम है, और यदि कुछ भी है, तो वापस आने वाले आगंतुकों को कैश किए गए प्रतिक्रियाओं से गति बढ़ाएगा। क्या है अगला मार्गदर्शिका में कॉन्फ़िग-आधारित TTL नियमों के लिए समर्थन शामिल है, push सूचनाएं, यूआरएल पैटर्न के आधार पर स्मार्ट कैश रणनीतियां, ISR (Incremental Static Regeneration) के साथ एकीकरण, और यहां तक कि वास्तविक समय में कैश हिट / मिस मीट्रिक को ट्रैक करने के लिए एक अंतर्निहित डैशबोर्ड भी शामिल है। पीएचडी; डॉ बनाया है क्योंकि मैं हाथ से वायरिंग सेवा कर्मियों और उत्पादन में स्टेल कैश डिबग करने के लिए किया गया था. यह बॉक्स से बाहर काम करता है, नवीनतम के साथ अच्छा खेलता है विशेषताएं, और आपकी ऐप को तेजी से, स्थापित करने योग्य और प्रतिरोधी बनाए रखने में मदद करता है - आपके डेवलपर्स की बुद्धि को नष्ट किए बिना। next-pwa-pack Next.js यह ओपन सोर्स है, आप इसे यहां आज़मा सकते हैं: <https://github.com/dev-family/next-pwa-pack](https://github.com/dev-family/next-pwa-pack) इसका उपयोग करें, इसे फायर करें, इसे तोड़ दें - और मुझे बताएं कि आप क्या सोचते हैं। छिपा रहें !
