PWA va offline ishlash

Progressive Web App — web texnologiyalarida qurilgan, ammo mos qurilmada o’rnatish, alohida oynada ochish va ayrim holatda offline ishlash kabi ilovaga xos imkoniyatlardan foydalanadigan sayt yoki web ilova.

PWA alohida framework emas va mavjud saytni avtomatik yaxshi ilovaga aylantiradigan bitta tugma ham emas. U xavfsiz, responsive va ishonchli web tajribasiga qo’shiladigan imkoniyatlar to’plamidir.

PWA ning asosiy qismlari

Web app manifest

Manifest JSON fayli ilovaning nomi, ikonkalari, boshlang’ich manzili, ranglari va qanday oynada ochilishini brauzerga bildiradi.

{
  "name": "Vazifalar",
  "short_name": "Vazifa",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#4f46e5",
  "icons": []
}

Manifest o’rnatish tajribasini tavsiflaydi, lekin offline ishlashni o’zi ta’minlamaydi.

Bir necha maydonga alohida e’tibor bering. display qiymati standalone bo’lsa, ilova brauzer manzil qatorisiz alohida oynada ochiladi — bu haqiqiy ilova taassurotini beradi, lekin foydalanuvchi manzilni ko’rmasligini ham anglatadi. start_url esa ilova ochilganda qaysi sahifadan boshlanishini belgilaydi; bosh sahifa har doim ham eng mos tanlov emas — kundalik ishlatiladigan ekran foydaliroq bo’lishi mumkin.

Ikonkalar bir nechta o’lchamda kerak, chunki turli qurilma turlicha talab qiladi. Kamida 192×192 va 512×512 bo’lsin. Ular yetishmasa, brauzer o’rnatish taklifini umuman ko’rsatmasligi mumkin.

Service worker

Service worker sahifadan alohida ishlaydigan script bo’lib, mos tarmoq so’rovlarini ushlashi, cache’dan javob berishi va ayrim fon hodisalarini boshqarishi mumkin. U DOMga to’g’ridan-to’g’ri kira olmaydi.

Service worker kuchli imkoniyatga ega bo’lgani uchun production’da HTTPS talab qilinadi. Lokal ishlab chiqishda localhost uchun istisno mavjud.

Uning hayot sikli uchta bosqichdan iborat va buni tushunish keyingi muammolarning ko’pini oldini oladi:

Bosqich	Nima sodir bo’ladi
install	Ro’yxatdan o’tadi va kerakli fayllarni cache’ga yig’adi
activate	Eski cache tozalanadi, yangi versiya nazoratni oladi
fetch	Har tarmoq so’rovini ushlab, javob manbasini tanlaydi

Eng chalkash joyi shundaki, yangi service worker darhol ishga tushmaydi. U o’rnatiladi, lekin eski versiya barcha oynalar yopilguncha nazoratni saqlaydi. Shu sababli kod o’zgartirilgach ham eski xatti-harakat davom etishi mumkin — DevTools Application → Service Workers bo’limidagi “Update on reload” sozlamasi ishlab chiqish paytida vaqtni tejaydi.

Nima cache qilinadi

Barcha narsani cache qilish kerak emas va mumkin ham emas. Brauzer ajratadigan joy cheklangan va qurilma xotirasi kamayganda cache o’chirilishi mumkin.

Amaliy mezon: ilova qobig’ini (HTML tuzilma, CSS, asosiy JavaScript, logotip, shriftlar) cache’ga oling — ular kam o’zgaradi va sahifa tez ochilishini ta’minlaydi. Foydalanuvchining haqiqiy ma’lumoti esa alohida boshqariladi: uni cache’da saqlash mumkin, lekin qancha muddat va qanday yangilanishi aniq belgilanadi.

Maxfiy ma’lumotni cache’ga olishda ehtiyot bo’ling. Umumiy qurilmada boshqa odam brauzerni ochsa, cache’dagi sahifani ko’rishi mumkin. Logout paytida foydalanuvchiga tegishli cache tozalanishi kerak.

Cache strategiyalari

Har resursga bitta cache usuli mos kelmaydi:

• cache first — avval cache, topilmasa tarmoq; o’zgarmaydigan ikonka va versiyalangan statik fayl uchun qulay;
• network first — avval tarmoq, ishlamasa cache; yangilik yoki profil kabi yangi ma’lumot muhim bo’lganda;
• stale while revalidate — cache’dagi javobni tez beradi, fonda yangisini olib keyingi safar uchun saqlaydi;
• network only — to’lov kabi cache qilinmasligi kerak bo’lgan so’rov;
• cache only — build vaqtida to’liq tayyorlangan, qat’iy lokal resurs.

O’rnatish va offline tajriba

Imkoniyatni bosqichma-bosqich oshirish

PWAning “progressive” qismi muhim: asosiy vazifa oddiy brauzer va tarmoqda ham ishlaydi, qo’llab-quvvatlanadigan qurilmada esa qo’shimcha imkoniyatlar paydo bo’ladi. O’rnatish tugmasi mavjud bo’lmasa ham sayt foydasiz bo’lib qolmasligi kerak.

