Progressive Web App (PWA): sayt va ilova o'rtasidagi ko'prik

Telefoningizdagi ilovalarning ko'pi aslida oddiy veb-saytdan farq qilmaydi, faqat ular ekranda alohida belgi bo'lib turadi va internetsiz ham qisman ishlaydi. Progressive Web App (PWA) aynan shu chegarani yo'qotadigan texnologiya: u haqiqiy veb-sayt bo'la turib, mobil ilovaga o'xshab ishlaydi. Foydalanuvchi uni telefon ekraniga o'rnatadi, push bildirishnoma oladi va offline holatda ham sahifalarni ko'ra oladi. Veb dasturchi uchun bu eng arzon va eng tez yo'l bilan ilovaga xos tajribani yetkazish imkoniyatidir.

PWA nima va u nega muhim

PWA — bu zamonaviy veb standartlari (HTML, CSS, JavaScript) asosida qurilgan, lekin native ilovaga xos xususiyatlarni qo'shadigan sayt. Uning sehri uchta asosiy ustunda yashiringan: manifest fayli sayt qanday o'rnatilishi va qanday ko'rinishini belgilaydi, service worker tarmoq so'rovlarini ushlab offline ishlash va keshlashni ta'minlaydi, HTTPS esa butun tizimning xavfsiz ishlashiga kafolat beradi. Ushbu uchlik birga ishlaganda foydalanuvchi App Store yoki Play Marketga umuman kirmasdan turib ilovani o'rnata oladi.

Biznes nuqtai nazaridan PWA juda jozibali, chunki bitta kod bazasi bilan ham brauzer, ham "ilova" tajribasini berasiz. Sizga alohida iOS va Android jamoasi, alohida do'kon ro'yxatdan o'tishi yoki har bir yangilanish uchun moderatsiya kutish kerak emas. Saytni yangilasangiz, foydalanuvchi keyingi ochishida avtomatik yangi versiyani oladi. Bu vaqt va pul tejaydi, ayniqsa kichik va o'rta loyihalar uchun.

manifest.json — ilovaning pasporti

Web ilovangizni o'rnatiladigan qilish uchun birinchi qadam manifest faylini yaratishdir. Bu JSON fayl brauzerga ilova nomi, belgisi, rangi va qanday rejimda ochilishini aytadi. Uni HTML sahifaning bosh qismida link orqali ulaysiz va brauzer shu ma'lumotlar asosida "Ekranga qo'shish" taklifini ko'rsatadi.

{
  "name": "Mening Do'konim",
  "short_name": "Do'kon",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0d6efd",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Bu yerda display maydoni eng muhim: standalone qiymati ilova ochilganda brauzer manzil qatori ko'rinmasligini, ya'ni u haqiqiy ilovadek to'liq ekranda ochilishini ta'minlaydi. Belgilar uchun kamida 192 va 512 piksel o'lchamlarini berish tavsiya etiladi, chunki turli qurilmalar turli o'lchamlarni ishlatadi.

Service worker — offline ishlashning yuragi

Service worker — bu sahifadan alohida, fonda ishlaydigan JavaScript skript. U brauzer va tarmoq o'rtasida turadi va har bir so'rovni ushlab qolib, javobni keshdan berishi yoki tarmoqqa yo'naltirishi mumkin. Aynan shu mexanizm internet uzilganda ham saytingiz ishlashda davom etishini ta'minlaydi. Service workerni avval ro'yxatdan o'tkazasiz, keyin uning ichida keshlash strategiyasini yozasiz.

// app.js — service worker ro'yxatdan o'tkazish
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW registered', reg.scope))
      .catch(err => console.log('SW error', err));
  });
}

Skript ro'yxatdan o'tgach, sw.js faylida muhim sahifalarni keshga saqlaymiz va so'rovlarni ushlaymiz. Quyidagi misolda install bosqichida asosiy fayllar keshlanadi, fetch bosqichida esa avval keshdan, agar topilmasa tarmoqdan olinadi.

// sw.js
const CACHE = 'app-v1';
const ASSETS = ['/', '/index.html', '/styles.css', '/app.js'];

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(CACHE).then(c => c.addAll(ASSETS))
  );
});

self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(res => res || fetch(e.request))
  );
});

Bu strategiya "cache-first" deb ataladi: agar fayl keshda bo'lsa darhol undan beriladi, bu sahifani juda tez ochadi. Yangiroq ma'lumot kerak bo'lgan joylarda "network-first" yoki "stale-while-revalidate" kabi strategiyalarni qo'llash mumkin. Strategiyani sayt mazmuniga qarab tanlash dasturchining vazifasi.

Push bildirishnoma va o'rnatish

PWA foydalanuvchi bilan native ilovalardek aloqa qila oladi: push bildirishnoma yuborish orqali yangi xabar, chegirma yoki buyurtma holati haqida xabar berishingiz mumkin. Buning uchun foydalanuvchidan ruxsat so'raysiz va service worker orqali bildirishnomani ko'rsatasiz. O'rnatish jarayoni esa juda sodda — brauzer mos shartlar bajarilganda "Ekranga qo'shish" tugmasini avtomatik taklif qiladi yoki siz uni o'zingiz boshqarishingiz mumkin.

// O'rnatish taklifini boshqarish
let deferredPrompt;
window.addEventListener('beforeinstallprompt', e => {
  e.preventDefault();
  deferredPrompt = e;
  showInstallButton();
});

installBtn.addEventListener('click', async () => {
  deferredPrompt.prompt();
  const choice = await deferredPrompt.userChoice;
  console.log('Natija:', choice.outcome);
});

Cheklovlar va qachon native tanlash kerak

PWA hammasi uchun ideal yechim emas. iOS platformasida Apple PWA imkoniyatlarini cheklaydi: push bildirishnomalar uzoq vaqt qo'llab-quvvatlanmadi va hozir ham ba'zi cheklovlar bor, keshlash hajmi chegaralangan, ayrim qurilma datchiklariga to'liq kirish yo'q. Agar loyihangiz Bluetooth, ilg'or kamera funksiyalari, og'ir 3D grafika yoki tizimga chuqur integratsiya talab qilsa, native ilova baribir kuchliroq tanlov bo'lib qoladi.

Shunga qaramay, ko'pchilik biznes loyihalar — onlayn do'konlar, yangiliklar saytlari, xizmat ko'rsatish platformalari va ichki vositalar — uchun PWA mukammal muvozanat beradi. U arzon, tez ishga tushadi, bitta kod bilan barcha platformalarni qamrab oladi va do'kon moderatsiyasiga bog'liq emas. Loyihangizni boshlashda avval PWA sifatida qurishni ko'rib chiqing va faqat haqiqiy ehtiyoj bo'lganda nativega o'ting — bu ko'p hollarda eng oqilona strategiyadir.