Волим да градим алате који не само да раде - они Мој тим је био у тренерима Next.js довољно дуго да тачно зна шта боли. — Пакет за убацивање који повезује пуну подршку ПВА у вашој апликацији Next.js без раздвајања косе. Изађите из свог пута next-pwa-pack The Backstory (ака: Зашто сам написао ову ствар) Сваки пут када је клијент споменуо "ПВА подршку", ја сам се загрлио. Пробао сам постојеће библиотеке. Превише магије. Тоне конфигурације. или само потпуно некомпатибилне са — који смо, успут, у потпуности усвојили. хтео сам: App Router Сервер-сајт кеш ревалидација Апп рутер интеграција. Лако синхронизација између табс. Чиста АПИ за управљање кешем са бацкенда. Уместо тога, завршио сам писањем сервисних радника ручно. прилагођавање кеш ТТЛ-а. бављење логиком ажурирања. управљање стале клијентима. ручно брисање кеша сваки пут када смо испоручили. И немојте чак ни да ме покренете на корисницима који не виде ажурирања док се тешко не освеже. Trebalo mi je nešto mrtvo jednostavno, predvidljivo i borbeno testirano. Изградња Šta je ušlo u to Следећи Чланак Пацк Следећи Чланак Пацк Корак један је био писање минималног сервисног радника: Cache HTML sa TTL. Руковање статичким средствима. Ради оффлине, као што би прави ПВА требало. Затим сам додао систем за поруке тако да клијент може да разговара са службеним радником - на пример, да разбије кеш или потпуно онемогући кеш. Затим сам написао неколико сценарија: Auto-kopirajte sw.js, manifest.json i offline.html u vaš projekat. Унесите радњу сервера под називом ревалидатеПВА коју можете користити било где (АПИ руте, радње сервера, компоненте сервера - узмите свој избор). За пуну подршку Апп Рутеру и ССР / Едге-у, све сам умотао у функцију вишег реда: Један унос, један позив - урађено. withPWA Такође сам изградио синхронизацију таб. зато што корисници отворите своју апликацију у 3 картице и очекујте да ће их магично ажурирати у синхронизацији. + + догађаја . ће localStorage storage Резултат? Пакет који само функционише. Нема конфигурације црне магије. Нема преиспитивања кључних делова ваше апликације. Šta dobijate sa Следећи Чланак Пацк Следећи Чланак Пацк Када је инсталиран, добијате: Регистрација сервисног радника из кутије - без котла. Оффлине фалбацк са прилагодљивим оффлине.хтмл. Ауто-копиране датотеке које можете подесити (манифест, СВ, итд.). API контроле кеша - чист, ажурирај, онемогући, све програмски. Синхронизација између картица – нема сталног садржаја у подешавањима са више картица. Деве панел за стање ПВА у реалном времену током локалног развоја. Подршка за поновно валидацију на серверској страни преко акција сервера, АПИ рута или спољних интеграција вебхоок-а. Paket možete preuzeti ovde: https://github.com/dev-family/next-pwa-pack Шта се дешава када га инсталирате Инсталациони сценарио аутоматски копира PWA boilerplate у : /public sw.js – Ваш сервисни радник са кеш логиком. оффлине.хтмл – фалбацк страница за оффлине режим. 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.json Манифестација: Џон Након инсталације, не заборавите да прилагодите : /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>; } Ако желите да валидација ради са стране сервера, такође ћете морати да ажурирате свој средњи софтвер: // /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*"], }; Хоц опције: оригиналниMiddleware: ваш основни средњи програм (нпр. за i18n или auth). revalidationSecret: тајни токен за закључавање ревалидације кеша. sseEndpoint: SSE stream path (промена ако је у сукобу). webhookPath: Endpoint to hit за покретање освежавања кеша (користи ревалидатеПВА). Unutra u ПВП провајдер ПВП провајдер Тхе спојите гомилу ствари испод капуљаче - и такође можете одабрати компоненте: PWAProvider RegisterSW Аутоматски региструје радника услуге ( Управља грешкама грациозно. Можете преокренути пут ако је потребно: /sw.js <PWAProvider swPath="/custom/sw.js">{children}</PWAProvider> CacheCurrentPage Прихвата навигацију (укључујући прелазе у стилу СПА), кешира ХТМЛ текуће странице. SWRevalidateListener Satovi za localStorage događaja i pokreće cache osvežavanje preko kartica. SSERevalidateListener Слушај на сервер-послати догађаје из Када ваш бацкенд каже "ревалидујте ове УРЛ-ове", овај слушалац осигурава да клијенти то раде. sseEndpoint DevPWAStatus Dev-only panel možete da omogućite ovako: <PWAProvider devMode>{children}</PWAProvider> Представљања : Online / Offline статус Cache верзија Ажурирање доступности Алати са једним кликом: чисти кеш, не региструјте СВ, освежите, онемогућите / омогућите кеш Šta radnik zaista radi језгро Рукавице : sw.js ХТМЛ кеширање Странице кеширане са TTL (подразумевано: 10 мин — подесиво у sw.js) Automatski potvrđuje kada TTL istekne Оффлине пад ако ХТМЛ недостаје Статичка средства ЈС, ЦСС, слике су кеширане заувек Само кеширање добија захтеве Поруке подршке Подржава ове акције од стране клијента: ЦАЦХЕ_ЦУРРЕНТ_ХТМЛ Потврда_URL DISABLE_CACHE / ENABLE_CACHE - Преузмите Брод - чекање CLEAR_STATIC_CACHE Преузети Оффлине мода Служи оффлине.хтмл ако мрежа и кеш не успеју Pokušava da se osveži kada se vrati online Коришћење У средњим Изаберите Изаберите Ovo je mesto gde Доноси потврду кеша за ССР и Едге Миддлеваре - са подршком за ССЕ и све. next-pwa-pack export default withPWA(originalMiddleware, { revalidationSecret: process.env.REVALIDATION_SECRET!, sseEndpoint: "/api/pwa/cache-events", webhookPath: "/api/pwa/revalidate", }); Params: оригиналниMiddleware: ваша постојећа логика средњег програма (auth, i18n, итд.) revalidationSecret: tako da niko drugi ne može da poke vaš keš sseEndpoint: преврните ако нешто друго користи ову руту webhookPath: Користи се од стране сервера или спољних система за поновно валидацију одређених УРЛ-ова Случајеви реалног света Ажурирање кеша након промена података import { updateSWCache } from "next-pwa-pack"; // After creating a blog post: const handleCreatePost = async (data) => { await createPost(data); updateSWCache(["/blog", "/dashboard"]); }; Ажурирање кеша са сервера import { revalidatePWA } from "../actions"; await createPost(data); await revalidatePWA(["/my-page"]); Чишћење кеша на Логоуту import { clearAllCache } from "next-pwa-pack"; const handleLogout = async () => { await logout(); await clearAllCache(); router.push("/login"); }; Све клијентске кеш акције 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(); API Route za spoljne cache pokretače Ако желите да изазовете ажурирање кеша споља (на пример, из админ панела), ево АПИ руте коју можете користити: // 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"] } Дебаггирање & DevTools Evo šta možete da proverite prilikom debugiranja: Идите на DevTools → Application → Service Workers. Potvrdite da je radnik registrovan. Проверите кеш складиште → хтмл-цацхе-в2 да бисте видели да ли су странице кеширане. Симулирајте оффлине у Мрежи → Оффлине и поново учитајте. требало би да видите оффлине.хтмл. Console logs from the service worker help too: [PWA] Service Worker registered [SW] Cached: /about [SW] Revalidated and updated cache for: /blog Готхас & Нотес Nekoliko stvari koje treba da znate pre nego što krenete na brod: Bezbednost PWA zahteva HTTPS u proizvodnji. Само ГЕТ захтеви су кеширани. Ne skrivajte osetljive podatke. перформансе Пакет не додирује базу перформанси ваше апликације. То значајно побољшава поновљене оптерећења. Конфигурација TTL је постављен у sw.js (подразумевано: 10 минута). URL-ове можете искључити из кеширања преко CACHE_EXCLUDE. manifest.json мора бити прилагођен вашој апликацији. revalidatePWA акција је уређива - прилагодите га по потреби. withPWA и PWAProvider оба прихватају опције: export default function PWAProvider({ children, swPath, devMode = false, serverRevalidation = { enabled: true, sseEndpoint: "/api/pwa/cache-events" }, }: PWAProviderProps) { Šta je sledeće Napisano je za Trebalo bi da radi na takođe - samo nije opsežno testirano. next-pwa-pack Next.js 15 Next.js 13 App Router Планиране карактеристике : TTL конфигурисање преко опција (без уређивања sw.js) Push obaveštenja Контрола кеша заснована на обрасцу Метрике перформанси за ефикасност кеша To je to. Ако сте уморни да се ручно свађате са сервисним радницима, дајте Ви ћете ићи од нуле до пуне ПВА подршке у једној паузи за кафу. next-pwa-pack Питања, грешке или повратне информације? Отворите проблем или нас позовите. github.com/dev- породица/next-pwa-pack
