IOS-dagi Progressive veb-ilovalari bu erda

IOS 11.3 bilan Apple jimgina "Progressive Web Apps" (PWAs) g'oyasi asosida yangi texnologiyalarning asosiy to'plamini qo'llab-quvvatladi. Ular qanday ishlashini ko'rish vaqti keldi, ularning qobiliyatlari va qiyinchiliklari nimada va siz allaqachon e'lon qilingan PWA bo'lsa, nimani bilishingiz kerak.

Ushbu ilova PWA bo'lib, u iPad-da to'liq ekranli oflayn rejimda ishlaydi. Shuningdek, u iPad do'konida App Store-dan har qanday boshqa mahalliy dastur kabi paydo bo'ladi.

Yangilanish: ushbu maqola hali ham iOS 12 uchun 100% tegishli.

Agar siz bu erga kelgan bo'lsangiz va siz hali ham PWA nima ekanligini bilmasangiz, unda hech qanday noyob yoki aniq ta'rif yo'qligini aytaylik. Ammo veb-texnologiyalar yordamida yaratilgan ilova "paketlamasdan yoki imzolanmasdan" oflayn rejimda ishlashi mumkin va ixtiyoriy ravishda operatsion tizimga o'rnatilishi mumkin, u erda u har qanday boshqa dastur kabi ishlaydi.

(Reklama: Men turli tadbir va shaharlarda PWA bo'yicha treningni o'zlashtiryapman)

Ko'pgina platformalarda App Store jarayoni mavjud emas - faqat Edge / Windows 10 hozirda PWA-larni do'konda bo'lishga majbur qilmoqda.

Shunday qilib, siz haqsiz, endi iOS-da App Store-ning roziligisiz ilovalarni o'rnatishingiz mumkin. Ehtimol, Apple bu yangi qobiliyat haqida umuman aytmagan sabablaridan biri bo'lishi mumkin; ular foydalanuvchilarni chalkashtirishni xohlamasliklari mumkin. Hatto Safari-dagi nashrlarda ham texnologiyalar haqida aytilmagan.

Google Maps ilovasi va PWA versiyasi o'rtasidagi farqni ayta olasizmi?
Yangilanish: endi iOS 12.2 ba'zi o'zgarishlar bilan chiqarildi; qo'shimcha maqolalar uchun ushbu maqolani ham tekshiring: https://medium.com/@firt/whats-new-on-ios-12-2-for-progressive-web-apps-75c348f8e945

Apple baribir PWA yaratuvchisi emasmidi?

Bu erda halol bo'lish kerak; Google Chrome jamoasi bilan PWA atamasini birlashtirgan bo'lsa-da, g'oya dastlab Safari-da asl iPhone OS-da paydo bo'ldi. 2007 yilda Stiv Djobs WWDC-da "yana bir narsani" e'lon qildi: asl iPhone uchun qanday qilib dasturlarni yaratish va bu ajablanib bo'ldi, veb-ilovalar! App Store asl yo'l xaritasida yo'q edi va SDK qurilmaning birinchi yilida mavjud emas edi. Apple nuqtai nazaridan PWA-lar bugungi kunda shunchaki “bosh ekrandagi veb-ilovalar” bo'lib, ikonka esa WebClip deb nomlanadigan narsadir.

Agar xohlasangiz, o'tgan yili men etkazgan ravon konferentsiya nutqini tekshiring; Men buni soat 10:50 da bir daqiqaga aytdim

Bundan tashqari, 11 yil oldin bu g'oyaga etarlicha e'tibor berilmagani va Apple ushbu platformani yangilashni unutganligi aniq, shuning uchun 10+ yil davomida u notinch va nomuvofiq edi. Bir necha yil o'tgach, boshqa platformalar bu fikrni Nokia N9-dagi MeeGo, so'ngra Android-dagi Chrome brauzerini blokirovka qildilar.

