Телефонингиздаги иловаларнинг кўпи аслида оддий веб-сайтдан фарқ қилмайди, фақат улар экранда алоҳида белги бўлиб туради ва интернетсиз ҳам қисман ишлайди. Progressive Web App (PWA) айнан шу чегарани йўқотадиган технология: у ҳақиқий веб-сайт бўла туриб, мобил иловага ўхшаб ишлайди. Фойдаланувчи уни телефон экранига ўрнатади, push билдиришнома олади ва оффлайн ҳолатда ҳам саҳифаларни кўра олади. Веб дастурчи учун бу энг арзон ва энг тез йўл билан иловага хос тажрибани етказиш имкониятидир.
PWA нима ва у нега муҳим
PWA — бу замонавий веб стандартлари (HTML, CSS, JavaScript) асосида қурилган, лекин натив иловага хос хусусиятларни қўшадиган сайт. Унинг сеҳри учта асосий устунда яширинган: манифест файли сайт қандай ўрнатилиши ва қандай кўринишини белгилайди, service worker тармоқ сўровларини ушлаб оффлайн ишлаш ва кешлашни таъминлайди, HTTPS эса бутун тизимнинг хавфсиз ишлашига кафолат беради. Ушбу учлик бирга ишлаганда фойдаланувчи App Store ёки Play Marketга умуман кирмасдан туриб иловани ўрната олади.
Бизнес нуқтаи назаридан PWA жуда жозибали, чунки битта код базаси билан ҳам браузер, ҳам "илова" тажрибасини берасиз. Сизга алоҳида iOS ва Android жамоаси, алоҳида дўкон рўйхатдан ўтиши ёки ҳар бир янгиланиш учун модерация кутиш керак эмас. Сайтни янгиласангиз, фойдаланувчи кейинги очишида автоматик янги версияни олади. Бу вақт ва пул тежайди, айниқса кичик ва ўрта лойиҳалар учун.
manifest.json — илованинг паспорти
Веб иловангизни ўрнатиладиган қилиш учун биринчи қадам манифест файлини яратишдир. Бу JSON файл браузерга илова номи, белгиси, ранги ва қандай режимда очилишини айтади. Уни HTML саҳифанинг бош қисмида линк орқали улайсиз ва браузер шу маълумотлар асосида "Экранга қўшиш" таклифини кўрсатади.
{
"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"
}
]
}Бу ерда display майдони энг муҳим: standalone қиймати илова очилганда браузер манзил қатори кўринмаслигини, яъни у ҳақиқий иловадек тўлиқ экранда очилишини таъминлайди. Белгилар учун камида 192 ва 512 пиксел ўлчамларини бериш тавсия этилади, чунки турли қурилмалар турли ўлчамларни ишлатади.
Service worker — оффлайн ишлашнинг юраги
Service worker — бу саҳифадан алоҳида, фонда ишлайдиган JavaScript скрипт. У браузер ва тармоқ ўртасида туради ва ҳар бир сўровни ушлаб қолиб, жавобни кешдан бериши ёки тармоққа йўналтириши мумкин. Айнан шу механизм интернет узилганда ҳам сайтингиз ишлашда давом этишини таъминлайди. Service workerни аввал рўйхатдан ўтказасиз, кейин унинг ичида кешлаш стратегиясини ёзасиз.
// 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));
});
}Скрипт рўйхатдан ўтгач, sw.js файлида муҳим саҳифаларни кешга сақлаймиз ва сўровларни ушлаймиз. Қуйидаги мисолда install босқичида асосий файллар кешланади, fetch босқичида эса аввал кешдан, агар топилмаса тармоқдан олинади.
// 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))
);
});Бу стратегия "cache-first" деб аталади: агар файл кешда бўлса дарҳол ундан берилади, бу саҳифани жуда тез очади. Янгироқ маълумот керак бўлган жойларда "network-first" ёки "stale-while-revalidate" каби стратегияларни қўллаш мумкин. Стратегияни сайт мазмунига қараб танлаш дастурчининг вазифаси.
Push билдиришнома ва ўрнатиш
PWA фойдаланувчи билан натив иловалардек алоқа қила олади: push билдиришнома юбориш орқали янги хабар, чегирма ёки буюртма ҳолати ҳақида хабар беришингиз мумкин. Бунинг учун фойдаланувчидан рухсат сўрайсиз ва service worker орқали билдиришномани кўрсатасиз. Ўрнатиш жараёни эса жуда содда — браузер мос шартлар бажарилганда "Экранга қўшиш" тугмасини автоматик таклиф қилади ёки сиз уни ўзингиз бошқаришингиз мумкин.
// 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);
});Чекловлар ва қачон натив танлаш керак
PWA ҳаммаси учун идеал ечим эмас. iOS платформасида Apple PWA имкониятларини чеклайди: push билдиришномалар узоқ вақт қўллаб-қувватланмади ва ҳозир ҳам баъзи чекловлар бор, кешлаш ҳажми чегараланган, айрим қурилма датчикларига тўлиқ кириш йўқ. Агар лойиҳангиз Bluetooth, илғор камера функцияларини, оғир 3D графика ёки тизимга чуқур интеграция талаб қилса, натив илова барибир кучлироқ танлов бўлиб қолади.
Шунга қарамай, кўпчилик бизнес лойиҳалар — онлайн дўконлар, янгиликлар сайтлари, хизмат кўрсатиш платформалари ва ички воситалар — учун PWA мукаммал мувозанат беради. У арзон, тез ишга тушади, битта код билан барча платформаларни қамраб олади ва дўкон модерациясига боғлиқ эмас. Лойиҳангизни бошлашда аввал PWA сифатида қуришни кўриб чиқинг ва фақат ҳақиқий эҳтиёж бўлганда нативга ўтинг — бу кўп ҳолларда энг оқилона стратегиядир.