Progressive Web Apps 101: nima, nima uchun va qanday qilib

Progressive Web App nima? Bizga nima kerak? Qanday qilib biz uni qurishimiz mumkin?

Instagram-ning Progressive veb-ilovasi

Siz veb-saytni ko'rib chiqayotganda yuqoridagi kabi "Uy ekraniga qo'shish" bannerini ko'rganmisiz? Tugmani bosganingizda, "dastur" o'zini fonga o'rnatadi. Ilovangiz tortmasida joylashgan ushbu ilovani ochganingizda, brauzerda qilgan tajribangizni ko'rib chiqishingiz mumkin, ammo hozir mobil telefoningizda.

Sizda mavjud narsa bu veb-ilovadan yuklab olingan mobil ilova. Bularning barchasi, ilova do'konining yuzini ko'rmasdan ham kerak.

Ilovani olish juda oson edi! Ammo bu eng yaxshi qism ham emas. Ushbu ilovani ochganingizda, Internet bo'lmasa ham, tarkibni ko'rib chiqa olasiz. Siz ilovaga oflayn kirish huquqiga egasiz! Qanday ajoyib?

Siz nimani ko'rgan bo'lsangiz, bu Progressive Internet App (PWA). PWA sizga dasturni brauzer oynasidan o'zi o'rnatishga imkon beradi, telefoningizda mahalliy ilova kabi mavjud va mahalliy dastur kabi офлайн rejimda ishlaydi.

Ammo veb-ilova progressiv bo'lishi nimani anglatadi? Keling, ilg'or veb-ilovalar nima ekanligini, nima uchun ular mahalliy ilovalardan yaxshiroq ekanligi va ularni an'anaviy veb-ilovalardan nimasi bilan ajratib turishini batafsil ko'rib chiqaylik.

Progressive Web App (PWA) nima?

Progressive Web App atamasi Aleks Rassel va Frenses Berriman tomonidan ishlab chiqilgan. Aleksning so'zlari bilan:

Progressive Web Apps - bu kerakli vitaminlarni olgan veb-saytlar.

Bu yangi ramka yoki texnologiya emas. Veb-dastur funktsiyasini ish stoli yoki mobil dasturga o'xshash qilish uchun eng yaxshi tajribalar to'plami. Orzu shunchalik yaxlit va muammosiz tajribaga ega bo'lishki, foydalanuvchi Progressive Web App va mahalliy mobil ilova o'rtasidagi farqni aytib berolmaydi.

Progressiv veb-ilovalar progressiv takomillashtirish orqali foydalanuvchi tajribasini etkazadi. Bu PWA yangi iPhone 8-da oldingi avlod iPhone-dagi kabi vazifalarni bajarishini anglatadi. Albatta, ba'zi xususiyatlar mavjud bo'lmasligi mumkin, ammo ilova ishlashni davom ettiradi va kerak bo'lganda bajaradi.

Nega bizga Progressive Web App kerak?

Progressiv veb-ilovaga nima uchun kerakligini tushunmasdan oldin, mahalliy va veb-ilovalarda bugungi kunda duch kelayotgan ba'zi muammolar haqida gaplashaylik.

Internet tezligi: qaerda yashashingizga qarab buni anglay olmasligingiz mumkin, ammo dunyo aholisining 60 foizi hanuzgacha 2G Internetdan foydalanmoqda. Hatto AQShda ham ba'zi odamlar Internetga kirish uchun dialup-dan foydalanishlari kerak.

Veb-saytning sekin ishlashi: Agar veb-sayt juda sekin bo'lsa, foydalanuvchi "Close X" tugmachasini bosishni qancha vaqt kutishini bilasizmi? Uch soniya! 53% foydalanuvchilar juda sekin bo'lsa veb-saytdan voz kechishadi.

Yuqori ishqalanish: Odamlar mahalliy ilovalarni o'rnatishni xohlamaydilar. O'rtacha foydalanuvchi bir oyda 0 ta dastur o'rnatadi.

Foydalanuvchi bilan aloqa: Foydalanuvchilar ko'p vaqtlarini mahalliy ilovalarda o'tkazadilar, ammo mobil Internetga kirish mahalliy ilovalarga qaraganda deyarli uch baravar ko'p. Shunday qilib, foydalanuvchilarning aksariyati faol ishlamaydi. Biroq, foydalanuvchilar vaqtning 80 foizini faqat uchta eng yaxshi mahalliy ilovalarga sarflaydilar.

Mobil veb va boshqa ilovalarda foydalanuvchilarning ishtiroki