Chrome, asosan, Servis ishchilari va Web App Manifest xususiyatlari bilan yaxshiroq tajriba taklif qilish uchun texnologiyalarni rivojlantirishga yordam berdi. IOS 11.3-dan boshlab bugun (2018 yil 30-mart) Apple ushbu ikkita xususiyatni qo'llab-quvvatlaydigan Chrome, Firefox, Samsung Internet, UC brauzer va Opera (asosan Android-da). Servis ishchilarini qo'llab-quvvatlaydigan boshqa brauzerlar, ammo Web App Manifest qo'llab-quvvatlashi bu yil uchun mo'ljallangan.

Stiv Djobs PWA-larni (boshqa nom bilan) WWDC 07-da birinchi iPhone bilan namoyish qilmoqda

Iltimos, kuting, shunda ilova biron bir App Store do'koni sifat sinovidan o'tmadi, to'g'rimi?

Ha, bu to'g'ri. Biroq, dastur faqat brauzer yoki Web platformaning xavfsizligi va ishlash modeli ostida ishlaydi. Bu shuni anglatadiki, do'konda tasdiqlanmagan ilovalarni, masalan, kompaniyangiz ishchilari uchun ichki ilovani (va ha, shuningdek, kattalar tarkibini) "nashr qilishingiz" mumkin, ammo siz iPhone-dagi Face ID kabi toza xususiyatlarga kira olmaysiz. Ko'tarilgan haqiqat uchun X yoki ARKit. Yoki hech bo'lmaganda, veb-platformada ushbu yangi xususiyatlarni qo'lga kiritishini kutish kerak.

PWA Safari ichida har qanday veb-sayt kabi yoki tizimdagi boshqa dasturlar kabi avtonom rejimda ishlashi mumkin. Agar siz PWA-larni Web View-dan foydalanayotgan-qilmayotganingizga shubha qilsangiz, Safari yoki o'rnatilgan belgi bunday emas, lekin boshqa brauzerlarda yoki Facebook-da o'z In-App-brauzerida ko'rib chiqishda shunday bo'ladi.

IOS-da PWA-larning imkoniyatlari

IOS-dagi Veb-platforma orqali quyidagilarga kirishingiz mumkin:

  • Geolokatsiya
  • Sensorlar (Magnetometr, Accelerometer, Giroskop)
  • Kamera
  • Ovoz chiqishi
  • Nutq sintezi (faqat naushniklar bilan)
  • Apple Pay
  • WebAssembly, WebRTC, WebGL va boshqa ko'plab eksperimental xususiyatlar bayroq ostida.
Ushbu piktogrammalarning barchasi iPhone-dagi PWA ekanligini aniqlay olasizmi?

Mahalliy iOS ilovalari bilan taqqoslaganda cheklovlar

  • Ilova faqat 50 Mbgacha oflayn ma'lumot va fayllarni saqlashi mumkin
  • Agar foydalanuvchi bir necha hafta davomida ilovadan foydalanmasa, iOS ilova fayllarini ozod qiladi. Belgisi hali ham asosiy ekranda bo'ladi va unga kirish orqali dastur yana yuklab olinadi
  • Bluetooth, seriyali, mayoqchalar, Touch ID, yuz identifikatori, ARKit, altimeter sensori, batareya ma'lumotlari kabi ba'zi funktsiyalarga kirish huquqi
  • Orqa fonda kodni bajarishga ruxsat yo'q
  • Shaxsiy ma'lumotlarga (kontaktlar, orqa fon manzili) va mahalliy ijtimoiy ilovalarga kirish huquqi yo'q
  • In App Payments va boshqa Apple asosidagi xizmatlarga kirish imkoni yo'q
  • IPad-da, Side yoki Split Views-ni ekranni boshqa ilovalar bilan almashish bilan ishlashga ruxsat yo'q, PWA-lar har doim butun ekranni oladi
  • Push-bildirishnomalar yo'q, belgi nishoni yoki Siri-ning integratsiyasi yo'q
Agar sizda PWA belgi va Tinder nomi o'rnatilgan bo'lsa ham, Siri uni topa olmaydi

