PWA: Progressive Web App, Service Worker va manifest asoslari

Progressive Web App nima

Progressive Web App (PWA) — bu veb va native ilovalarning eng yaxshi sifatlarini birlashtirgan veb ilova ishlab chiqish yondashuvidir. Bu atama 2015 yilda Franchesko Berriman (Francesco Berriman) tomonidan kiritilgan va Google PWA ni oddiy mobil ilovalarga o‘rinbosar sifatida faol targ‘ib qiladi. Asosiy g‘oya: veb sayt brauzer va qurilma imkoniyatlariga qarab asta-sekin yaxshilanadi. Agar brauzer Service Worker ni qo‘llab-quvvatlasa — oflayn rejim ulanadi. Agar manifestni qo‘llab-quvvatlasa — «O‘rnatish» tugmasi paydo bo‘ladi. Agar bildirishnomalar API si mavjud bo‘lsa — ilova push yuborishi mumkin. Zaif qurilmadagi sekin internetli foydalanuvchi saytning asosiy versiyasini oladi, zamonaviy smartfonda esa — ish stolida ikonkasi bo‘lgan to‘liq huquqli ilovani oladi.

PWA ilovalar do‘koni orqali o‘rnatishni talab qilmaydi. Havola yetarli. Bu mobil ilovalarning asosiy muammosini — yuqori kirish chegarasini hal qiladi. Foydalanuvchi Google Play yoki App Store ga bormaydi, 100 MB yuklab olinishini kutmaydi, o‘nlab ruxsatlar bermaydi. U shunchaki saytni ochadi va brauzer ilovani o‘rnatishni taklif qiladi. Agar foydalanuvchi rad etsa — u baribir saytdan foydalanadi. Agar rozi bo‘lsa — ikonka bosh ekranda paydo bo‘ladi va ilova native kabi ochiladi: brauzer manzil satrisiz, to‘liq ekran rejimida va tez ishga tushish bilan.

Texnik jihatdan PWA uchta mezonga javob berishi kerak: HTTPS (xavfsiz ulanish) orqali ishlashi, Service Worker (fon ishlov berish skripti) va manifest (Web App Manifest) ga ega bo‘lishi. Ushbu uch komponent oddiy saytni o‘rnatiladigan ilovaga aylantiradi.

Service Worker: PWA yuragi

Service Worker — bu brauzer veb sahifadan mustaqil ravishda alohida oqimda ishga tushiradigan JavaScript skriptidir. U DOM ga kirish huquqiga ega emas, interfeys bilan bevosita aloqa qila olmaydi, lekin tarmoq so‘rovlarini tutib olishi va o‘zgartirishi, keshnii boshqarishi, push bildirishnomalarini qayta ishlashi va fon sinxronizatsiyasini amalga oshirishi mumkin. Service Worker brauzer va tarmoq o‘rtasida proksi-server sifatida ishlaydi: sahifadagi har bir so‘rov Service Worker orqali o‘tadi, u — ma’lumotni keshdan qaytarish, serverdan so‘rash yoki ikkalasini ham qilish to‘g‘risida qaror qabul qiladi.

Service Worker ochiq sahifaga bog‘liq bo‘lmagan o‘z hayot sikli bo‘yicha yashaydi. U o‘rnatiladi, faollashtiriladi va saytning barcha varaqlari yopilgandan keyin ham fonda ishlaydi. Bu PWA ga push bildirishnomalarini qabul qilish va keshnii fonda, foydalanuvchi ishtirokisiz yangilash imkonini beradi.

Service Worker hayot sikli

Service Worker to‘rt bosqichdan o‘tadi: ro‘yxatdan o‘tish, o‘rnatish, faollashtirish va bo‘sh turish/tugatish.

Ro‘yxatdan o‘tish. Brauzer Service Worker JS fayliga havola oladi va yuklab olishni boshlaydi. Ro‘yxatdan o‘tish sahifadagi oddiy JavaScript dan amalga oshiriladi:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('SW ro‘yxatdan o‘tdi:', registration.scope);
    })
    .catch(error => {
      console.log('SW ro‘yxatdan o‘tish muvaffaqiyatsiz:', error);
    });
}

O‘rnatish. Muvaffaqiyatli yuklab olishdan so‘ng brauzer install hodisasini ishga tushiradi. Ushbu bosqichda asosiy resurslarni (HTML ramka, CSS, asosiy rasmlar) keshlashtirish odat tusiga kiradi, shunda ilova oflayn ishlashi mumkin. O‘rnatish muvaffaqiyatli bo‘lsa, Service Worker keyingi bosqichga o‘tadi. Agar skript xato bersa — o‘rnatish bekor qilinadi va eski Service Worker ishlashda davom etadi.

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('pwa-cache-v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles/main.css',
        '/scripts/app.js',
        '/images/logo.png'
      ]);
    })
  );
});

