PWA-ներ և service worker-ներ

01Գաղափարը՝ կայք, որն իրեն պահում է հավելվածի պես

PWA-ն նոր տեխնոլոգիա չէ, այլ բրաուզերի հնարավորությունների հավաքածու, որոնք օգտագործվում են միասին։ HTTPS-ով, վավեր manifest ունեցող կայքը կարելի է տեղադրել home screen-ին կամ desktop-ին, գործարկել առանձին պատուհանում՝ առանց բրաուզերի ինտերֆեյսի, և այն երևում է app switcher-ում։ Service worker-ն ավելացնում է offline աջակցություն, քեշավորման շնորհիվ ավելի արագ բեռնում և ընտրովի push ծանուցումներ ու ֆոնային առաջադրանքներ։ Service worker-ը պատկերացրեք որպես խելացի դռնապան. էջի յուրաքանչյուր հարցում անցնում է նրա միջով, և նա որոշում է՝ բերել ցանցից, պատասխանել իր քեշից, թե երկուսն էլ։ «Progressive» նշանակում է, որ այն նրբորեն է նահանջում. բրաուզերները, որոնք չեն աջակցում որևէ հնարավորություն, միևնույն է ստանում են սովորական կայք։

• Պահանջում է HTTPS (զարգացման համար localhost-ը թույլատրված է)։
• Manifest. ինքնությունն ու տեսքը տեղադրված վիճակում։
• Service worker. ցանցային proxy, քեշ և ֆոնային աշխատանք։

02Web app manifest-ը

Manifest-ը JSON ֆայլ է, որին հղում է անում էջը։ Հիմնական դաշտերն են. name և short_name (ցուցադրվում է պատկերակի տակ), start_url (որտեղ է բացվում հավելվածը), scope (որ URL-ներն են պատկանում հավելվածին), display (standalone՝ հավելվածի պատուհանի համար), theme_color և background_color (վերնագրի գոտի և splash screen) և icons։ Տրամադրեք առնվազն 192x192 և 512x512 PNG պատկերակներ։ Maskable պատկերակները, որոնք նշված են purpose «maskable»-ով, իրենց կարևոր բովանդակությունը պահում են կենտրոնական անվտանգ գոտում (լայնության 80%-ի շրջան), ուստի Android-ը կարող է դրանք կտրել շրջանի, squircle-ի կամ այլ ձևերի՝ առանց լոգոն կտրելու։ Ավելացրեք id, որպեսզի բրաուզերը կարողանա նույնականացնել հավելվածը, նույնիսկ եթե start_url-ը փոխվի, իսկ screenshots-ը և description-ը՝ ավելի հարուստ տեղադրման պատուհանի համար։