PWA-lar iOS-da emas, balki Android-da nima qila oladi

  • Android-da siz 50 Mb dan ko'proq ma'lumotni saqlashingiz mumkin
  • Ilovadan foydalanmasangiz, Android fayllarni o'chirmaydi, ammo ularni saqlash bosimi ostida fayllarni o'chirib tashlashi mumkin. Bundan tashqari, agar foydalanuvchi tomonidan o'rnatilgan yoki ko'p ishlatilgan bo'lsa, PWA doimiy saqlashni talab qilishi mumkin
  • BLE qurilmalari uchun Bluetooth-ga kirish
  • Tizim orqali ulashish oynasiga kirish uchun Web Share
  • Nutqni aniqlash
  • Fonni sinxronlash va veb-surish haqida bildirishnomalar
  • Web App Banner foydalanuvchini dasturni o'rnatishga taklif qilish uchun
  • Siz ekranni va xohlagan yo'nalishingizni (ozgina) sozlashingiz mumkin
  • WebAPK va Chrome yordamida foydalanuvchilar PWA-ning bir nechta namunalarini o'rnatolmaydilar
  • WebAPK va Chrome-da PWA-lar Sozlamalar ostida paydo bo'ladi va siz ma'lumotlardan foydalanishni ko'rishingiz mumkin; iOS-da hamma narsa Safari-da paydo bo'ladi
  • WebAPK va Chrome yordamida PWA o'z URL-manzilini boshqaradi, shuning uchun agar siz PWA-ga ulansangiz, u mustaqil rejimda va brauzer oynasida ochiladi.

PWA-lar nimani Android-da emas, balki iOS-da qila oladi

  • Foydalanuvchilar belgini o'rnatishdan oldin uni o'zgartirishlari mumkin
  • Ularni konfiguratsiya profilida sozlash mumkin, shuning uchun korporativ foydalanuvchilar kompaniyadan PWA yorliqlarini olishlari mumkin (bu juda yaxshi!). Safari bu xususiyat uchun WebClip atamasidan foydalanadi; ammo, u Web App Manifestni o'qiyotganga o'xshamaydi (hujjatlar bo'yicha)
Konfiguratsiya profillari WebClips yoki PWA piktogrammalarini o'z ichiga olishi mumkin

Ammo agar App Store bo'lmasa, PWA-ni qanday o'rnatasiz?

Bu iOS-dagi eng muhim muammolardan biridir, chunki Safari-dan hech qanday takliflar yoki takliflar bo'lmaydi (Android-dagi Web App Bannerlari deb nomlanadi). Shunday qilib, foydalanuvchi qandaydir tarzda Safari-da sizning PWA URL-manzilingizga o'tishi kerak, so'ngra "Almashish" belgisini qo'l bilan bosib, "Uy ekraniga qo'shish" -ni bosing. Siz tashrif buyurgan veb-sayt PWA ekanligiga ishora qilmaydi.

Tinder.com saytiga kirganingizda, yuqori qismida joylashgan ilova bannerini e'tiborsiz qoldirishingiz mumkin va Almashish, Uy ekraniga qo'shish-ni bosing. Agar siz foydalanuvchiga o'rnatish haqida ko'rsatma bersangiz, tugma tizim tiliga qarab mahalliylashtirilganligini yodda tuting

Shuningdek, App Store-da mavjud bo'lgan qo'shimcha soxta brauzerlar, masalan, Chrome, Firefox, Brave yoki Edge PWA-ni o'rnatolmaydi yoki Service Workers-dan foydalana olmaydi.

O'rnatilgandan so'ng, u asosiy ekrandagi boshqa belgiga o'xshaydi. Ammo 3D Touch menyusi bo'lmaydi. Va agar siz yana bir xil PWA-ni o'rnatsangiz, sizda xuddi shu PWA-ni ko'rsatadigan boshqa belgi bo'ladi (xayriyat, o'rnatilgan fayllar almashiladi).

Bundan tashqari, ko'plab veb-ilovalarda mahalliy ilovani App Store-dan o'rnatish uchun havola mavjud va u hattoki PWA ichida ham mavjud, masalan Tinder misolida:

Menda allaqachon dastur bor, to'g'rimi?

Menda allaqachon PWA bor, u darhol iOS-da ishlaydimi?

Sizning foydalanuvchilaringiz iOS 11.3-ni yangilagandan so'ng darhol PWA-ni o'rnatish mumkin bo'ladi. Siz iOS-ga obuna bo'lishingiz shart emas. O'rnatish uchun har bir PWA mavjud. Ammo bu hamma narsa kutilganidek ishlaydi degani emas.

