PWA

Yagona faylli PWA: nega bitta HTML ba'zan to'g'ri tanlov

Zamonaviy frontend odatda o'nlab fayl, yuzlab paket va build bosqichidan iborat. Men esa ko'p loyihani bitta HTML faylida yozaman va buning aniq sabablari bor.

Bakhrullo Nasrulloyev2026-08-14~7 daqiqa

Nima demoqchiman

Yagona faylli PWA — bu HTML, CSS va JavaScript bitta index.html ichida turgan ilova. Build vositasi yo'q, node_modules papkasi yo'q, kompilyatsiya bosqichi yo'q. Faylni serverga tashladingiz — ilova ishlaydi.

Bu 2005-yilga qaytish emas. Zamonaviy brauzer ko'p narsani o'zi qila oladi: CSS o'zgaruvchilari, grid, modul importi, async funksiyalar. Ilgari kutubxona talab qilgan ishlarning ko'pi endi standartda bor.

Nima uchun shunday qilaman

Men telefonda ishlayman

Ko'p kodni iPhone'dan yozaman. Bunda npm install ni ishga tushira olmayman, terminal ochib build qila olmayman. Bitta fayl esa istalgan muharrirda ochiladi, tahrirlanadi va to'g'ridan-to'g'ri GitHub'ga yuklanadi.

Yuklanish tezligi

Bitta so'rov — bitta javob. Brauzer 40 ta faylni navbat bilan yuklab, ularning bog'lanishini kutmaydi. Sekin mobil internetda bu farq sezilarli: sahifa bir soniyada ochiladi.

Hosting arzon va oddiy

Statik fayl GitHub Pages, Firebase Hosting yoki oddiy hostingda bepul turadi. Server kerak emas, konteyner kerak emas, oylik to'lov yo'q.

Bir yildan keyin ham ochiladi

Bu men uchun eng muhim sabab. Build tizimiga bog'liq loyihani bir yildan keyin ochsangiz, paketlar eskirgan, versiyalar mos kelmaydi, kompilyator xato beradi. Bitta HTML fayl esa besh yildan keyin ham xuddi shunday ochiladi.

Amaliy misol. Bir mijoz uchun ikki yil oldin yasagan panelni yaqinda yangilashim kerak bo'ldi. Faylni ochdim, kerakli joyni o'zgartirdim, qayta yukladim. Jami 20 daqiqa. Agar u React loyihasi bo'lganida, avval muhitni tiklashga kun ketardi.

Ichki tuzilma

Bitta fayl demak tartibsizlik degani emas. Men doim shu tartibda yozaman:

<head>
  meta, title, manifest havolasi
  <style>
    :root { --tokenlar }
    asosiy uslublar
    komponent uslublari
    media so'rovlari
  </style>
</head>
<body>
  header / main / footer
  <script>
    konfiguratsiya
    holat (state)
    ma'lumot qatlami
    render funksiyalari
    hodisa tinglovchilari
    ishga tushirish
  </script>
</body>

CSS da o'zgaruvchilar orqali dizayn tizimi tuziladi — ranglar, shriftlar, radiuslar bir joyda. Keyin ularni bitta joyda o'zgartirib, butun ilovani qayta bo'yash mumkin.

PWA qiladigan narsalar

Oddiy sahifani o'rnatiladigan ilovaga aylantirish uchun ikki narsa kerak: manifest va service worker.

// manifest.json
{
  "name": "Unutilmas Ta'm",
  "short_name": "Unutilmas",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0A1020",
  "theme_color": "#22A6FF",
  "icons": [ ... ]
}

Service worker esa oflayn ishlashni ta'minlaydi. Eng oddiy strategiya: birinchi ochilishda fayllarni keshga saqlash, keyingi safar keshdan berish va fonda yangilash.

Ehtiyot bo'ling. Service worker keshi yangilanishni murakkablashtiradi. Foydalanuvchi eski versiyani ko'rib turishi mumkin. Men har chiqarishda kesh nomiga versiya raqamini qo'shaman — cache-v8-1 kabi. Eski kesh o'chiriladi va yangi fayllar yuklanadi.

Qachon bu yondashuv ishlamaydi

Halol bo'lish kerak — bu universal yechim emas. Quyidagi hollarda oddiy build tizimiga o'tish kerak:

Bir necha dasturchi ishlayotgan bo'lsa — bitta faylda Git konfliktlari doimiy bo'ladi
Kod 3000 satrdan oshsa — navigatsiya qiyinlashadi, izlash ko'p vaqt oladi
Murakkab holat boshqaruvi kerak bo'lsa — ko'p ekranli, ko'p oqimli ilovalarda
TypeScript kerak bo'lsa — tur tekshiruvi katta loyihada ko'p xatoni oldini oladi
Tayyor komponent kutubxonasi ishlatilsa

Menda chegara taxminan shunday: 2500–3000 satrgacha bitta fayl qulay. Undan oshsa, bo'laklarga ajrataman.

Oraliq yechim

Build vositasisiz ham fayllarni ajratish mumkin — ES modullari orqali:

<script type="module">
  import { renderCart } from './cart.js';
  import { db }         from './db.js';
</script>

Brauzer modullarni o'zi yuklaydi, kompilyator kerak emas. Bu bitta faylning soddaligi bilan bir nechta faylning tartibi orasidagi oraliq nuqta.

Xulosa

Yagona faylli yondashuv — moda emas, aniq sharoitga moslashtirilgan tanlov. Kichik va o'rta ilovalar uchun, ayniqsa cheklangan muhitda ishlaganda, u tez, arzon va uzoq yashaydi.

Asosiy savol "qaysi texnologiya zamonaviy?" emas, balki "bu loyihani bir yildan keyin kim va qanday sharoitda yangilaydi?" bo'lishi kerak.

PWAHTMLService WorkerFrontendArxitektura

← GPS filtri Firestore realtime →