1{
2  "id": "/",
3  "name": "Example Portfolio",
4  "short_name": "Portfolio",
5  "start_url": "/?source=pwa",
6  "scope": "/",
7  "display": "standalone",
8  "theme_color": "#0f172a",
9  "background_color": "#0f172a",
10  "icons": [
11    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
12    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
13    { "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
14  ]
15}

03Service worker-ի կյանքի ցիկլը

Service worker-ը JavaScript ֆայլ է, որն աշխատում է իր սեփական thread-ում, առանց DOM-ի հասանելիության, և կարող է ապրել էջից ավելի երկար։ Էջը գրանցում է այն. բրաուզերը ներբեռնում է այն և արձակում install, որտեղ սովորաբար pre-cache եք անում offline էջը և հիմնական ռեսուրսները։ Հետո այն սպասում է, մինչև ոչ մի բաց tab չօգտագործի հին worker-ը, և արձակում activate, որտեղ ջնջում եք հին քեշերը։ Այդ պահից այն ստանում է fetch իրադարձություններ իր scope-ի ներսում յուրաքանչյուր հարցման համար։ Երբ deploy եք անում փոխված worker ֆայլ, բրաուզերը հայտնաբերում է բայթային տարբերությունը, տեղադրում նոր տարբերակը և պահում այն սպասման մեջ, մինչև հին tab-երը փակվեն։ skipWaiting()-ը և clients.claim()-ը ստիպում են նոր տարբերակին անմիջապես ստանձնել կառավարումը, ինչը հարմար է, բայց կարող է հին էջերը խառնել նոր քեշավորված ռեսուրսների հետ, ուստի օգտագործեք դրանք գիտակցաբար։

1// In the page (only in production builds)
2if ("serviceWorker" in navigator) {
3  window.addEventListener("load", () => {
4    navigator.serviceWorker.register("/sw.js", { scope: "/" })
5      .catch((err) => console.error("SW registration failed", err));
6  });
7}

04Քեշավորման ռազմավարություններ

fetch handler-ի ներսում յուրաքանչյուր տեսակի հարցման համար ընտրում եք ռազմավարություն։ Cache-first-ը մատուցում է քեշից և ցանց է գնում միայն բացակայության դեպքում. իդեալական է fingerprint արված ստատիկ ռեսուրսների (app.3f9a.js) և երբեք չփոխվող font-երի համար։ Network-first-ը փորձում է ցանցը և offline վիճակում վերադառնում քեշին. իդեալական է HTML էջերի և API տվյալների համար, որոնք պետք է թարմ լինեն։ Stale-while-revalidate-ը ակնթարթորեն պատասխանում է քեշից և ֆոնում թարմացնում քեշը. լավ է avatar-ների և ոչ կրիտիկական տվյալների համար։ Network-only-ն այն բաների համար է, որոնք երբեք չպետք է քեշավորվեն, ինչպես authenticated մուտացիաները և վճարումները։ Բովանդակային կայքերի համար տարածված, անվտանգ լռելյայն տարբերակը network-first-ն է navigation-ների համար՝ offline fallback էջով, և cache-first-ը՝ hash արված ստատիկ ֆայլերի համար։

• Cache-first. hash արված JS/CSS, font-եր, պատկերակներ։
• Network-first. HTML navigation-ներ, թարմ API ընթերցումներ։
• Stale-while-revalidate. նկարներ, ոչ կրիտիկական JSON։
• Network-only. POST հարցումներ, auth, checkout։

05Network-first service worker offline էջով

Այս ձեռքով գրված worker-ը install-ի ժամանակ pre-cache է անում offline էջը, activate-ի ժամանակ հեռացնում հին քեշերը և էջերի navigation-ները մշակում network-first. փորձում է ցանցը, պահում հաջողված էջերի պատճենը և ցանցի ձախողման դեպքում վերադառնում քեշավորված էջին կամ offline էջին։ Ոչ GET հարցումները և այլ origin-ները մնում են անձեռնմխելի։ Բարձրացրեք քեշի տարբերակը, երբ offline էջը կամ հիմնական ֆայլերը փոխվում են։

1const CACHE = "site-v3";
2const OFFLINE_URL = "/offline";
3 
4self.addEventListener("install", (e) => {
5  e.waitUntil(caches.open(CACHE).then((c) => c.addAll([OFFLINE_URL, "/icons/icon-192.png"])));
6});
7self.addEventListener("activate", (e) => {
8  e.waitUntil(caches.keys().then((keys) =>
9    Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))));
10});
11self.addEventListener("fetch", (e) => {
12  const req = e.request;
13  if (req.method !== "GET" || new URL(req.url).origin !== location.origin) return;
14  if (req.mode !== "navigate") return;
15  e.respondWith(fetch(req).then((res) => {
16    const copy = res.clone();
17    if (res.ok) caches.open(CACHE).then((c) => c.put(req, copy));
18    return res;
19  }).catch(async () => (await caches.match(req)) || caches.match(OFFLINE_URL)));
20});

06PWA-ներ Next.js-ում

Next.js App Router-ը manifest-ի համար ունի առաջնակարգ աջակցություն. app/manifest.ts ֆայլը, որը վերադարձնում է MetadataRoute.Manifest օբյեկտ, մատուցվում է որպես /manifest.webmanifest և հղվում ավտոմատ։ Theme color-ը գնում է viewport export-ի մեջ։ Service worker-ը ստատիկ ֆայլ է public/sw.js-ում, որը մատուցվում է կայքի արմատից, որպեսզի նրա scope-ը ընդգրկի ամբողջ հավելվածը, և գրանցվում է փոքր client կոմպոնենտից։ Ավելացրեք offline route (app/offline/page.tsx), որը կախված չէ տվյալներից, որպեսզի այն կարելի լինի pre-cache անել։ sw.js-ը մատուցեք Cache-Control: no-cache-ով, որպեսզի բրաուզերները արագ ստուգեն թարմացումները. Next.js-ի փաստաթղթերը սա ցույց են տալիս next.config-ի headers()-ի միջոցով։ Ավելի մեծ հավելվածների համար Serwist-ը (next-pwa-ի սպասարկվող հաջորդը, կառուցված Workbox-ի գաղափարների վրա) build-ից գեներացնում է precache manifest-ներ։