Uber PWA juda chiroyli ko'rinadi. Ammo, agar siz

Agar siz buni o'qiyotgan bo'lsangiz, beta-versiyadagi avvalgi maqolamni allaqachon ko'rgan bo'lishingiz mumkin: Cupertino bizda muammo bor. Afsuski, beta-versiya paytida yuz bergan xatolar va muammolarning aksariyati haligacha biz bilan birga yakuniy versiyada

Agar siz biron bir ish qilmasangiz, PWA qora holatlar satrida qora rangga aylanishi mumkin, shuning uchun foydalanuvchi vaqtni, batareya holatini yoki biron bir bildirishnomani ko'rmaydi

Nima ishlamaydi

  • Displey: to'liq ekran va displey: minimal-ui iOS-da ishlamaydi; to'liq ekran avtoulovni mustaqil ishga tushiradi va minimal-ui Safari-ga yorliq bo'ladi. Siz to'liq ekranga o'xshash narsalarni olishingiz mumkin (holatlar paneli mavjud, ammo sizning ilovangizda) qopqoqqa sig'adigan ko'rinishni kengaytirish kengaytmasi yoki eskirgan meta-teg yordamida.
  • Agar siz Background Sync-ga ishonsangiz, sizda zaxira nusxasini yaratish kerak
  • PWA yo'nalishini qulflashning hech qanday usuli yo'q
  • Holat panelidagi uslub rangi ishlamaydi; qora yoki oq holatlar satrlari uchun eskirgan meta teglaridan foydalanishingiz mumkin yoki mavzu rangini aks ettirish uchun CSS / HTML-dan foydalanishingiz mumkin.
Starbucks PWA-da
  • Agar sizning PWA-da orqa imo-ishoralar yoki tugmalar bo'lmasa, foydalanuvchi ekranlar o'rtasida harakat qila olmaydi.
  • Android-dagi ikonkangiz iOS-da dahshatli ko'rinishi mumkin, chunki Apple shaffof piktogrammani qo'llab-quvvatlamaydi, shuning uchun uni tekshirib ko'ring.
Google Keep PWA Web App Manifest ikonkalariga ishonadi, shuning uchun iOS-da bu shunchaki ekran tasviridir. Siz Apple-ning nostandart havolasi yorlig'i orqali iOS piktogrammalarini taqdim qilishingiz kerak
  • Bundan tashqari, iOS Web App Manifest-dagi piktogrammani emas, balki "apple-touch-icon" bog'lanishidan oladi. Agar havola yorlig'ini taqdim qilmasangiz, ikonka uchun skrinshot ishlatiladi (Google Keep PWA misoliga qarang)
  • Splash ekrani yo'q, shuning uchun manifestning ko'p rang xususiyatlari e'tiborga olinmaydi
  • Hech qanday aniq voqea sodir bo'lmaydi, shuning uchun agar siz ushbu kanallar orqali o'rnatishni kuzatayotgan bo'lsangiz, u iOS-da ishlamaydi (lekin buning o'rniga navigator.standalone-ni tekshirishingiz mumkin).

Nimani yodda tutish kerak

  • PWA seanslar orasidagi holatni saqlamaydi, agar foydalanuvchi PWA-dan chiqsa, u qaytib kelganida qayta ishga tushiriladi, shuning uchun agar foydalanuvchi elektron pochta, SMS yoki ikki faktorli autentifikatsiyani tasdiqlashi kerak bo'lsa, unda to'g'ri echimni taklif qilish uchun aql.
Barcha faol bo'lmagan PWA-laringiz nima bo'lishidan qat'i nazar, oq ekran sifatida paydo bo'ladi. Esingizda bo'lsin, ular ishlamayapti va agar ularga qaytsangiz, ular noldan boshlanadiIPadda bir xil oq ekran muammosi mavjud
  • Tarixdagi PWA-larda hech qanday ekran rasmlari yo'q, shuning uchun ularning barchasi, afsuski, oq ekranlarga o'xshaydi
  • Ilovangiz mustaqil rejimda ishlaganda xatolar mavjud. Sinov uchun Safari-ga ishonmang.
