Progressive Web Apps (PWA) mobil veb-ishlab chiqish uchun navbatdagi katta narsa bo'lishi mumkin. 2015-yilda Google tomonidan taqdim etilgan PWA Mahalliy ilovalar vaMobil veb-ilovalarning eng yaxshi imkoniyatlaridan foydalangan holda katta potentsialni namoyish etdi, bu ilovaning foydalanuvchi tajribasi uchun katta g‘alaba qozondi.

PWA nima?

PWA - bu HTML, CSS va JavaScript-ni o'z ichiga olgan umumiy veb-texnologiyalari bilan tuzilgan mobil veb-ilova bo'lib, oflayn rejimda ishlash, Push bildirishnomasi, Qurilma uskunasiga kirish, mahalliy ilovalardan oson kirish kabi imkoniyatlarga ega.

Boshqacha qilib aytganda, PWA bu veb-ilova, ammo yaxshiroq:

  1. Progressiv va sezgir: Har bir foydalanuvchi, har bir brauzer, har bir qurilma
  2. Ulanishdan mustaqil: Oflayn va past sifatli tarmoq rejimi
  3. Ilovaga o'xshash tajriba:Ilova uslubida navigatsiya va oson bosh ekranni ishga tushirish
  4. Tez va yangi ma'lumotlar: Har doim yangilangan
  5. Qurilma uskunasiga kirish: Kamera va geolokatsiya api-ga kirish
  6. Bog'lanish va kashf qilish mumkin: URL orqali ulashish va SEO tomonidan indekslangan
  7. Jalbatli:Foydalanuvchilarni jalb qilish uchun push-bildirishnomalarni qo'llab-quvvatlash

PWA uchun asosiy qurilish bloklari

  1. Xizmat xodimlari: Oflayn yordam uchun
  2. Web App Manifest fayli: Bosh ekranga kirish uchun
  3. Ilova qobig'i arxitekturasi: Turli xil ekran/qurilmalarni qo'llab-quvvatlash uchun
  4. Push bildirishnomasi: foydalanuvchini faollashtirish uchun

Xizmat xodimlari: PWA miyasi

Xizmat ko'rsatuvchi xodim - kelib chiqishi va yo'liga qarshi ro'yxatdan o'tgan voqeaga asoslangan ishchi. U JavaScript fayli shaklida boʻlib, u oʻzi bilan bogʻlangan veb-sahifani/saytni boshqarishi, navigatsiya va resurs soʻrovlarini ushlab turishi va oʻzgartirishi hamda ilovangiz qanday ishlashini toʻliq nazorat qilish imkonini beruvchi resurslarni juda nozik tarzda keshlashi mumkin. ilovaga oflayn yoki past tarmoqda ishlashiga yordam beradigan ayrim vaziyatlar.

Xizmat xodimlarining xatti-harakatlari:

  1. Ilovangizni kengaytiradigan asosiy JavaScript-dan turli mavzularda ishlaydi
  2. O'zining global kontekstida ishlaydi
  3. To'liq asenkron bo'lish uchun mo'ljallangan; shuning uchun u sinxron XHR va mahalliy xotira kabi narsalarga kirish imkoniga ega emas
  4. Ishchi kontekstida ishlaydi - shuning uchun u DOM-ga kira olmaydi
  5. Ishlab chiqish uchun Localhost-dan tashqari HTTPS-faqat ishlab chiqarishda ishlaydi
  6. 1:1 miqyosda ishlaydi, ya'ni har bir sohada faqat bitta Xizmat xodimi bo'lishi mumkin
  7. Istalgan vaqtda tugatilishi mumkin

Xizmat xodimlarining hayot aylanishi:

  1. Ro'yxatdan o'tish — foydalanuvchi veb-saytga kirganda, register() funksiyasiga qo'ng'iroq qilib, brauzer Service Worker JavaScript faylini aniqlaydi; shuning uchun u yuklaydi, tahlil qiladi va bajarish bosqichi boshlanadi
  2. O'rnatish — Bu barcha statik aktivlarni oldindan keshlash uchun eng yaxshi joy. O'rnatish hodisasi ro'yxatdan o'tgandan keyin birinchi marta sodir bo'lishini yodda tuting.
  3. Faollashtirish - Bu voqea yangi ro'yxatdan o'tgan Xizmat xodimini faollashtiradi va ilova uchun xuddi shunday foydalanishni boshlaydi. Bu eski keshlarni va xizmat ko'rsatuvchi xodimingizning oldingi versiyasi bilan bog'liq boshqa narsalarni tozalash uchun ham yaxshi vaqt
  4. Bo'sh — hodisalarni o'rnatish va faollashtirish xatosiz yakunlangandan so'ng, Service Worker samarali bo'ladi. Biroq, agar u o'rnatish, faollashtirish vaqtida ishlamay qolsa yoki yangisi bilan almashtirilsa, u ortiqcha bo'lib qoladi va ilovaga ta'sir qilmaydi.