1// app/manifest.ts
2import type { MetadataRoute } from "next";
3 
4export default function manifest(): MetadataRoute.Manifest {
5  return {
6    name: "Example Portfolio",
7    short_name: "Portfolio",
8    start_url: "/",
9    display: "standalone",
10    background_color: "#0f172a",
11    theme_color: "#0f172a",
12    icons: [
13      { src: "/icons/icon-192.png", sizes: "192x192", type: "image/png" },
14      { src: "/icons/icon-512.png", sizes: "512x512", type: "image/png" },
15      { src: "/icons/maskable-512.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
16    ],
17  };
18}

07Տեղադրում, push և պլատֆորմների տարբերություններ

Chromium բրաուզերները (Chrome, Edge, Samsung Internet) ցույց են տալիս տեղադրման առաջարկ կամ մենյուի կետ, երբ կայքը HTTPS-ով է և ունի manifest name-ով, icons-ով, start_url-ով և համապատասխան display ռեժիմով. կարող եք բռնել beforeinstallprompt իրադարձությունը՝ ձեր սեփական տեղադրման կոճակը ցույց տալու համար։ Safari-ն iOS-ում և iPadOS-ում տեղադրում է Share, ապա Add to Home Screen ճանապարհով, և iOS 16.4-ից ի վեր տեղադրված վեբ հավելվածները կարող են ստանալ Web Push։ Safari-ն macOS-ում աջակցում է Add to Dock։ Push-ին պետք է service worker, օգտատիրոջ թույլտվություն՝ խնդրված օգտատիրոջ գործողությունից հետո, VAPID key-եր և սերվեր, որն ուղարկում է հաղորդագրությունները։ Background Sync-ը և Periodic Background Sync-ը միայն Chromium-ում են, ուստի դրանց վերաբերվեք որպես բարելավումների։ Firefox desktop-ը native կերպով PWA-ներ չի տեղադրում։ Թեստավորեք բոլոր թիրախային պլատֆորմներում։

08Scope, navigation preload և արտադրողականություն

Service worker-ը կառավարում է իր scope-ի ներսում գտնվող էջերը, որը լռելյայն այն թղթապանակն է, որտեղից այն մատուցվում է. ահա թե ինչու sw.js-ն ապրում է արմատում։ Էջը կառավարվում է միայն worker-ի ակտիվացումից հետո, ուստի ամենաառաջին այցելությունը երբեք չի ընդհատվում, եթե չկանչեք clients.claim()։ Network-first-ի թաքնված ծախսերից մեկը գործարկումն է. երբ worker-ը պարապ է, բրաուզերը պետք է այն boot անի՝ նախքան հարցումը կարող է դուրս գալ, ինչը ավելացնում է տասնյակ միլիվայրկյաններ։ Navigation preload-ը լուծում է սա. բրաուզերը navigation հարցումը սկսում է worker-ի boot-ին զուգահեռ, իսկ fetch handler-ն օգտագործում է event.preloadResponse։ fetch handler-ը պահեք արագ և խուսափեք դատարկ fetch listener-ից, որը overhead է ավելացնում առանց օգուտի։

1self.addEventListener("activate", (e) => {
2  e.waitUntil(self.registration.navigationPreload?.enable());
3});
4 
5self.addEventListener("fetch", (e) => {
6  if (e.request.mode !== "navigate") return;
7  e.respondWith((async () => {
8    try {
9      return (await e.preloadResponse) || (await fetch(e.request));
10    } catch {
11      return (await caches.match(e.request)) || caches.match("/offline");
12    }
13  })());
14});

09Թարմացման անվտանգ հոսքեր

Թարմացման ամենաանվտանգ pattern-ն է. նոր worker-ը տեղադրվում է և սպասում, էջը լսում է սպասող worker-ին և ցույց տալիս «հասանելի է նոր տարբերակ» banner, երբ օգտատերը համաձայնում է, էջն ուղարկում է հաղորդագրություն, worker-ը կանչում է skipWaiting(), և էջը վերաբեռնվում է controllerchange-ի ժամանակ։ Սա խուսափում է իրավիճակից, երբ աշխատող էջին հանկարծ սպասարկում է worker, որի քեշը պահում է ռեսուրսների տարբեր տարբերակներ։ Network-first HTML-ով և hash արված ռեսուրսներով բովանդակային կայքի համար ավտոմատ skipWaiting-ը սովորաբար նորմալ է, որովհետև հին ռեսուրսները session-ի ընթացքում չեն ջնջվում, եթե նախորդ քեշը որոշ ժամանակ պահեք։ Միշտ ներառեք kill switch. worker deploy անելը, որն ինքն իրեն ապագրանցում է և մաքրում քեշերը, արտակարգ վերականգնումն է, եթե վատ worker է թողարկվել։

1// Emergency "kill switch" sw.js
2self.addEventListener("install", () => self.skipWaiting());
3self.addEventListener("activate", (e) => {
4  e.waitUntil((async () => {
5    for (const key of await caches.keys()) await caches.delete(key);
6    await self.registration.unregister();
7    for (const c of await self.clients.matchAll()) c.navigate(c.url);
8  })());
9});

10Պահոցի սահմաններ, eviction և offline տվյալներ

Cache API-ն, IndexedDB-ն և origin-ի մյուս պահոցները կիսում են բրաուզերի կառավարած քվոտա. Chromium-ը origin-ին թույլ է տալիս մինչև ազատ սկավառակի մեծ մասը, Safari-ն ավելի խիստ է և կարող է ջնջել այն կայքերի պահոցը, որոնք որոշ ժամանակ չեն օգտագործվել։ Լռելյայն պահոցը «best effort» է և կարող է մաքրվել ճնշման տակ. navigator.storage.persist()-ը խնդրում է մշտական պահոց, որը բրաուզերները տրամադրում են ըստ ներգրավվածության կամ տեղադրման։ Օգտագործումը ստուգեք navigator.storage.estimate()-ով։ Քեշավորված պատասխաններից դուրս offline տվյալների համար, ինչպես սևագրերը կամ հերթագրված ձևերի ուղարկումները, օգտագործեք IndexedDB (idb-ի նման փոքր wrapper-ով) և հերթագրված հարցումները նորից ուղարկեք կապի վերականգնման ժամանակ՝ Chromium-ում Background Sync-ով, իսկ այլուր՝ online իրադարձության fallback-ով։ Նախագծեք կոնֆլիկտների համար. հերթագրված գրառումները կարող են հնացած լինել, մինչև հասնեն սերվերին։

11Անվտանգության և գաղտնիության թակարդներ

Service worker-ները հզոր են, ուստի բրաուզերները պահանջում են HTTPS և նույն origin-ի script-եր։ Հիմնական ռիսկերը ինքնահասցված են։ Միայն URL-ով key արված պատասխանների քեշավորումը կարող է պահել մի օգտատիրոջ անհատականացված էջը և ցույց տալ այն հաջորդ օգտատիրոջը ընդհանուր սարքի վրա. երբեք մի քեշավորեք authenticated HTML կամ API պատասխաններ ընդհանուր քեշում և logout-ի ժամանակ մաքրեք քեշերը։ Cross-origin opaque պատասխանները (no-cors) ծանր են հաշվվում քվոտայի դեմ և չեն կարող ստուգվել սխալների համար, ուստի խուսափեք դրանք քեշավորելուց։ XSS բագը, որը կարող է worker գրանցել, կպահպանի հարձակվողի կոդը, ուստի օգնում են խիստ Content Security Policy-ն և worker-src դիրեկտիվը։ Վերջապես, կոտրված worker-ը կարող է օգտատերերին զրկել թարմացումներից, ահա թե ինչու են կարևոր sw.js-ի կարճ HTTP քեշավորումը և kill switch-ը։