PWA ushbu muammolarni hal qilishga yordam beradi. Progressiv veb-ilovadan foydalanish uchun bir nechta sabablar mavjud, ammo bu erda u taqdim etadigan eng yaxshi imkoniyatlar mavjud:

  1. Tez: PWA-lar tezkor tajribalarni ta'minlaydi. Foydalanuvchi ilovani yuklab olgan paytdan boshlab ular bilan ishlashni boshlagan paytgacha hamma narsa juda tez sodir bo'ladi. Ma'lumotni keshlashingiz mumkinligi sababli, tarmoqni urmasdan ham, ilovani qayta ishga tushirish juda tezdir.
  2. Birlashtirilgan foydalanuvchi tajribasi: PWA-lar o'zlarini mahalliy ilovalar kabi his qiladilar va tutadilar. Ular foydalanuvchining bosh ekranida o'tiradi, ona ilovalari kabi push-bildirishnomalarni yuboradi va mahalliy ilovalar kabi qurilmaning funktsiyalariga kirish huquqiga ega. Tajriba muammosiz va integratsiyalashgan his qiladi.
  3. Ishonchli tajriba: Xizmat ko'rsatuvchi xodimlarning yordami bilan, hatto tarmoq ishlamay qolganda ham, foydalanuvchi ekranida rasmni ishonchli tarzda bo'yashimiz mumkin.
  4. Faoliyat: Biz foydalanuvchiga bildirishnomalarni yuborishimiz mumkin, shuning uchun biz foydalanuvchini xabardor qilish va ilova bilan shug'ullanish orqali haqiqatan ham kelishuvni yaxshilay olamiz.

Qisqasi, bu YANGI.

Progressiv veb-dasturni qanday yaratish kerak

Google Progressive veb-ilovalari uchun narsalar ro'yxatini e'lon qildi. PWA bo'lish uchun dasturga qo'yiladigan to'rtta talabdan oshib ketaman:

1. Web App Manifest

Manifest.json namunasi

Bu faqat veb-ilova haqida meta ma'lumotlarini taqdim etadigan json fayl. Unda ilovaning belgisi (foydalanuvchi uni o'zining ilovalar paneliga o'rnatgandan keyin ko'rgan), ilovaning orqa rangi, ilovaning nomi, qisqa nomi va boshqalar kabi ma'lumotlarga ega. Ushbu manifest faylini biz o'zimiz yoza olamiz yoki biz uchun uni yaratish uchun vositalardan foydalanishimiz mumkin.

Google vositalari yordamida manifest fayllarini avtomatik ravishda yaratishingiz mumkin.

2. Xizmatchilar

Xizmat ishchilari - bu dastur fonida ishlaydigan va tarmoq va ilova o'rtasida proksi vazifasini bajaradigan voqealarga asoslangan ishchilar. Ular bizga tarmoq so'rovlarini to'sib qo'yishi va biz uchun kesh ma'lumotlarini orqa fonda saqlashlari mumkin. Bu ma'lumotlardan oflayn foydalanish uchun yuklash uchun ishlatilishi mumkin. Ular yuklash va o'rnatish kabi hodisalarni tinglaydigan va skriptlarni bajaradigan javascript skriptidir.

Mana serviceworker.js namunasi

self.addEventListener ('olish', voqea => {
    // oflayn ko'rish uchun keshlash
    const {request} = voqea;
    const url = yangi URL (request.url);
    if (url.origin === location.origin) {
        event.respondWith (cacheData (so'rov));
    } else {
        event.respondWith (birinchi tarmoq (so'rov));
    }
});
async funktsiyasi cacheData (so'rov) {
    const cachedResponse = kuting caching.match (so'rov);
    return cachedResponse || olmoq (talab);
}

3. Belgi

Bu foydalanuvchi PWA-ni o'z ilovalar paneliga o'rnatganida ilova ikonkasini berish uchun ishlatiladi. Jpeg tasviri juda yaxshi bo'ladi. Yuqorida ta'kidlab o'tgan manifest vositasi bir nechta formatlar uchun piktogrammalar yaratishda yordam beradi va men buni juda foydali deb topdim.

4. HTTPS orqali xizmat ko'rsatiladi

PWA bo'lish uchun veb-ilova xavfsiz tarmoq orqali ulanishi kerak. Cloudfare va LetsEncrypt kabi xizmatlarda SSL sertifikatini olish juda oson. Xavfsiz sayt bo'lish nafaqat eng yaxshi tajriba, balki sizning veb-ilovangizni ishonch va ishonchlilikni namoyish etadigan va o'rta odamlarning hujumlaridan qochadigan foydalanuvchilar uchun ishonchli sayt sifatida o'rnatadi.

Izoh: Bu 2 qism seriyasining 1 qismi. Keyingi qismida biz skeletlari topilgan index.html bilan noldan Progressive Web App yaratamiz. Bu erda 2 qismni ko'rib chiqing.

Siz biron yangi narsani o'rgandingizmi? Sharhlaringiz bormi? DevJoke-ni bilasizmi? Menga @ shrutikapoor08 tvit