Xizmat ko'rsatish xodimlari ma'lum bir tarzda ishlash uchun sozlanishi mumkin. Keshlanmagan ma'lum bir so'rov bo'lsa, xizmat xodimiga so'rov javobini Serverdan olingandan so'ng keshlashini aytish mumkin. Bu keyingi safar bir xil so'rov uchun takroriy qo'ng'iroqlarni kamaytirishga yordam beradi.

const CACHE_NAME = "Mening PWA keshim";
const FILES_TO_CACHE = [
'/index.html',
'/main.js',
'/main.css',
'/delete.svg',
'/404.html',
'/offline.html'
];

self.addEventListener('o'rnatish', hodisa =› {
console.log('xizmat ko'rsatuvchi xodimni o'rnatishga urinish va statik aktivlarni keshlash');
event.waitUntil(
caches.open(CACHE_NAME) ).kesh (kesh =› {
console.log('Ochilgan kesh');
qaytar. cache.addAll(FILES_TO_CACHE)
})
)
}) ;

self.addEventListener(‘faollashtirish’, hodisa =› {
console.log(`yangi xizmatchini faollashtirish`);
const cacheWhiteList = [FILES_TO_CACHE];

event.waitUntil(
caches.keys().then(cacheNames =› {
return Promise.all(
cacheNames.map(cacheName =› {
agar (cacheWhiteList.indexOf) (kesh nomi) === -1) {
keshlarni qaytaring.delete(kesh nomi);
}
})
)
})
)< br /> })

