زه غواړم چې د وسایلو جوړ کړي چې نه یوازې کار کوي - دوی زما ټیم د Next.js ټانکونو کې ډیری وخت دی چې دقیقا پوه شي چې څه درد کوي. یو له وروستیو څه چې زه جوړ کړم دا دی - یو drop-in بسته چې په خپل Next.js اپلیکیشن کې د PWA بشپړ ملاتړ ته ورسیږي پرته چې تاسو خپل مو له لاسه ورکړئ. د خپل لاره څخه خارج کړئ next-pwa-pack The Backstory: د دې څه لپاره چې زه یې لیکل) هر وخت چې یو پیرودونکي د "PWA ملاتړ" په اړه اشاره کوي، ما خپل ځان ته وښيي. زه د موجودو کتابتون هڅه کړ. ډیری جادو. ټونونو د config. یا یوازې په بشپړه توګه غیر متوافق - چې، په بل کې، موږ په بشپړه توګه تصویب کړ. ما غواړم: App Router د سرور سایټ cache revalidation. د App Router انټرنېټ. په اسانۍ سره د TABS تر منځ sync. د backend څخه د کیش مدیریت لپاره د Clean API. په ځای کې، زه په لاس کې د خدمتونو کارکوونکو لیکلو پای ته ورسیږي. Tuning کیچ TTLs. د روزنې منطق په کارولو سره. Stale مشتریانو مدیریت. manually wiping caches each time we shipped. او حتی د ګرځنده کاروونکو ته د اپلوزونه نه وګورئ کله چې دوی په سخت ډول تازه کړي. کافی دی. ما د هغه څه ته اړتيا لري چې په سمه توګه ساده، مخکښ، او د جنگونو د آزموینې. نو زه دا جوړ. د ساختماني : هغه څه چې په دې کې next-pwa-pack د بیلګې په توګه پړاو یو د لږ تر لږه خدمت کارکوونکي په نامه راځي: د HTML سره TTL cache. د سټیټیک اټکلونو په کارولو سره. د آنلاین کار کوي، لکه څنګه چې یو حقیقي PWA باید. بيا زه د پیژندنې سیسټم اضافه کړ چې د کلینټر سره د خدماتو کارکوونکي سره خبرې وکړي - د مثال په توګه، د کیش یا د کیش په بشپړه توګه غیر فعال کړي. وروسته، زه ځینې سکرپټونه جوړ کړم: د sw.js، manifest.json، او offline.html په خپل پروژې کې اتومات کاپي کړئ. د سرور عمل د revalidatePWA په نوم کې ډک کړئ چې تاسو کولی شئ په هر ځای کې وکاروئ (API روټونه، سرور عملونه، سرور برخو - خپل انتخاب وکړئ). د بشپړ App Router او SSR / Edge ملاتړ لپاره، زه هر څه په لوړه کچه فعالیت کې پوښلي: One import, one call - بشپړ شوی. withPWA زه هم په tab synchronization جوړ کړ. ځکه چې کاروونکي په 3 ټیپونو کې ستاسو اپلیکیشن ونیسئ او انتظار وکړئ چې دوی په جادو کې همتول شي. زه دا له لارې حل کړم + د د واقعاتو ولډنګ localStorage storage د پایلو؟ یو بسته چې یوازې کار کوي. نه د تور جادو د ترتیب. نه ستاسو د اپلیکیشن د کور برخو rewrite. هغه څه چې تاسو سره next-pwa-pack د بیلګې په توګه کله چې نصب کړئ، تاسو ترلاسه کړئ: د خدماتو کارکوونکي ثبت د بکس څخه - نه د کیبل پلیټ. Offline Fallback سره یو customizable offline.html. د اتوماتیک کاپی شوي فایلونه چې تاسو کولی شئ (مینیفست، SW، او داسې نور) بدل کړئ. د کیچ کنترول API - صاف، تازه، غیر فعال، ټول په پروګرام کې. د ټابلیټونو تر منځ sync - د ډیری ټابلیټونه تنظیماتو کې هیڅ ټابلیټ مواد نه. د محلي پرمختګ په وخت کې د PWA حالت لپاره د پراختیا پینل. د سرور په برخه کې د پلټنې ملاتړ له لارې د سرور عملونه، API روټونه، او یا بهرني webhook انټرنټونو. تاسو کولی شئ دلته د بسته بند کړئ: https://github.com/dev-family/next-pwa-pack کله چې تاسو یې نصب کړئ د نصب سکرپټ د PWA boilerplate په اتوماتيک ډول کاپی کوي : /public sw.js – ستاسو د خدمتونو کارکوونکي سره د کیش منطق. د offline.html - د offline موډل لپاره Fallback پاڼه. manifest.json - دا ستاسو د اپلیکیشن سره مطابقت لري. ⚠️ د موجودې فایلونه به په لوړه کچه نه وي - دا ستاسو د نصب لپاره احترام کوي. که تاسو غواړئ په دستاوي توګه د کاپي فعال کړئ: node node_modules/next-pwa-pack/scripts/copy-pwa-files.mjs # or npx next-pwa-pack/scripts/copy-pwa-files.mjs د سرور عمل دا هم د خپل یا د فایل د فورمه جوړښت پورې اړه لري: revalidatePWA app/actions.ts src/app/actions.ts "use server"; export async function revalidatePWA(urls: string[]) { const baseUrl = process.env.NEXT_PUBLIC_HOST || "http://localhost:3000"; const res = await fetch(`${baseUrl}/api/pwa/revalidate`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ urls, secret: process.env.REVALIDATION_SECRET, }), }); return res.json(); } که دا فایل نه ښيي، تاسو کولی شئ د کارولو: node node_modules/next-pwa-pack/scripts/copy-pwa-server-actions.mjs ستاسو د جوړولو Manifest.Jason په اړه Manifest.Jason په اړه د نصب کولو وروسته، د customization په لټه کې نلري : /public/manifest.json { "name": "My App", "short_name": "App", "description": "My amazing PWA app", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "icons": [ { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] } ستاسو آیکونو ته ډک کړئ ، یا د پړاو څخه ډډه وکړئ. هیڅ څه فینسی. public/icons/ د چټک پیل: Wire It Up ستاسو د layout په ، او د جادو په ځمکه: PWAProvider import { PWAProvider } from "next-pwa-pack"; export default function layout({ children }) { return <PWAProvider>{children}</PWAProvider>; } که تاسو غواړئ چې د revalidation د سرور څخه کار وکړي، نو تاسو به ستاسو د منځني سافټویر هم تازه کړي: // /middleware.ts import { withPWA } from "next-pwa-pack/hoc/withPWA"; function originalMiddleware(request) { // your logic here return response; } export default withPWA(originalMiddleware, { revalidationSecret: process.env.REVALIDATION_SECRET!, sseEndpoint: "/api/pwa/cache-events", webhookPath: "/api/pwa/revalidate", }); export const config = { matcher: ["/", "/(ru|en)/:path*", "/api/pwa/:path*"], }; د HOC انتخابونه: اصليMiddleware: ستاسو د بنسټ Middleware (د مثال په توګه، لپاره i18n یا auth). revalidationSecret: د مخکښ ټکین د کیچ revalidation بندولو لپاره. sseEndpoint: د SSE جریان پړاو (په صورت کې چې بدل کیږي). webhookPath: د کیچ تازه کولو لپاره د پای ته ځي (د revalidatePWA لخوا کارول کیږي). د داخل PWAProvider PWAP عرضه د د پوډر لاندې یو ټوټه چیزونه پوښل کیږي - او تاسو کولی شئ د چیرری برخو هم انتخاب کړئ: PWAProvider RegisterSW په اتوماتيک ډول د خدمت کارکوونکي ثبت کړئ ( ). د بریښنا په ګرځنده توګه کار کوي. تاسو کولی شئ که اړتيا وي د پړاو په پرتله کړئ: /sw.js <PWAProvider swPath="/custom/sw.js">{children}</PWAProvider> CacheCurrentPage د نړيوال (د SPA سټیل انتقالونو په شمول) مخنیوي، د اوسني پاڼه HTML cache. SWRevalidateListener د localStorage واقعاتو لپاره ساعتونه او په ټیپونو کې د کیچ تازه کولو فعالوي. SSERevalidateListener Listenes to server-sent events له خوا د کله چې ستاسو backend وايي "د دې URLs ته راټول کړئ"، دا گوشونکي ډاډه کوي چې مشتریانو دا وکړي. sseEndpoint DevPWAStatus د Dev-only پینل تاسو کولی شئ په دې ډول فعال کړئ: <PWAProvider devMode>{children}</PWAProvider> د نندارتون: د آنلاین / offline حالت Cache نسخه د اپلوز وړتیا د یو کلیک وسایلو: Clear Cache، unregister SW، refresh، disable / enable cache د خدمت کارونکي په حقیقت کې څه کوي د کور د دستکشو: sw.js د HTML Caching د TTL سره cache شوي صفحات (د معیاري وخت: 10 min - په sw.js کې بدلول کیدی شي) په اتوماتيک ډول کله چې TTL ختم کیږي Offline Fallback که HTML نلري د سټیټیک املاک JS، CSS، انځورونه د ایاالتو کیش شوي دي یوازې Caches د غوښتنې ترلاسه کړئ د پيغام د ملاتړ د مشتریانو څخه د دې فعالیتونو ملاتړ کوي: CACHE_CURRENT_HTML په اړه د انټرنېټ _ URL د DISABLE_CACHE / د ENABLE_CACHE د موټر _ منتظر د CLEAR_STATIC_CACHE د offline موډل د offline.html خدمت کوي که د شبکې او کیش په دوامداره توګه ناکام کیږي هڅه کوي چې کله چې آنلاین ته ورسیږي کارول په Middleware د نندارتون د نندارتون دا دی چې دا د SSR او Edge Middleware لپاره د کیچ revalidation رامینځته کوي - د SSE ملاتړ سره او ټول. next-pwa-pack export default withPWA(originalMiddleware, { revalidationSecret: process.env.REVALIDATION_SECRET!, sseEndpoint: "/api/pwa/cache-events", webhookPath: "/api/pwa/revalidate", }); Params: اصليMiddleware: ستاسو د موجوده Middleware منطق (Auth، i18n، او نور) revalidationSecret: نو کوم نور کولی شي ستاسو د کیش پوک sseEndpoint: override که څه دي نور د دې روټ کاروي webhookPath: د سرور یا بهرني سیسټمونو لخوا د ځانګړي URLs ته د تایید لپاره کارول کیږي د واقعي نړۍ د کارولو په صورت کې د معلوماتو د بدلونونو وروسته Cache Update import { updateSWCache } from "next-pwa-pack"; // After creating a blog post: const handleCreatePost = async (data) => { await createPost(data); updateSWCache(["/blog", "/dashboard"]); }; د سرور څخه Cache تازه کولو import { revalidatePWA } from "../actions"; await createPost(data); await revalidatePWA(["/my-page"]); د Logout پر Cache پاکولو import { clearAllCache } from "next-pwa-pack"; const handleLogout = async () => { await logout(); await clearAllCache(); router.push("/login"); }; ټول کلن Cache عملونه import { clearAllCache, reloadServiceWorker, updatePageCache, unregisterServiceWorkerAndClearCache, updateSWCache, disablePWACache, enablePWACache, clearStaticCache, usePWAStatus, } from "next-pwa-pack"; // Examples: await clearAllCache(); await reloadServiceWorker(); await updatePageCache("/about"); await unregisterServiceWorkerAndClearCache(); await clearStaticCache(); updateSWCache(["/page1", "/page2"]); disablePWACache(); enablePWACache(); const { online, hasUpdate, swInstalled, update } = usePWAStatus(); د External Cache Triggers لپاره API Route که تاسو غواړئ د مخکښ تازه کولو څخه بهرنی (د مثال په توګه، د admin پینل څخه)، دلته یو API روټ تاسو کولی شئ کاروئ: // app/api/webhook/revalidate/route.ts import { NextRequest, NextResponse } from "next/server"; import { revalidatePWA } from "@/app/actions"; import { revalidateTag } from "next/cache"; import { FetchTags } from "@/app/api/endpoints/backend"; export async function POST(request: NextRequest) { try { const { tags, secret, urls } = await request.json(); if (secret !== process.env.REVALIDATION_SECRET) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }); } const validTags = Object.values(FetchTags); const invalidTags = tags?.filter((tag) => !validTags.includes(tag)) || []; if (invalidTags.length > 0) { return NextResponse.json( { error: `Invalid tags: ${invalidTags.join(", ")}` }, { status: 400 } ); } let successful = 0; let failed = 0; if (tags?.length) { const tagResults = await Promise.allSettled( tags.map((tag) => revalidateTag(tag)) ); successful = tagResults.filter((r) => r.status === "fulfilled").length; failed = tagResults.filter((r) => r.status === "rejected").length; } if (urls?.length) { await revalidatePWA(urls); } return NextResponse.json({ success: true, message: "Cache revalidation completed", tags, urls, successful, failed, timestamp: new Date().toISOString(), }); } catch (error) { console.error("Webhook revalidation error:", error); return NextResponse.json({ error: "Internal server error" }, { status: 500 }); } } د دې سره: POST https://your-app.com/api/webhook/revalidate { "tags": ["faq"], "secret": "1234567890", "urls": ["/ru/question-answer"] } د Debugging & DevTools دلته هغه څه چې تاسو کولی شئ په debugging کې چمتو کړئ: د DevTools → Application → خدمت کارکوونکي ته لاړ شئ. تصدیق کړئ چې کارمند ثبت شوی دی. چمتو کړئ Cache Storage → html-cache-v2 ته وګورئ که چیرې صفحات cache شوي دي. په نیټیټ → Offline کې د offline simulate او reload. تاسو باید د offline.html وګورئ. Console logs from the service worker help too: [PWA] Service Worker registered [SW] Cached: /about [SW] Revalidated and updated cache for: /blog Gotchas & نوټونه ځینې هغه څه چې تاسو باید پوه شئ مخکې چې تاسو کښته کړئ: د امنیت PWA د تولید لپاره HTTPS اړتیا لري. یوازې د GET غوښتنو کوډ شوي دي. د حساس معلومات مخنیوی نه کړئ. فعالیتونه د پیکیج ستاسو د اپلیکیشن د کړنو بیلګې په اړه ندي. دا د تکرار بارونو په عمده توګه ښه کوي. نندارتون TTL په sw.js کې تنظیم شوی (د default: 10 دقیقې). تاسو کولی شئ د CACHE_EXCLUDE له لارې URLs د کیش څخه خارج کړئ. manifest.json باید ستاسو د اپلیکیشن لپاره جوړ شي. revalidatePWA عمل editable ده - دا د اړتیا په توګه customize. withPWA او PWAProvider هر دوې انتخابونه قبول کوي: export default function PWAProvider({ children, swPath, devMode = false, serverRevalidation = { enabled: true, sseEndpoint: "/api/pwa/cache-events" }, }: PWAProviderProps) { هغه څه چې بل دا د دا باید په هم هم - یوازې نه په پراخه توګه ازموينه. next-pwa-pack Next.js 15 Next.js 13 App Router پروګرام شوي ځانګړتیاوې: TTL د اختیارات له لارې ترتیب کول (نه sw.js ترمیم) Push نوښتونه د Pattern-Based Cache کنټرول د Cache اغیزمنتیا لپاره د فعالیت مټريکونه دا دا ده. که تاسو د خدمتونو کارکوونکو په لارښوونې کې خسته لرئ، د تاسو به په یوه قهوه کې د 0 څخه بشپړ PWA ملاتړ ته لاړ شئ. next-pwa-pack پوښتنې، بګونه، یا پیژندنه؟ د ستونزو په اړه ونیسئ یا موږ ته ونیسئ. د github.com/dev-family / بل-pwa-pack