Faollashtirish. Saytning barcha varaqlari yopilganda, eski Service Worker tugaydi va yangisi faollashadi. activate hodisasi eski keshlarni tozalash va ma’lumotlar migratsiyasi uchun ishlatiladi:

self.addEventListener('activate', event => {
  const cacheWhitelist = ['pwa-cache-v2'];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Bo‘sh turish. Faollashtirilgan Service Worker so‘rovlarni tutib oladi va hodisalarni qayta ishlaydi. Resurslarni tejash uchun brauzer tomonidan to‘xtatilishi va keyingi so‘rovda qayta ishga tushirilishi mumkin. Service Worker hodisalarga yo‘naltirilgan: u faqat hodisalarni qayta ishlaganda yashaydi.

Keshlashtirish strategiyalari

Service Worker bir nechta keshlashtirish strategiyalarini qo‘llab-quvvatlaydi. Tanlov resurs turiga va ma’lumotlarning dolzarbligiga bo‘lgan talablarga bog‘liq.

Cache First (avval kesh). Avval kesh tekshiriladi. Resurs topilsa — keshdan qaytariladi. Yo‘q bo‘lsa — so‘rov serverga ketadi, javob keshdda saqlanadi. Strategiya statik resurslar uchun mos: rasmlar, shriftlar, CSS, JS. Maksimal tezlik va to‘liq oflayn ishlashni ta’minlaydi.

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request).then(fetchResponse => {
        return caches.open('pwa-cache-v1').then(cache => {
          cache.put(event.request, fetchResponse.clone());
          return fetchResponse;
        });
      });
    })
  );
});

Network First (avval tarmoq). So‘rov avval serverga ketadi. Server javob bersa — ma’lumot foydalanuvchiga qaytariladi va keshdda saqlanadi. Server mavjud bo‘lmasa — keshlashtirilgan nusxa qaytariladi. Strategiya API so‘rovlari, yangiliklar, dolzarb bo‘lishi kerak bo‘lgan, lekin oflayn ham ishlay oladigan tarkib uchun mos.

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request).then(response => {
      return caches.open('pwa-dynamic-v1').then(cache => {
        cache.put(event.request, response.clone());
        return response;
      });
    }).catch(() => {
      return caches.match(event.request);
    })
  );
});

Stale While Revalidate (yangilanish bilan eski). Javob darhol keshdan qaytariladi, fonda esa keshnii yangilash uchun serverga so‘rov yuboriladi. Foydalanuvchi tarkibni darhol ko‘radi, keyingi so‘rov esa yangi ma’lumotlarni oladi. O‘zgaradigan, lekin foydalanuvchi bir necha daqiqa eski versiyani ko‘rishi muhim bo‘lmagan tarkib uchun ideal.

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      const fetchPromise = fetch(event.request).then(response => {
        return caches.open('pwa-dynamic-v1').then(cache => {
          cache.put(event.request, response.clone());
          return response;
        });
      });
      return cached || fetchPromise;
    })
  );
});

Web App Manifest: ilova qurilmada qanday ko‘rinadi

Manifest — bu odatda manifest.json bo‘lgan, HTML sahifasining head qismida <link> tegi orqali ulanadigan JSON faylidir. U brauzerga ilova qurilmaga o‘rnatilganda qanday ko‘rsatilishi kerakligini bildiradi: nom, turli o‘lchamdagi ikonkalar, fon rangi, mavzu rangi, orientatsiya va ko‘rsatish rejimi (brauzer, minimal UI, to‘liq ekran).

{
  "name": "PWA Demo App",
  "short_name": "PWA Demo",
  "description": "Namoyish PWA ilovasi",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3f51b5",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

display parametri ilova o‘rnatishdan keyin qanday ko‘rinishini belgilaydi. standalone brauzer manzil satrini va navigatsiya panelini yashiradi — ilova native ko‘rinadi. fullscreen hech qanday brauzer elementlarisiz butun ekrandan foydalanadi. minimal-ui brauzerning minimal elementlarini (orqaga va yangilash tugmalari) qoldiradi.

Ikonkalar kamida ikki o‘lchamda tayyorlanishi kerak: 192x192 va 512x512 piksel. purpose parametri qo‘llab-quvvatlanishi bilan PNG formati (masalan, maskable) brauzerga ikonkani qurilma qobig‘i shakliga moslashtirishga imkon beradi — Android da ikonka yumaloq kvadratga kesilishi mumkin. Manifest ulangandan so‘ng Android da Chrome brauzeri shartlar bajarilganda «Bosh ekranga qo‘shish» bannerini ko‘rsatishni boshlaydi: HTTPS, ro‘yxatdan o‘tgan Service Worker, to‘g‘ri manifest va 5 daqiqa interval bilan kamida ikki tashrif.

PWA da push bildirishnomalari

PWA native ilova kabi push bildirishnomalarini yuborishi mumkin. Buning uchun ikkita API dan foydalaniladi: Push API (server yuborishi) va Notification API (qurilmada ko‘rsatish). Service Worker ilova ochiq bo‘lmasa ham push hodisasini oladi va sarlavha, matn va ikonka bilan bildirishnoma ko‘rsatishi mumkin.

Push bildirishnomalarini olish uchun foydalanuvchi ruxsat berishi kerak:

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    console.log('Push ruxsat etildi');
  }
});

