වසර ගණනාවක් තිස්සේ කවුරුහරි කියනවා, "අපි මෙම යෙදුම ස්ථාපනය කිරීමට සහ ඔන්ලයින් වැඩ කිරීමට හැකිද?" PWA කුරුල්ලෙකුගේ වහලට වේදනාකාරී, වේදනාකාරී පහත වැටීම: මෘදු සේවා වෘත්තීය සැකසුම්, කැසිනෝ කැසිනෝ, App Router දේවල් බිඳ දැමීම, සහ පරිශීලකයින් අතින් Cache Gods ඇමතුමක් නොලැබුණහොත් පැරණි අනුවාදය සමඟ රැඳී සිටී. ඒ නිසා මම ඕනෑම සාධාරණ සංවර්ධකයාට කෝපි ගොඩක් සහ ප් රමාණවත් ඉවසීමක් නොමැතිව කළ යුත්තේ කුමක්ද: මම මගේම නපුරු පැකේජය ගොඩනැගුවා. Introducing: next-pwa-pack එය Next.js සඳහා drop-in wrapper වේ (ඔව්, App Router සමඟ හොඳින් ක්රියා කරයි) ඔබට සම්පූර්ණ PWA සහාය ලබා දෙයි. import { PWAProvider } from "next-pwa-pack"; export default function layout({ children }) { return <PWAProvider>{children}</PWAProvider>; } සහ Your app installs like a native one, works offline, caches pages, syncs tabs, and even ships with a built-in dev panel so you don’t have to guess if anything is working. boom ඒක දාලා ඔයාගේ ජීවිතේට යන්න. ඇයි මම මේක හදන්නේ ඕනෑම පාරිභෝගිකයා “offline-first” හෝ “PWA විශේෂාංග” ඉල්ලන විට, මම ටිකක් ඇතුළත මිය ගියා. , එය නවතම App Router සහාය නොතිබූ බව සොයා ගැනීමට පමණක්, හෝ මම මගේම ක්රියාත්මක කිරීමට උත්සාහ කරන අතර, සේවකයා සැබවින්ම යාවත්කාලීන කර තිබේද යන්න බලන්න පිටුව තරහ-සංස්කරණය අවසන්. next-pwa අවසානයේදී, මම දැනගත්තා මම අවශ්ය දේ නොසැලකිලිමත් ස්ථාපනය.එය මට ක්රියාකාරී සේවා සේවකයෙකු, පෙර කුසලානය, යාවත්කාලීන ලෝගිකය සහ අනුවාදය පාලනය ලබා දුන් දෙයක් - මම ඕනෑම Next.js ව්යාපෘතියට සම්බන්ධ කළ හැකි දෙයක් සහ විශ්වාස කළ හැකි දෙයක්. ඒ නිසා මම ඒක ගොඩනැගුවා. ඇත්තටම මොනවද වෙන්නෙ හිසකෙස් යට, නැව් අසාර්ථක , සහ ඔබගේ පොදු / ගොනුවකට, ඔවුන් දැනටමත් නොමැති නම්. sw.js ස්ථාවර ස්ථාවර ප්රතිපත්තියක් සහිතව HTML සහ ස්ථාවර සම්පත් සකස් කරන බව - HTML ප්රතිචාර 10 මිනිත්තු TTL ලබා, JS, CSS සහ රූප වැනි සම්පත් සදාකාලිකව ගබඩා කරනු ලැබේ. next-pwa-pack sw.js manifest.json offline.html සියලුම browser tabs සකස් කිරීම සඳහා, එය භාවිතා කරයි සති අන්තයේදී යාවත්කාලීන කිරීම සඳහා සිදුවීම්. ඔබ ඔන්ලයින් යන්නේ නම්, එය සරල ලෙස සේවය කරයි එබැවින් පරිශීලකයින් බිය වූ සුදු රූපය මුහුණ නොගනී. localStorage offline.html එය "offline වීම" ගැන පමණක් නොව, ඔබ caching layer සමඟ සන්නිවේදනය කළ හැකි කුඩා API පවා එකතු කර ඇත. logout පසු සියලු cached දත්ත පිරිසිදු කිරීමට අවශ්යද? නව අන්තර්ගතය ප්රදර්ශනය කිරීමෙන් පසු සමහර පිටුවන් ප්රදර්ශනය කිරීමට අවශ්යද? කොමෙන්ට් එකත් තියෙනවා.එහෙත් තියෙනවා ඔබ ස්ථාපනය තත්වය අනුගමනය කිරීමට අවශ්ය නම් හෝ නව සංස්කරණ සඳහා සවන්. clearAllCache() updateSWCache(["/blog", "/dashboard"]) usePWAStatus() Dev Mode ආකර්ෂණීය ඔබට හැකි නම් මෙම ප්රවේශය ඔබගේ ඔන්ලයින් / ඔන්ලයින් තත්වය පෙන්වයි, ඔබට කේස් එක පිරිසිදු කිරීම හෝ යාවත්කාලීන කිරීම, සේවා සේවකයා ලියාපදිංචි කිරීම, සහ ඔබ පරීක්ෂා කරන විට කේස් එක ඇතුළත් කිරීම හෝ ඉවත් කිරීම පවා ඉඩ දෙයි. Chrome DevTools හරහා තවදුරටත් කැප කිරීම හෝ සෑම විනාඩි පහකටම මෑතකටම සේවා සේවකයින් ලියාපදිංචි නොකිරීම. devMode මතක තබා ගත යුතු කරුණු කිහිපයක් එය මැජික් නොවේ, එබැවින් ඔබ තවමත් ඔබගේ manifest.json අනුකූල කිරීමට අවශ්ය වනු ඇත සහ ඔබ හොඳින් පෙනෙන බැන්සර් ස්ථාපනය කිරීමට අවශ්ය නම් ආකෘති උඩුගත කිරීමට අවශ්ය වනු ඇත. අපි GET ඉල්ලීම් පමණක් කුසලානය - කිසිදු මැටියා හෝ සංවේදී POST දත්ත - ඔබ HTML TTL හෝ වෙනත් කුසලානය නීති වෙනස් කිරීමට අවශ්ය නම්, ඔබ කුසලානය නිවැරදි කළ යුතුය සෘජුවම (අද වන විට - config පද්ධතිය පැමිණෙනු ඇත). sw.js නමුත් ප්රතිඵලදායී ලෙස, බලපෑම අවම වන අතර, ඕනෑම දෙයක් නම්, ආපසු පැමිණෙන සංචාරකයින් සකස් කරන ප්රතිචාර වලින් වේගය වැඩි වනු ඇත. ඊළඟට මොනවද සැලැස්ම ආකෘති මත පදනම් වන TTL නීති සඳහා සහාය, push දැනුම් දීමනා, URL ආකෘති මත පදනම්ව වඩාත් බුද්ධිමත් cache උපාය මාර්ග, ISR (Incremental Static Regeneration) සමඟ සංයෝගයක්, සහ සැබෑ කාලය තුළ cache hits / miss metrics අනුගමනය කිරීමට ඇතුළත් ආකෘතිය පවා ඇතුළත් වේ. ඩොක්ටර් මම ගොඩනැගුවා මොකද මම කලේ අතපසු සේවා සේවකයින් හා නිෂ්පාදන දී ස්ටෙල් කුකීස් debugging.It works out of the box, plays nice with the latest විශේෂාංග, සහ ඔබේ යෙදුම වේගවත්, ස්ථාපනය කළ හැකි, සහ ප්රතිරෝධීව සිටීමට උදව් - ඔබේ සංවර්ධක මනස විනාශ කිරීමකින් තොරව. next-pwa-pack Next.js එය විවෘත මූලාශ්රය වන අතර, ඔබ එය මෙහි උත්සාහ කළ හැකිය: <https://github.com/dev-family/next-pwa-pack](https://github.com/dev-family/next-pwa-pack) එය භාවිතා කරන්න, එය කැඩීම, එය බිඳ දැමීම - සහ ඔබ හිතන දේ මට කියන්න. හැංගිලා ඉන්න!
