Сакам да создавам алатки кои не само што работат – тие Мојот тим е во прегратките на Next.js доволно долго за да знае што точно боли. Пакет за влез кој ја поврзува целосната поддршка за PWA во вашата Next.js апликација без да ви се извади косата. Излезете од вашиот пат next-pwa-pack The Backstory (ака: Зошто ја напишав оваа работа) Секој пат кога некој клиент споменува „ПВА поддршка“, се прегрнувам. Пробав постоечки библиотеки. Премногу магија. Тони на конфиг. Или само целосно некомпатибилни со - која, патем, ние целосно ги усвоивме. сакав: App Router Сервер-страна кеш ревалификација Интеграција на App Router. Лесна синхронизација помеѓу табовите. Чиста API за управување со кешот од позадината. Наместо тоа, завршив со пишување на сервисни работници со рака. Прилагодување на кеш TTLs. Се занимавам со логиката за ажурирање. Управување со непостојани клиенти. Рачно бришење кеши секој пат кога испраќаме. И дури и не ме стартувајте на корисниците кои не гледаат ажурирања додека не го освежат тешко. Ми требаше нешто мртво едноставно, предвидливо и тестирано во битка. Зградата Што влезе во него next-pwa-pack Следна СтатијаPw-Pack Чекор еден беше да се напише работник за минимална услуга: HTML кеширање со TTL. Се занимава со статички средства. Работи офлајн, како што треба вистински PWA. Потоа додадов систем за пораки, така што клиентот може да разговара со сервисниот работник - на пример, да прекине кеш или целосно да го оневозможи кеширањето. Потоа напишав неколку сценарија: Автоматско копирање на sw.js, manifest.json и offline.html во вашиот проект. Инјектирајте акција на серверот наречена revalidatePWA која можете да ја користите насекаде (API рути, серверски акции, компоненти на серверот – земете го вашиот избор). За целосна поддршка за App Router и SSR/Edge, сè го обвив во функција со повисок редослед: Еден увоз, еден повик – направено. withPWA Јас исто така изграден во таб синхронизација. бидејќи корисниците Отворете ја вашата апликација во 3 картички и очекувајте да ги ажурирате магично во синхронизација. + во на настаните. Ќе localStorage storage Резултатот? Пакет кој само работи. Нема конфигурирање на црна магија. Нема препишување на основните делови на вашата апликација. Што добивате со next-pwa-pack Следна СтатијаPw-Pack Откако ќе го инсталирате, ќе добиете: Сервисен работник регистрација надвор од кутијата - без котел. Офлајн фалбак со прилагодлив offline.html. Авто-копирани датотеки можете да ги прилагодите (манифест, SW, итн.). API за контрола на кешот – чиста, ажурирај, оневозможи, сето тоа програматски. Синхронизирање помеѓу картички – нема постојана содржина во поставувањата на повеќе картички. Панел за развој за PWA состојба во реално време за време на локалниот развој. Поддршка за повторна валидација од страна на серверот преку серверски акции, API рути или надворешни интеграции на веб-кук. Пакетот можете да го преземете тука: https://github.com/dev-family/next-pwa-pack Што се случува кога ќе го инсталирате Скриптот за инсталирање автоматски го копира PWA boilerplate во : /public sw.js – вашиот сервисен работник со кеш логика. offline.html – фалба страница за офлајн режим. 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 Конфигурирање на вашата Манифестација - Џон Манифестација - Џон По инсталацијата, не заборавајте да го прилагодите : /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*"], }; Опции за HOC: оригиналенMiddleware: вашиот основен среден софтвер (на пример, за i18n или auth). revalidationSecret: таен токен за да се заклучи повторно валидирање на кеш. sseEndpoint: SSE пат на протокот (промена ако е во конфликт). webhookPath: Endpoint to hit за активирање на освежување на кешот (користено од revalidatePWA). Во внатрешноста на PWAProvider PWAP провајдер на пакуваат куп работи под капакот - и можете да ги изберете компонентите исто така: PWAProvider RegisterSW Автоматски регистрира работникот на услугата ( Се справува со грешки грациозно. Можете да го надминете патот ако е потребно: /sw.js <PWAProvider swPath="/custom/sw.js">{children}</PWAProvider> CacheCurrentPage Презема навигација (вклучувајќи SPA-стил транзиции), кешира HTML на тековната страница. SWRevalidateListener Погледнете за localStorage настани и активира кеш освежување преку картички. SSERevalidateListener Слушнува на серверот-подадени настани од Кога вашиот backend вели "ревалидирајте ги овие URL адреси", овој слушател осигурува дека клиентите го прават тоа. sseEndpoint DevPWAStatus Dev-only панелот можете да го овозможите вака: <PWAProvider devMode>{children}</PWAProvider> Шоуто е: Онлајн / офлајн статус Прикриена верзија Ажурирање на достапноста Алатки со еден клик: Clear cache, unregister SW, refresh, disable/enable cache Што всушност прави службениот работник Јадрото Рацете се: sw.js HTML кеширање Страници кеширани со TTL (подрачливо: 10 минути - може да се прилагоди во sw.js) Автоматски потврдува кога TTL истекува Офлајн падот ако недостасува HTML Статички средства JS, CSS, слики се кеширани засекогаш Само кеширање добива барања Пораки за поддршка Поддржува овие активности од страна на клиентот: CACHE_CURRENT_HTML Запишување Забелешка_URL Дисплицирајте го / Enable_Cache Кораб - чекање CLEAR_STATIC_CACHE – Статичен кеш Офлајн мода Служи offline.html ако мрежата и кеширањето не успеат Се обидува да се освежи кога се врати онлајн Користење Во средниот дел Смртта Смртта Ова е местото каде Тоа носи кеш валидација на SSR и Edge Middleware - со поддршка за SSE и сè. 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: така што никој друг не може да го попречи вашиот кеш sseEndpoint: Превртете ако нешто друго го користи овој пат webhookPath: се користи од страна на серверот или надворешните системи за повторно валидирање на одредени URL адреси Реални случаи на употреба Ажурирање на кешот по промената на податоците 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"]); Чистење на кеш на Logout 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 рута за надворешни кеш тригери Ако сакате да активирате надворешно освежување на кешот (на пример, од админ панел), тука е 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"] } Дебагирање & DevTools Еве што можете да проверите за време на дебито: Одете на DevTools → Application → Service Workers. Потврдете дека работникот е регистриран. Проверете кеш складирање → html-cache-v2 за да видите дали страниците се кеширани. Симулирајте офлајн во Мрежата → Офлајн и преполнете. Console logs from the service worker help too: [PWA] Service Worker registered [SW] Cached: /about [SW] Revalidated and updated cache for: /blog Готша & Бележници Неколку работи кои треба да ги знаете пред да одите на брод: Безбедност PWA бара HTTPS во производството. Само GET барања се кешираат. Не кријте чувствителни податоци. перформанси Пакетот не ја допира базата за перформанси на вашата апликација. Тоа значително ги подобрува повторените оптоварувања. Конфигурирање 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) { Што е следно Напишано е за Треба да работи на исто така - само не се тестирани во голема мера. next-pwa-pack Next.js 15 Next.js 13 App Router Планирани карактеристики : TTL конфигурирање преку опции (без уредување sw.js) Притиснете известувања Контрола на кеш базирана на шаблон Метрики за перформанси за ефикасност на кеш Тоа е тоа. Ако сте уморни од ракометување на работниците на услугата, дајте Ќе одите од нула до целосна поддршка за PWA во една пауза за кафе. next-pwa-pack Прашања, грешки или повратни информации? Отворете проблем или допрете до нас. github.com/dev-фамилијата/next-pwa-pack
