# PWA va offline ishlash

> Progressive Web App nima? Web app manifest, service worker, cache strategiyalari, install qilish, offline holat va xavfsiz yangilanish asoslari.

Manba: https://learncode.uz/web-dasturlash/pwa-offline/
Sana: 2026-05-13

![Web ilova brauzer, o'rnatilgan mobil ko'rinish va offline cache orqali ishlashi](https://learncode.uz/images/web-dasturlash/pwa-offline-hero.webp)

*PWA webning havola orqali ochilish afzalligini o'rnatish, offline cache va ayrim qurilma imkoniyatlari bilan birlashtiradi.*

**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.

```json
{
  "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.

![Manifest o'rnatish ma'lumotini, service worker tarmoq va cacheni, HTTPS esa xavfsiz kontekstni ta'minlashi](https://learncode.uz/images/web-dasturlash/pwa-qismlari.webp)

*Manifest ilova ko'rinishini, service worker tarmoq oqimini, HTTPS esa bu imkoniyatlar uchun xavfsiz kontekstni beradi.*

### 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.

> **Offline eski ma'lumotni ko'rsatishi mumkin**
>
> Cache'dagi sahifa ochilishi ma'lumot yangi degani emas. Interfeys offline
> holatini va ma'lumot oxirgi qachon yangilanganini tushunarli ko'rsatishi kerak.
> Foydalanuvchi yuborgan amal navbatga olingan bo'lsa, hali serverga yetmaganini
> ham yashirmang.

## 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.

![Online so'rov, cache javobi, offline fallback va keyingi sinxronlash holatlari](https://learncode.uz/images/web-dasturlash/offline-strategiya.webp)

*Yaxshi offline tajriba cache'dan tashqari holat xabari, fallback va keyingi sinxronlashni ham rejalaydi.*

### 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.

> **Offline dars sayti**
>
> Dars matni va kerakli rasmlar oldindan cache qilinsa, foydalanuvchi metroda
> internet uzilganda ham o'qishni davom ettirishi mumkin. Ko'rishlar soni yoki
> izoh yuborish esa tarmoq talab qiladi. Interfeys qaysi imkoniyat offline
> ishlashini aniq aytishi kerak.

## 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.

> **Lighthouse bilan tez tekshiruv**
>
> DevTools'dagi Lighthouse hisoboti PWA talablarini avtomatik tekshiradi:
> manifest to'g'rimi, service worker ro'yxatdan o'tganmi, HTTPS ishlatilganmi,
> ikonkalar yetarlimi. Bu boshlang'ich nuqta sifatida qulay, lekin haqiqiy
> foydalanuvchi tajribasini almashtirmaydi.

## 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](https://learncode.uz/web-dasturlash/toliq-web-loyiha) — barcha
qatlamlarni bitta amaliy loyihada birlashtiramiz.