Push notification, kamera, lokatsiya va fon sinxronlash foydalanuvchi roziligi, brauzer va operatsion tizimga bog’liq. Ruxsatni sahifa ochilishi bilan emas, foydalanuvchi imkoniyatni nima uchun kerakligini tushungan paytda so’rash yaxshi.

Offline holatda amal bajarish

Offline’da o’qish nisbatan oson — cache’dagi nusxa ko’rsatiladi. Yozish esa qiyinroq: foydalanuvchi vazifa qo’shdi, lekin tarmoq yo’q. Nima qilish kerak?

Ikki yo’l bor. Sodda yo’l — amalni rad etib, tushunarli xabar berish: “Internet aloqasi yo’q, keyinroq urinib ko’ring”. Bu halol va chalkashlik tug’dirmaydi.

Murakkabroq yo’l — amalni navbatga olish: uni qurilmada saqlab, tarmoq tiklanganda avtomatik yuborish. Foydalanuvchi tajribasi yaxshi bo’ladi, lekin yangi savollar paydo bo’ladi. Ikki qurilmadan bir xil ma’lumot o’zgartirilsa qaysi biri ustun? Navbatdagi amal serverda rad etilsa, foydalanuvchi buni qanday biladi?

Shu sababli navbat mexanizmini faqat u haqiqatan zarur bo’lganda quring — va interfeysda amal hali yuborilmaganini aniq ko’rsating.

Yangilanish muammosi

Service worker va cache sabab eski frontend yangi backend bilan mos kelmay qolishi mumkin. Versiyalangan cache nomi, eski cache’ni tozalash va xavfsiz aktivatsiya oqimi rejalashtiriladi. Muhim yangilanish bo’lsa, foydalanuvchiga “Yangi versiya tayyor” xabari va boshqariladigan yangilash tugmasi berilishi mumkin.

Bu eng ko’p uchraydigan PWA muammosi. Foydalanuvchi saytni ochadi, lekin eski versiyani ko’radi — chunki service worker cache’dan javob bermoqda. U sahifani yangilaydi, natija o’zgarmaydi. Bunday holatda foydalanuvchi saytni “buzuq” deb hisoblaydi.

Oldini olish uchun cache nomiga versiya qo’shing (cache-v3) va activate bosqichida eskilarini o’chiring. Shunda har yangi chiqarish toza holatdan boshlanadi.

PWA sizga kerakmi?

Har sayt PWA bo’lishi shart emas. Qaror uchun uch savol yordam beradi.

Foydalanuvchi qaytib keladimi? Bir marta ochiladigan ma’lumot sahifasi uchun o’rnatish ma’nosiz. Kundalik ishlatiladigan vosita uchun esa foydali.

Offline holat real ehtiyojmi? Metro, samolyot, zaif tarmoq — bular haqiqiy stsenariylar. Lekin doim internetli ofisda ishlaydigan ichki tizim uchun service worker qo’shimcha murakkablikdan boshqa narsa bermasligi mumkin.

Jamoada buni qo’llab-quvvatlash imkoni bormi? Service worker noto’g’ri sozlansa, foydalanuvchi eski versiyada “qamalib” qolishi mumkin. Bu tuzatish qiyin muammo.

Agar javoblar noaniq bo’lsa, sodda yo’ldan boring: avval saytni tez, responsive va ishonchli qiling. Bu ishlarning foydasi PWA’siz ham seziladi.

Sinash va tekshirish

PWA’ni faqat kompyuterda tekshirish yetarli emas. Kamida uch holatni sinang.

Avval DevTools’da Network → Offline rejimini yoqib, sahifani yangilang. Nima ko’rinadi — cache’dagi nusxa, xato sahifasi yoki brauzerning odatiy “internet yo’q” ekrani? Uchinchisi eng yomon natija.

Keyin Application → Storage → Clear site data bosib, hammasini tozalang va birinchi tashrifni qaytadan ko’ring. Yangi foydalanuvchi aynan shu tajribani oladi.

Oxirida haqiqiy telefonda oching. Emulyator layout muammosini ko’rsatadi, lekin o’rnatish oqimi, ikonka ko’rinishi va tarmoq uzilishidagi xatti-harakat faqat real qurilmada to’liq bilinadi.

Qisqacha xulosa

• PWA — install, offline va qurilma imkoniyatlarini qo’sha oladigan web ilova.
• Manifest o’rnatish ko’rinishini, service worker tarmoq va cacheni boshqaradi.
• Turli resurs uchun turli cache strategiyasi tanlanadi.
• Offline nusxa yangi ma’lumot degani emas; holat foydalanuvchiga ko’rsatiladi.
• PWA progressive enhancement tamoyiliga amal qilib, oddiy web holatida ham ishlaydi.
• Service worker yangilanishi va eski cache’ni boshqarish alohida reja talab qiladi.

Keyingi darsda to’liq web loyiha — barcha qatlamlarni bitta amaliy loyihada birlashtiramiz.