self.addEventListener('fetch', hodisa =› {
console.log(`${event.request.url}` uchun hodisani keltirish);
event.respondWith(
caches.match (event.request.url).then(
answer =› {
if (javob) {
console.log(`keshda ${event.request.url} topildi`);
javobni qaytarish;
}
console.log('tarmoq so‘rovi ', event.request.url);
qaytarish (event.request). keyin (javob =› {
agar (response.status === 404) {
qaytish kesh.match('404.html');

keshlarni.open(CACHE_NAME).keyin qaytaring (kesh =› {
cache.put(event.request.url, respond.clone());
javob qaytarish;
})
}).catch( xato = › {
console.error('olishdagi xato', xato);
Qaytish caches.match('offline.html');

);
}
).catch(xato =› {
console.error(xato);
})
)
})

Veb ilova manifest fayli

Web App Manifest fayli veb-ilovaga Bosh ekranga qo'shish funksiyasini yoqishga yordam beradi. Bu Web App Manifest spetsifikatsiyasiga muvofiq JSON matn fayli boʻlib, uning nomi, muallifi, piktogrammalari va tavsifi kabi ilova haqida maʼlumot beradi. Bu fayl foydalanuvchi tomonidan ilovani oʻz qurilmasiga oʻrnatish imkonini beradi va mavzuni, ochilishi kerak boʻlgan URL manzilini, ekranni ochish ekranini, bosh sahifadagi piktogrammalarni va hokazolarni oʻzgartirishga imkon beradi. Quyida bir nechta muhim atributlar keltirilgan:

ism: foydalanuvchiga koʻrsatiladigan ilovaning oʻqilishi mumkin boʻlgan nomi yoki piktogramma yorligʻi sifatida

qisqa_ism: boʻsh joy yetarli boʻlmagani uchun mos kelmasa, nom oʻrnini bosadigan qisqa ism

mavzuning_rangi: standart mavzu rangini belgilaydi

fon_rangi: foydalanuvchi agenti veb-sayt uslublar jadvallarini yuklashdan oldin ham ilova uchun kutilayotgan fon rangini belgilaydi

displey: veb-sayt uchun afzal ko'rish rejimi

scope: PWA uchun qamrovni belgilaydi

start_url: foydalanuvchi ilovani ishga tushirganda yuklanadigan URL

Ikonkalar: kontekstga qarab ilova piktogrammalarini aniqlaydigan tasvir fayllari majmuasi

{

"nom": "Asosiy PWA",

"qisqa_ism": "PWA",

"lang": "en",

“start_url”: “/”,

"displey": "to'liq ekran",

“mavzuning_rangi”: “#c2f442”,

“fon_rangi”: “#c2f442”,

“belgilar”: [{

“src”: “delete.svg”,

"o'lchamlari":"150x150

}]

}

Ilova qobig'i arxitekturasi

Ilova qobig'i (yoki ilova qobig'i) arxitekturasi - bu mahalliy ilovalarda ko'rganingizga o'xshash foydalanuvchilar ekranlariga ishonchli va bir zumda yuklanadigan Progressiv veb-ilovani yaratishning bir usuli.

Ilova "qobiq" foydalanuvchi interfeysini kuchaytirish uchun zarur bo'lgan minimal HTML, CSS va JavaScript bo'lib, oflayn rejimda keshlanganda foydalanuvchilarga takroriy tashriflar paytida bir zumda, ishonchli yaxshi ishlashni ta'minlaydi. Bu shuni anglatadiki, foydalanuvchi har safar tashrif buyurganida dastur qobig'i tarmoqdan yuklanmaydi. Tarmoqdan faqat kerakli tarkib kerak

Foydalar:

  • Doimiy tez ishlaydigan ishonchli ishlash
  • Mahalliy o'zaro ta'sirlar
  • Ma'lumotlardan iqtisodiy foydalanish

Boshqacha qilib aytadigan bo'lsak, ilova qobig'i mahalliy ilovani yaratishda ilovalar do'koniga nashr etadigan kodlar to'plamiga o'xshaydi. Bu sizning UI skeleti va ilovangizni erdan olib tashlash uchun zarur bo'lgan asosiy komponentlardir, lekin ma'lumotlarni o'z ichiga olmaydi.

Push bildirishnomalar arxitekturasi

Bildirishnoma - bu foydalanuvchi qurilmasida paydo bo'ladigan xabar. Bildirishnomalarmahalliy ravishdaochiq ilova tomonidan ishga tushirilishi mumkin yoki ularserverdanilova ishlamayotgan vaqtda ham foydalanuvchiga “surilishi” mumkin. Ular foydalanuvchilarga o'z vaqtida yangilanishlarga qo'shilish imkonini beradi va foydalanuvchilarni moslashtirilgan kontent bilan samarali qayta jalb qilish imkonini beradi.

Push bildirishnomalari ikkita API yordamida yig'iladi:

Notifications API:Ilovaga tizim bildirishnomalarini foydalanuvchiga koʻrsatish imkonini beradi.

Push API:Buxizmat xodimiga ilova faol boʻlmaganda ham serverdan Push Messages bilan ishlash imkonini beradi.

Bildirishnoma va Push API’lari Service Worker API’ning ustiga qurilgan bo‘lib, u fonda push xabar hodisalariga javob beradi va ularni ilovaga uzatadi.

Obuna ish jarayoni bosqichlari:

Grant: Foydalanuvchi ruxsat beradi

Ilova obuna boʻlishni soʻraydi: Ilova PushSubscription obyekti uchun veb-push xizmatidan soʻraydi

Web push xizmati obuna ob'ektini qaytaradi:Web push xizmati PushSubscription ob'ektini qaytaradi

Ilova push-bildirishnomani yuboradi: Biz push bildirishnomasini ishga tushiradigan amallarni belgilaymiz va ilova serveri obuna asosida bildirishnomani yuboradi

Xizmat xodimi bildirishnoma oladi: Mijozdagi xizmat xodimi bildirishnomalarni oladi va uni foydalanuvchiga ko‘rsatadi.

Oflayn rejimni qo'llab-quvvatlash:

Xizmat xodimi so'rovni oflayn rejimda bajarish uchun foydalanuvchi qurilmasida turli oflayn xotiradan foydalanadi:

sessionStorage: Sessiya davomida har bir berilgan manba uchun alohida saqlash maydonini saqlaydi

localStorage:brauzer yopilganda va qayta ochilganda ham har bir ma'lum manba uchun alohida saqlash maydonini saqlaydi.

Kesh:kerakli tarmoq resurslari uchun

IndexedDB:ilova holati va ma'lumotlar to'plamini saqlash uchun

Bosh ekranga qo'shish mezonlari (A2HS):

  1. HTTPS orqali xizmat ko'rsatish (bu PWA asosiy tushunchalaridan biri edi va Service Worker uchun zarur).

2. Web Manifest faylida “nom” yoki “qisqa_nom”, 192px “Icon” va 512px oʻlchamdagi piktogramma, “start_url”, “displey” toʻliq ekran, mustaqil yoki minimal-ui boʻlishi kerak.

3. Veb-ilova allaqachon o'rnatilmagan

4. Ilovada roʻyxatdan oʻtgan “Xizmat xodimi”ni olib kelish hodisasi ishlovchisi bor

Nosozliklarni tuzatish va oʻlchash vositalari

PWA dasturini disk raskadrovka qilish quyidagi ikkita yaxshi vosita yordamida amalga oshirilishi mumkin:

Chrome Dev vositalari:

Google Lighthouse:

Rahmat !! Baxtli o'rganish