Service Worker push hodisasiga obuna bo‘ladi va bildirishnomani ko‘rsatadi:

self.addEventListener('push', event => {
  const data = event.data.json();
  self.registration.showNotification(data.title, {
    body: data.body,
    icon: '/icons/icon-192x192.png',
    badge: '/icons/badge-72x72.png',
    actions: [
      { action: 'open', title: 'Ochish' },
      { action: 'close', title: 'Yopish' }
    ]
  });
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  if (event.action === 'open') {
    clients.openWindow('/');
  }
});

Serverdan push yuborish uchun Web Push (VAPID) protokoli ishlatiladi. Server xabarni shifrlaydi va brauzer push xizmati (Chrome uchun Firebase Cloud Messaging, Firefox uchun Mozilla Autopush) orqali yuboradi. Foydalanuvchi obunasi (PushSubscription obyekti) ro‘yxatdan o‘tishda serverda saqlanishi kerak.

Samaradorlik va Lighthouse

PWA tez bo‘lishi kerak. Google Lighthouse — PWA ni tekshirish ro‘yxati bo‘yicha tekshiradigan audit vositasidir: Service Worker ro‘yxatdan o‘tishi, oflayn kirishda 200 javobi, to‘g‘ri manifest, HTTPS, to‘g‘ri ikonka o‘lchami, sekin tarmoqlarda tez yuklash. PWA uchun minimal o‘tish bali Lighthouse shkalasi bo‘yicha 100 dan 80. Bali 80 dan past bo‘lgan ilovalar Chrome da o‘rnatish bannerini olmaydi.

PWA uchun asosiy samaradorlik metrikalari — First Contentful Paint (FCP) 1.8 soniyagacha, Largest Contentful Paint (LCP) 2.5 soniyagacha, Time to Interactive (TTI) 3.5 soniyagacha. Service Worker o‘rnatish vaqtida kritik HTML va CSS ni keshlasa, FCP va LCP ni sezilarli darajada yaxshilashi mumkin. Statika uchun Cache First va API uchun Stale While Revalidate strategiyasi eng yaxshi foydalanuvchi tajribasini beradi.

Oflayn kirish va fon sinxronizatsiyasi

PWA ning asosiy imkoniyatlaridan biri — internetsiz ishlash. Service Worker so‘rovlarni tutib oladi va sahifalarning keshlashtirilgan versiyalarini qaytaradi. Foydalanuvchi keshdda bo‘lmagan sahifani ochishga urinsa, maxsus zaxira sahifasi ko‘rsatilishi mumkin:

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    }).catch(() => {
      return caches.match('/offline.html');
    })
  );
});

Fon sinxronizatsiyasi (Background Sync) qurilma oflayn bo‘lganda ma’lumotlarni serverga yuborishni kechiktirishga imkon beradi. Service Worker so‘rovni saqlaydi va ulanish tiklanganda avtomatik yuboradi:

self.addEventListener('sync', event => {
  if (event.tag === 'sync-messages') {
    event.waitUntil(sendMessages());
  }
});

function sendMessages() {
  return caches.open('pwa-pending-v1').then(cache => {
    return cache.keys().then(requests => {
      return Promise.all(requests.map(request => {
        return fetch(request).then(() => cache.delete(request));
      }));
    });
  });
}

PWA ishlab chiqish uchun vositalar

Chrome DevTools, Service Worker ni tuzatish (ro‘yxatdan o‘tish, holat, kesh, push), manifestni tekshirish, keshnii tozalash va test uchun o‘z push bildirishnomalarini yaratish mumkin bo‘lgan Application panelini taqdim etadi. Oflayn rejim emulyatsiyasi bilan Network varag‘i kesh ishini tekshirishga yordam beradi. Audits panelidagi Lighthouse tavsiyalar bilan to‘liq PWA auditini beradi.

Workbox — Service Worker yaratishni soddalashtiradigan Google kutubxonasi. Keshlashtirish strategiyalarini qo‘lda yozish o‘rniga, Workbox tayyor modullarni taklif qiladi:

import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

precacheAndRoute(self.__WB_MANIFEST);

registerRoute(
  /\.(?:png|jpg|jpeg|svg|gif)$/,
  new StaleWhileRevalidate()
);

Workbox birlashtiruvchilar (Webpack, Vite) bilan integratsiyalanadi va avtomatik ravishda dastlabki keshlashtirish manifestini yaratadi. Microsoft dan PWA Builder (pwabuilder.com) barcha PWA fayllarini onlayn yaratadi: Service Worker, manifest, ikonkalar, HTML shabloni.