Pasa (NWA) uchun Nasa maydonini ishlatishga urinish ba'zi UX sirlarini beradi
  • Agar siz ilovangiz uchun iPhone X notch maydonidan foydalanmoqchi bo'lsangiz, HTML va CSS-da ba'zi o'zgarishlar qilishingiz kerak. Agar siz buni to'g'ri qilmasangiz, g'alati narsalar yuz berishi mumkin
  • Ba'zida siz bosh ekranga qo'shasiz va manifest ishlatilmaydi, shuning uchun shunchaki yorliq o'rnatilgan .
Starbucks markali Google Xaritalar? Yo'q, bu siz ketma-ket ochiq PWA-larni ishlatganingizdan keyingina iOS; tarixdagi g'alati narsalarni keltirib chiqaradi, bitta dastur noto'g'ri URL manzilini yuklaydi
  • Safari va asosiy ekran yorlig'i bir xil Service Worker ro'yxatga olishlarini (lekin bu emas) va keshlangan fayllarni almashadi. Safari View Controller (masalan, Twitter-dagi In-App-brauzer) xizmat xodimlari va keshni qo'llab-quvvatlaydi, ammo seans yopilgandan so'ng barcha ma'lumotlarni o'chirib tashlayotganga o'xshaydi.
  • Har bir soxta brauzer, masalan, Chrome yoki Firefox va WebView-dan foydalanadigan har bir dastur, masalan, Facebook In-App brauzeri Servis ishchilarini qo'llab-quvvatlamaydi (u beta paytida ishlagan), shuning uchun hech qanday fayl o'rnatilmaydi. Menimcha, WKWebView-ga API egasi xizmat egalari bilan nima qilishni hal qilishiga ruxsat berish uchun kerak bo'lishi mumkin, ammo ... kim biladi.
Safari TP-dan foydalanib, siz Safari-da va
  • IOS-da Service Workers-ni tuzatish uchun MacOS 10.11.5, 10.12.6 va 10.13.4 yangilanishlarida mavjud Safari Technology Preview yoki Safari 11.1-ni o'rnatishingiz kerak.
Xizmat ishchisining inspektori hali ham eksperimental hisoblanadi; masalan, Kesh saqlash tarkibini ko'rish uchun qo'llab-quvvatlanmaydi
  • Xizmat ishchilarini Sozlamalardan Eksperimental texnologiyalar ostida o'chirib qo'yish mumkin (u standart holatda yoqilgan)
Bu bo'sh ilova nima?
  • Ba'zan, siz bir vaqtning o'zida ko'plab PWA-larni ochganingizda, iOS vazifalar paneli aqldan ozib, tarixda belgi va sarlavhasiz "sharpa" dasturlarini namoyish etadi.

IOS-da PWA-da biron bir xato topdingizmi? Sharhlarda menga chiziq qo'ying va men bu erda joylashtiraman yoki WebKit guruhiga xato haqida hisobotni to'ldiraman. Agar siz maqolaga oid yangiliklarni olishni istasangiz, meni Twitter-da @firt-da kuzatib boring. Agar siz amaliy mashg'ulotlarga qiziqsangiz, mashg'ulotlar jadvalini tekshiring; biz har bir platformada ko'p odamlar etishmayotgan narsalarni, shu jumladan iOS-ga qanday etib borishni qamrab oladigan PWA yaratamiz

Maksimiliano Firtman - mobil + veb-ishlab chiquvchi, trener, notiq va yozuvchi. U ko'plab kitoblarning, shu jumladan ,Reilly Media tomonidan nashr etilgan High Performance Mobile Web-ning muallifi. Dunyo miqyosidagi konferentsiyalarda tez-tez so'zlaydigan va u mobil-veb-hamjamiyatdagi faoliyati uchun tan olingan. U uyali aloqa, HTML5, PWA va dunyoning eng yaxshi kompaniyalari uchun ishlash bo'yicha dars beradi. U ko'plab kompaniyalarda va onlayn nashriyotlarda "Linked Learning / Lynda" va SafReilly uchun Safari kabi bir nechta Progressive Web Apps seminarlari va treninglarini o'tkazdi. Twitter: @firt