Tarkib
- PWAlarning ko'tarilishi
- Bugungi kunda PWAlar amal qilmoqda
- O'rnatish
- Oflayn va darhol ishga tushirish
- Birinchi darajali tajriba
- Ilovalar do'konlari
- Platformani birlashtirish
- Dizayn va UX muammolari
- PWAlar yili
Bir necha yil oldin sezgir veb-dizayn ish stoli va mobil saytlar orasidagi bo'shliqni yopgani kabi, progressiv veb-ilovalar texnikasi ham hozirda veb va ilovalar dunyosi o'rtasidagi farqni yo'q qilmoqda. Foydalanuvchilarning ish stolidan tortib to mobil ilovalarigacha bo'lgan tajribasi tez birlashayotganiga o'xshab, juda zamonaviy va samaraliroq Internet rivojlanayotganga o'xshaydi - garchi uning asosiy genetik kodiga jiddiy o'zgarishlar kiritilmasa ham.
- Progressive veb-ilovasini qanday yaratish kerak
Ko'rinib turibdiki, bunga etakchi bosimlar mavjud. Birinchidan, har bir joy uchun mahalliy dasturlarni yaratish, albatta, resurslardan samarali foydalanish emas: foydalanuvchilar yuzlab katta dasturlarning o'tkazuvchanligi va qimmatli disk maydonlarini yo'qotish bilan tugaydi va kompaniyalar juda ko'p pul sarflaydilar, faqat ulardan voz kechishlari uchun. ularning birinchi versiyalaridan keyin. Va ushbu dasturlarning aksariyati faqat veb-tarkibga asoslangan: veb-xizmatlardan yoki tarkibni boshqarish tizimidan olingan ma'lumotlar.
Progressiv veb-ilovaning ta'rifi aniq emas. PWA - bu bir xil kod bazasiga ega bo'lgan har bir platformada ilova o'xshash tajribani taklif qilish uchun progressiv takomillashtirish yordamida veb-platformadagi bir nechta yangi API va qobiliyatlardan foydalanadigan veb-dastur. Bu sizning foydalanuvchilaringiz uchun ilova kabi ajoyib tajribani yaratadigan eng yaxshi amaliyotlar va API foydalanish to'plamidir, shuning uchun siz PWA-ga ega bo'lishingiz yoki yo'qligingiz kabi emassiz; bu sizning saytingiz ko'proq yoki kamroq PWA kabi.
Siz yangi sayt qurishni boshlamoqchisiz? Veb-sayt yaratuvchisidan foydalanishga harakat qiling. Va munosib veb-xosting xizmatidan kerakli yordamni olishingizga ishonch hosil qiling. Yoki biroz boshqacha narsa uchun eng yaxshi bulutli saqlash qo'llanmasiga qarang.
PWAlarning ko'tarilishi
PWA nomi 2015 yilda Google-da Chrome jamoasi uchun ishlaydigan Aleks Rassellning "Ruhimizni yo'qotmasdan yorliqlarni qochiramiz" maqolasida paydo bo'lgan bo'lsa-da, ularning sayohati aslida u erda boshlanmagan. Bizda ilgari Microsoft tomonidan 1999 yilda yaratilgan HTML ilovalari (HTA) va boshqa ko'plab Nokia, BlackBerry va boshqa kompaniyalarning veb-ilovalar platformalari mavjud edi. Keyin, 2007 yilda, Stiv Djobs o'sha paytda asl iPhone uchun dasturlarni yaratishning yagona usuli bo'lgan: boshqa nom bilan bo'lsa ham PWA-larni taqdim etdi. Chrome u erdan boshlandi, bir necha yil o'tgach API-larni yaxshiladi va PWA nomini ixtiro qildi.
Veb-tarkibni ilovalar dunyosiga olib chiqishga urinishda ko'plab muvaffaqiyatsiz tajribalar mavjud bo'lganligi sababli, nega endi u ishlaydi deb o'ylaymiz? Avvalo, bu Microsoft, Google, Apple va Mozilla kabi PWA-lar ortida ishlaydigan texnologiyalarni ilgari surayotgan kompaniyalarga tegishli. Bundan tashqari, veb-platformaning ishlashi yaxshi ishlab chiqilgan PWA-ni mahalliy dastur bilan taqqoslaganda farq sezilmaydigan darajaga yetdi. Bunday shartlar ilgari mavjud bo'lmagan va bu veb-hamjamiyat PWAlar vaqti keldi deb qaror qilishining bir sababi.
Bugungi kunda PWAlar amal qilmoqda
Bugungi kunda PWAlar to'liq ishlaydi va quyidagilarga o'rnatilishi mumkin:
- Ko'pgina brauzerlarda ishlaydigan Android, Chrome eng yaxshi tajribani taqdim etadi
- Safari bilan ishlaydigan iOS
- Chromebooklar
- Microsoft do'konidan Windows 10
- Hozirda asosan Hindistonda millionlab foydalanuvchilar uchun mavjud bo'lgan KaiOS - Firefox OS-ning vilkasi bo'lgan telefonlar
Shu yil oxirida Chrome orqali macOS, Windows va Linux-ga yordam ham keladi. Agar siz hozir sinab ko'rmoqchi bo'lsangiz, u "Desktop PWA" eksperimental bayrog'i sifatida mavjud. Do'kondan foydalanmasdan Windows-da Edge-da o'rnatish, keyinchalik ma'lum bir vaqt oralig'i belgilanmagan bo'lsa-da, keladi.
Agar siz ro'yxatni qayta o'qib chiqsangiz, keyingi oylarda har qanday platformada to'liq o'rnatiladigan PWA-larni qo'llab-quvvatlashi yoki qo'llab-quvvatlashga tayyorligini ko'rishingiz mumkin. Va PWA - bu faqat mos keladigan brauzerlarda faollashtiriladigan, yuqoridagi funktsiyalarga ega veb-sayt bo'lgani uchun, biz uning asosiy funktsiyasidan boshlab barcha brauzerlarga mos kelishini aytishimiz mumkin.
Shuningdek, PWA'lar hozirda turli xil ramkalar uchun CLI-larning ko'pchiligida, jumladan, burchakli 6+ CLI, React Create App, PWA Starter Kit-dan Polimer va Preact CLI uchun ishlab chiqarilmoqda. Va nihoyat, Ionic Framework jamoasi har bir dastur do'konida mahalliy PWAlarni yaratishga imkon beradigan ochiq manba Cordova o'rnini bosuvchi Capacitor g'oyasini taklif qildi.
O'rnatish
PWA-ning muhim jihatlaridan biri bu dasturni o'rnatishdir. Ushbu jarayon ikkita ixtiyoriy bosqichda amalga oshiriladi: dastur fayllarini yuklab olish va oflayn saqlash va OS-da piktogramma o'rnatish. Ikkala qadam ham ixtiyoriy bo'lganligi sababli, siz brauzerda oflayn rejimda ishlashni taklif qilishingiz yoki oflayn o'rnatilmasdan belgini taklif qilishingiz mumkin. Ammo haqiqiy PWA ikkalasini ham o'z ichiga olishi kerak: u HTTPS ostida TLS bilan ta'minlanishi kerak va foydalanuvchi uni brauzerda yoki o'z o'rnatilgan belgisida ishlatadimi-yo'qligini hal qiladi.
Oflayn va darhol ishga tushirish
PWA miyasi xizmat ko'rsatuvchi xodim bo'lib, foydalanuvchi qurilmasiga o'rnatilgan JavaScript-fayl bo'lib, u dastur fayllarini yuklab olish, ularni keshga saqlash va keyinchalik kerak bo'lganda ularga xizmat ko'rsatish uchun javobgardir. Xizmat ko'rsatuvchi xodim o'rnatilgandan so'ng, u veb-ilovaga kerak bo'lgan har bir manba uchun tarmoq proksi-serveri kabi ishlaydi: uni tarmoqdan olish yoki mahalliy keshdan etkazib berishga qaror qilishi mumkin, bu esa dasturni oflayn rejimda va faqat bir necha millisekundalar, hatto foydalanuvchi ulangan bo'lsa ham, mahalliy dasturni ishga tushirishni taqlid qiladi.
Xizmat ko'rsatuvchi xodimni o'rnatish uchun sizning HTML hujjatingiz quyidagilarni o'z ichiga olishi kerak:
agar ('serviceWorker' navigatorda) navigator.serviceWorker.register ("sw.js");
Bu "sw.js" faylini joriy domendagi joriy papka uchun foydalanuvchilarning qurilmalariga o'rnatadi - bu "qamrov" deb nomlanuvchi tushuncha. O'rnatilgandan so'ng, uning doirasidagi har qanday URL-ga keyingi tashriflar ushbu xizmat xodimi tomonidan boshqariladi.
Aytaylik, bizda to'rtta faylga ega PWA mavjud: index.html, app.js, app.css va logo.png. Birinchi narsa, ushbu fayllarni sw.js faylidagi keshga o'rnatish.
const resurslari = ["index.html", "app.js", "app.css", "logo.png"]; o'zini o'zi. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (resources)));});
Keyin PWA har doim keshdan xizmat qilishi uchun biz xizmat xodimi ichidagi voqea-hodisani tinglashimiz va kesh siyosatini, masalan, avval quyidagi parcha bilan keshni ishlatishni hal qilishimiz kerak.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). keyin (res => res);
Bunday holda, foydalanuvchi har safar PWA-ga kirganda (ikkalasi ham brauzerdan yoki o'rnatilgan belgidan), vosita fayllarni keshdan oladi. PWA-larning mahalliy dasturlarga nisbatan afzalligi shundaki, o'zgarishlar yuz berganda qurilmalar barcha fayllarni qayta yuklab olishlari shart emas, faqat shaffof jarayon bilan o'zgargan fayl. Shuningdek, biz ilova qismlarini talab bo'yicha yuklab olishimiz mumkin.
Ammo serverda qaysi fayllar yangilanganligini qanday bilish mumkin, shunda ularni keshga almashtirishingiz mumkin? Agar buni boshqarish uchun past darajadagi xizmat ko'rsatuvchi xodimni yozishni istamasangiz, o'rnatilgan paketni yangilash uchun sizga xizmat ko'rsatuvchi xodimning avlodi va manba resurslari bilan yordam beradigan ochiq kodli kutubxonadan foydalanishingiz mumkin.
Qurilmada saqlash bosimi bo'lsa, PWA-ning fayllari o'chirilishini unutmang, agar mavjud bo'lsa doimiy saqlashni talab qilmasangiz:
if ('saqlash' navigatorda && 'persist' in navigator.storage) navigator.storage.persist ();
Chrome va aksariyat Android brauzerlarida sizning ilovangiz mavjud maydonning besh foizidan ko'prog'iga qodir emas; iOS-da bu faqat bitta xost uchun 50MiB (50MB yaqinida); Edge-da u umumiy xotira hajmiga ko'ra o'zgaruvchan va Windows do'konida u cheksizdir.
Birinchi darajali tajriba
Bizda miyamiz bor va endi yurak uchun vaqt keldi: veb-dastur manifesti. Veb-saytni PWA-ga aylantirishdan maqsad bu uning tez yoki oflayn rejimda mavjud bo'lishini ta'minlash emas, balki uni OS-da o'z belgisiga ega bo'lishini va boshqa har qanday o'rnatilgan dastur singari mustaqil tajribani taqdim etishdir.
Manifest - bu o'rnatish xatti-harakatlarini aniqlash uchun brauzer yoki ilovalar do'koni tomonidan ishlatiladigan PWA uchun metama'lumotlarni belgilaydigan JSON fayli.
Fayl sizning PWA uchun metadata sifatida bir nechta xususiyatlarni belgilaydi. Har bir OS ushbu xususiyatlarni o'qiydi va siz xohlagan tajribaga mos kelish uchun qo'lidan kelganicha harakat qiladi. Masalan, Android "displey: mustaqil" o'qiydi va odatdagi dastur tajribasini yaratadi. "Display: minimal-ui" yordamida u ko'rinadigan URL va TLS sertifikati bilan tajriba yaratadi - xavfsizlikka sezgir bo'lgan ilovalar uchun foydalidir. "Displey: to'liq ekran" yordamida u holat satrisiz yoki ko'rinadigan orqa tugmachasiz to'liq immersiv dasturlarni yaratadi. Piktogramma va ranglar to'plami dastlabki ekran yoki sarlavha satrlari sizning ilovangiz oynasini qanday ko'rishini belgilaydi.
Veb-App Manifest Generator yoki PWA Builder kabi ba'zi bir aniq generatorlar mavjud, ular yuqori aniqlikda (kamida 512 piksel) ta'minlasangiz, ular uchun siz turli xil o'lchamlarda belgini o'zgartiradi.
HTML hujjatingizda manifest faylini bog'lab qo'yganingizda, foydalanuvchilar brauzerga qarab turli xil usullardan foydalangan holda dasturni o'rnatishi mumkin, odatda Bosh ekranga qo'shish, O'rnatish yoki Faqat Qo'shish. Agar sizning PWA-ni Bing tekshirib ko'rsa, Microsoft uni Microsoft do'koniga avtomatik ravishda qo'shib qo'yadi, shunda Windows 10 foydalanuvchilari uni o'sha joydan o'rnatishi mumkin.
Ba'zi operatsion tizimlarda sizning PWA ulanishlarni olish qobiliyatiga ega bo'ladi. Bu shuni anglatadiki, foydalanuvchi dasturni o'rnatgandan so'ng, brauzerda yoki WhatsApp, Facebook kabi boshqa dasturlarda paydo bo'lishidan qat'i nazar, sizning manifestingiz doirasidagi har qanday URL brauzerda emas, balki sizning ilovangiz chegaralarida ochiladi. yoki elektron pochta manzili.
Agar biz bu erda belgilab qo'ygan PWA talablarini bajarsangiz, ba'zi platformalar atrof-muhit nishonlarini (odatda veb-sayt o'rnatilishi mumkinligini ko'rsatuvchi URL satrida kichik belgi) yoki veb-ilovalar bannerini taklif qiladi. Agar xohlasangiz, o'zingizning maxsus O'rnatish tugmachasini quyidagi parcha yordamida qo'shishingiz mumkin:
window.addEventListener ("beforeinstallpr ompt", function (e) {e.prompt (); // install native prompt ko'rsatiladi})
Agar PWA o'rnatilgan bo'lsa, "appinstalled" hodisasi oyna ob'ektida o'chiriladi, shunda siz uni tinglayotgan statistikani kuzatishingiz mumkin.
Ilovalar do'konlari
Brauzerdan o'rnatishning eng katta afzalliklaridan biri bu ilovalar do'konini tasdiqlash jarayonidan qochish yoki noshir bo'lish uchun pul to'lashdir. Bu aniq afzalliklarga ega, masalan, tezkor nashr qilish, kompaniyalar uchun shaxsiy dasturlarni yaratish yoki do'konlarda qabul qilinmasligi kerak bo'lgan ilovalar.
Ammo ba'zi kompaniyalar do'konda bo'lishni xohlashadi. Bugungi kunga kelib, PWA-ni rasmiy ravishda qabul qiladigan yagona do'kon Windows do'koni va kaiOS do'konidir. Yaxshiyamki, Capacitor (hozirda Alpha-da) yoki PWA Builder kabi vositalar yordamida biz boshqa platformalar uchun mahalliy paketlarni yaratishimiz va imzolashimiz mumkin.
Google Play do'konida Twitter Lite va Google Maps Go kabi ba'zi bir PWAlar allaqachon nashr etilgan, ular hozirda maxsus dasturlar ostida. Chrome ishonchli veb-harakatlar orqali Chrome 68-dan echim taklif qiladi. Shu vaqtdan boshlab biz PWA-ga ishga tushirgich bilan Android to'plamini (APK) yaratamiz va do'konga yuklaymiz. Windows 10-dagi Microsoft do'koni uchun PWA Builder sayti hozirda APPX Windows 10 paketini yaratishda yordam beradi. Veb-ko'rinishdan foydalanib, App Store uchun iOS ilovasini qo'lda yaratishingiz mumkin, ammo do'kon qoidalariga juda ehtiyot bo'ling.
Platformani birlashtirish
Yaxshilashni takomillashtirish usullarini qo'llash orqali siz ko'plab xususiyatlardan foydalanishingiz mumkin, jumladan push xabarnomalari, kamera va mikrofonga kirish, geolokatsiya, datchiklar, to'lovlar, almashish oynalari va oflayn saqlash. Ushbu funktsiyalarning barchasi to'g'ridan-to'g'ri brauzerning xavfsizlik modelida ishlaydi, shu jumladan ruxsat berish oynalari.
Biz Twitter, YouTube yoki WhatsApp-ni URL manzillari yoki WhatsApp: // kabi maxsus URI-lar orqali ochish kabi boshqa dasturlar bilan URI sxemalari orqali bog'lanishimiz mumkin.
Va nihoyat, Capacitor yordamida yoki Microsoft Store-da do'konda nashr etilgan mahalliy PWA-larni yaratishda biz deyarli har qanday mahalliy kodni bajarishga imkon beradigan mahalliy API-lar bilan bog'lanishimiz mumkin. Ushbu Windows 10 bilan integratsiyalashuv apparat ta'minotini o'z ichiga oladi, shuningdek, ishga tushirish uchun pin kabi variantlarni taklif qiluvchi OS bilan integratsiyani o'z ichiga oladi. Masalan, Twitter PWA har qanday foydalanuvchini boshlang'ich ekraniga mahkamlash imkonini beradi.
Dizayn va UX muammolari
PWA-larni loyihalashtirishning o'ziga xos muammolari bor, shuning uchun bir muncha vaqtni tadqiq qilish, iloji boricha sinovdan o'tkazish va quyidagilarni hisobga olish kerak:
- Foydalanuvchilar dasturga o'xshash tajribalarni kutishadi.
- O'rnatish jarayoni hali ham yangi, shuning uchun dasturni qanday o'rnatishni tushuntirish uchun qo'shimcha harakatlar qilishimiz kerak.
- Ilovani orqa fonda foydalanuvchilarning o'zaro ta'sirisiz yangilash juda zo'r, ammo UX uchun biroz qiyinchiliklar tug'diradi.
- Ish stolida sezgir veb-dizayn yangi chegarani egallaydi, chunki PWA oynalari kichik, mobil ko'rinishga qaraganda kichikroq bo'lishi mumkin. Bu shuni anglatadiki, bugungi kunda Chrome OS-da ko'rinib turganidek, ushbu format uchun aniq ko'rinishlarni yoki kichik vidjetlarni yaratishimiz kerak.
- Push-bildirishnomalar faqat foydalanuvchiga qo'shimcha qiymat qo'shishi kerak, shuning uchun kerakli vaqtda so'rashni o'rganing va foydali yoki qiziqarli bo'lmagan xabarlarni yuborish imkoniyatini yo'qotmang.
- Biz veb-ishlash uchun va oflayn kirish uchun dizayn qilishimiz kerak.
PWAlar yili
Bu yil iOS va ish stoli qo'shilishi bilan PWAlar bugun hamma joyda mavjud. Ammo biz ularning sayohati yangi boshlanayotganini yodda tutishimiz kerak, shuning uchun tez-tez o'zgarib turishini kuting va platforma rivojlanib borayotganida ajoyib foydalanuvchi tajribasini taqdim etish uchun o'zingizni eng yangi texnika va g'oyalar bilan yangilab turing.
Ushbu maqola dastlab 308-sonda nashr etilgan to'r, veb-dizaynerlar va ishlab chiquvchilar uchun dunyodagi eng ko'p sotiladigan jurnal. 308 sonini bu erda sotib oling yoki obuna bo'ling.
