Veb-saytdan mobil ilovaga: Progressive Web Apps bo‘yicha to‘liq qo‘llanma
Loyihangiz uchun PWA nima uchun muhim?
Native app yasash – bu katta mas'uliyat. iOS va Android uchun alohida kodlar yozasiz, app store kutishlari bilan ovora bo'lasiz, har bir platforma uchun alohida joylashtirasiz. Progressive Web Apps (PWA) bu tartibni butunlay o'zgartiradi.
PWA bilan foydalanuvchilar native app kabi his qiladi: uy ekraniga belgi, to'liq ekran rejimi, oflayn ish. Siz esa bitta kod bazasini yuritasiz. App store bezorilari yo'q, platforma muammolari yo'q. Oddiy veb-saytingiz super kuchga ega bo'ladi.
Sir service workerlarda: bu engil JavaScript jarayonlari tarmoq so'rovlarini ushlaydi, keshni boshqaradi, oflayn rejimni yoqadi. Juda oqilona yechim.
Haqiqat: PWA nimaga qodir va nimaga emas?
Boshlashdan oldin chegaralarni bilib oling. PWA o'z domeningiz doirasida ishlaydi, faqat HTTPS orqali, sandbox muhitida. Bu cheklov emas – xavfsizlik kafolati.
Yaxshi tomoni: native API'larga kirish ochiq – geolocation, kamera, sensorlar. Yangi versiyalar darhol tarqaladi, app store kutish yo'q. Foydalanuvchi keyingi marta kirganda yangilanishni oladi.
PWA qurish: Bosqichma-bosqich rejasi
Mavjud saytni PWA'ga o'tkazish uchun 5 ta asosiy qism. Mana nimalarni yasaysiz:
1. App Manifest: PWA shaxsiy guvohnomasi
Manifest – bu JSON fayl, OS ga app haqida hamma ma'lumot beradi:
- To'liq nom va qisqa nomi
- Tema va fon ranglari
- Ishlash doirasi (scope)
- Ishga tushirish URL'i
- Tavsif
- Ikonalar
- Orientatsiya sozlamalari
Misol:
{
"name": "Sizning zo'r appingiz",
"short_name": "ZorApp",
"theme_color": "#2196F3",
"background_color": "#FFFFFF",
"display": "standalone",
"scope": "/",
"start_url": "/",
"description": "App haqida qisqa ma'lumot",
"orientation": "any",
"icons": [
{
"src": "/assets/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Orientatsiyani "any" qoldiring, agar maxsus sabab bo'lmasa. Mobil foydalanuvchilar erkinlikni yaxshi ko'radi.
2. HTML ga manifestni bog'lash
Asosiy shablonning <head> qismiga qo'shing:
<link rel="manifest" href="/assets/manifest.json">
Brauzer shu faylni topib oladi.
3. Oflayn rejimni rejalashtirish
Service worker foydalanuvchi yurayotganda kontentni keshlaydi. Agar oflaynda keshda yo'q narsa so'ralsa, yumshoq javob bering. offline.html yarating, vaziyatni tushuntiring.
Single-page app uchun uni index.html ga bog'lang:
ln -s index.html offline.html
Shunda foydalanuvchi o'lik ekranda qolib ketmaydi.
4. Service Worker ro'yxatdan o'tkazish
</body> dan oldin skript qo'shing:
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('Service Worker ro\'yxatdan o\'tdi'))
.catch(err => console.log('Service Worker xatosi'));
}
</script>
5. Service Worker yaratish
Bu yerda oflayn sehr sodir bo'ladi. So'rovlarni ushlaydi, keshlaydi, tarmoqsiz vaqtda beradi:
const CACHE_NAME = 'v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/scripts/main.js',
'/offline.html'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
.catch(() => caches.match('/offline.html'))
);
});
Install paytida muhim fayllarni keshlaydi, tarmoqda keshdan beradi, kerak bo'lsa offline sahifaga o'tkazadi.
HTTPS talabi: Majburiy shart
Service worker faqat HTTPS da ishlaydi. Bu xavfsizlik uchun zarur. Agar HTTPS yo'q bo'lsa, hozir o'rnating. Bizda NameOcean da SSL sertifikatlar va avto HTTPS hosting bor – hammasi oddiy.
Joylashtirish va sinov
Manifest, service worker va HTML ni yuklang. Keyin tekshiring:
- DevTools (F12) → Application
- Manifest xatosiz yuklanganmi?
- Service Workers bo'limida ro'yxatdan o'tganmi?
- Oflayn sinov: DevTools → Network → Offline
- PWA o'rnatish (brauzer taklif qiladi yoki menyu orqali)
Asl foyda
Foydalanuvchilar native app kabi his qiladi, siz iOS/Android kodlarini boshqarmaysiz. Yangilanishlar darhol. Joylashtirish to'liq qo'lingizda.
Bu ozgina ishga arziydi.
Avtomatlashtirish maslahati
Agar murakkab tuyulsa, PWABuilder.com ga kiring. U ko'p narsani avtomatik yasaydi. Boilerplate ni toolga topshirish aqlli.
Xulosa: PWA tajriba emas, amaliy yechim. Foydalanuvchilarga app sifatini bering, o'zingiz asosiy funksiyalarga e'tibor qarating.