Мазмун
- PWAлардын көтөрүлүшү
- Бүгүнкү күндө иштеп жаткан PWA
- Орнотуу
- Оффлайн жана токтоосуз ишке киргизүү
- Биринчи класстагы тажрыйба
- Колдонмолор дүкөндөрү
- Платформанын интеграциясы
- Дизайн жана UX кыйынчылыктары
- PWAs жылы
Бир нече жыл мурун жооптуу веб-дизайн стол менен мобилдик сайттардын ортосундагы ажырымды жапкандай эле, веб-колдонмолордун прогрессивдүү ыкмалары учурда веб менен колдонмо дүйнөсүнүн ортосундагы ажырымды жоюуда. Колдонуучунун тажрыйбасынан улам, мобилдик колдонмолордон жумушчу столго чейин тездик менен жакындашып, кыйла ылдамыраак, натыйжалуу интернет өнүгүп жаткандай сезилет - бирок анын түпкү генетикалык кодексине олуттуу өзгөрүүлөр болбосо керек.
- Прогрессивдүү Веб Колдонмону кантип курууга болот
Кыязы, буга айрым олуттуу тандалма кысымдар себеп болууда. Биринчиден, ар бир текче үчүн жергиликтүү колдонмолорду түзүү сөзсүз түрдө ресурстарды натыйжалуу пайдалануу эмес: колдонуучулар жүздөгөн ири колдонмолор менен өткөрмө жөндөмүн жана баалуу диск мейкиндигин текке кетиришет жана компаниялар колдонмолорду жаратуудан баш тартуу үчүн гана көп акча коротушат алардын биринчи нускаларынан кийин. Жана бул колдонмолордун көпчүлүгү жөн гана веб-контенттин айынан иштелип чыккан: веб кызматтардан же контентти башкаруу тутумунан келген маалымат.
Прогрессивдүү веб колдонмонун аныктамасы конкреттүү эмес. PWA бул веб-колдонмо, ал бир нече жаңы API жана жөндөмдөрдү колдонуп, веб-платформада өркүндөтүлгөн өркүндөтүүнү колдонуп, ошол эле код базасы менен ар бир платформада колдонмо сыяктуу тажрыйбаны сунуш кылат. Бул сиздин колдонуучулар үчүн мыкты колдонмо сыяктуу тажрыйбаны жараткан мыкты тажрыйбалардын жана API колдонуунун топтому, андыктан сизде PWA бар же жок болгон сыяктуу эмес; бул сиздин сайт аздыр-көптүр PWA сыяктуу.
Жаңы сайт курууну баштайсызбы? Вебсайт куруучусун колдонуп көрүңүз. Ошондой эле татыктуу веб-хостинг кызматынан керектүү колдоону алганыңызга ынаныңыз. Же бир аз башкача нерсени билүү үчүн, мыкты булут сактагыч боюнча колдонмобузду караңыз.
PWAлардын көтөрүлүшү
PWA деген аталыш 2015-жылы Алекс Расселдин Chrome командасында Google компаниясында иштеп, Рухту жоготпостон Табулатураны Качыруу деген макаласында пайда болгон, бирок алардын сапары ал жерден башталган эмес. Мурда Microsoft тарабынан 1999-жылы түзүлгөн HTML тиркемелери (HTA), ошондой эле Nokia, BlackBerry жана башка компаниялардын көптөгөн веб-колдонмо платформалары бар болчу. Андан кийин, 2007-жылы, Стив Джобс ошол учурда түпнуска iPhone үчүн тиркемелерди түзүүнүн бирден-бир жолу болгон: башкача ат менен болсо дагы, PWAs сунуш кылган. Chrome ошол жерден башталып, бир нече жылдан кийин API'лерин өркүндөтүп, PWA аталышын ойлоп тапты.
Веб-контентти колдонмолор дүйнөсүнө алып келүүгө аракет кылган буга чейинки көптөгөн ийгиликсиз окуялардан улам, эмне үчүн ал азыр иштейт деп ойлойбуз? Биринчи кезекте, Microsoft, Google, Apple жана Mozilla сыяктуу PWA технологияларын жайылтуучу технологияларды жайылтуу менен алектенип жаткан компанияларга байланыштуу. Ошондой эле, веб-платформанын көрсөткүчтөрү жакшы иштелип чыккан PWA менен жергиликтүү колдонмолорду салыштырганда эч кандай айырмачылык болбой турган деңгээлге жетти. Мындай шарттар буга чейин болгон эмес жана бул интернет коомчулугу PWAs убактысы келди деп чечти.
Бүгүнкү күндө иштеп жаткан PWA
Бүгүнкү күндө PWAлар толугу менен иштейт жана орнотулат:
- Көпчүлүк браузерлер менен иштөөчү Android, Chrome мыкты тажрыйбаны сунуш кылат
- iOS менен Safari
- Chromebooks
- Microsoft Store дүкөнүнөн Windows 10
- KaiOS менен өзгөчөлөнгөн телефондор - Firefox OSтин айры - учурда Индияда миллиондогон колдонуучулар үчүн жеткиликтүү
Ушул жылдын аягында Chrome аркылуу macOS, Windows жана Linux колдоого алынат. Бүгүн колдонуп көргүңүз келсе, 'Desktop PWA' сынамык желеги катары жеткиликтүү. Дүкөндү колдонбостон Windows'то Edge орнотуу кийинчерээк болот, бирок белгилүү бир убакыт алкагы аныкталбаса дагы.
Эгерде сиз тизмени кайрадан окуп чыксаңыз, анда кийинки айларда толугу менен орнотула турган PWAларды колдоого алган же колдоого ала турган платформалардын бардыгын көрө аласыз. PWA жөн гана шайкеш браузерлерде гана иштей турган үстү жагында өзгөчөлүктөрү бар веб-сайт болгондуктан, биз анын негизги иштешинен тартып бардык браузерлерге шайкеш келет деп айта алабыз.
Ошондой эле, PWAлар учурда ар кандай алкактарга арналган CLIлердин көпчүлүгүнөн, анын ичинде Angular 6+ CLI, React Create App, PWA Starter Kit жана Polymer жана Preact CLIден түзүлгөн. Акыры, Ionic Framework командасы ар бир колдонмо дүкөнүндө жергиликтүү PWA мүмкүнчүлүгүн камсыз кылган, ачык булактуу Cordova алмаштыруучу Capacitor идеясын сунуш кылды.
Орнотуу
PWAнын маанилүү аспектилеринин бири - тиркемени орнотуу. Бул жараян эки кошумча кадам менен жүргүзүлөт: колдонмонун файлдарын жүктөө жана оффлайн режиминде сактоо жана ОСко сүрөтчөнү орнотуу. Эки кадам тең милдеттүү эмес болгондуктан, сиз браузерде оффлайн режиминде иштей аласыз же оффлайн режиминде орнотпостон сүрөтчөнү сунуштай аласыз. Бирок чыныгы PWA экөөнү тең камтышы керек: аны HTTPS астында TLS менен тейлөө керек жана колдонуучу аны браузерде же өзүнүн орнотулган сүрөтчөсүндө колдоноорун өзү чечет.
Оффлайн жана токтоосуз ишке киргизүү
PWAнын мээси - бул тейлөө кызматкери, колдонуучунун шайманына орнотулган JavaScript файлы, ал колдонмонун файлдарын жүктөө, кэшке сактоо жана кийинчерээк керек болгондо аларды тейлөө үчүн жооп берет. Тейлөө кызматкери орнотулгандан кийин, ал веб-колдонмо талап кылган ар бир булак үчүн тармактык прокси сыяктуу иштейт: ал аны тармактан алууну же жергиликтүү кэштен жеткирүүнү чечиши мүмкүн, бул колдонмону оффлайн режиминде жана ошондой эле колдонуучунун түпнуска колдонмосун иштетүүнү туурап, байланышы бар болсо дагы, бир-эки миллисекунд.
Тейлөө кызматкерин орнотуу үчүн HTML документинде төмөнкүлөр камтылышы керек:
if ('serviceWorker' in navigator) navigator.serviceWorker.register ("sw.js");
Учурдагы домендеги учурдагы папка үчүн колдонуучулардын түзмөктөрүнө "sw.js" файлын орнотот - масштабы деп аталган түшүнүк. Ал орнотулгандан кийин, анын чектериндеги каалаган URL даректерине кийинки барууларды ошол кызмат кызматкери башкарат.
Төрт файлдан турган PWA бар дейли: index.html, app.js, app.css жана logo.png. Биринчи нерсе, ошол файлдарды sw.js файлындагы кэшке орнотуу.
const ресурстар = ["index.html", "app.js", "app.css", "logo.png"]; өзүн. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (ресурстар)));));
Андан кийин PWA ар дайым кэштен тейлениши үчүн, тейлөө кызматкеринин ичиндеги окуяны угушубуз керек жана кэш саясатын колдонушубуз керек, мисалы, биринчи кезекте төмөнкү үзүндү менен кэш.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). then (res => res);
Бул учурда, колдонуучу PWAга кирген сайын (экөө тең браузерден же орнотулган сүрөтчөдөн), кыймылдаткыч файлдарды кэштен алат. PWAлардын жергиликтүү колдонмолорго салыштырмалуу артыкчылыгы, өзгөрүүлөр болгондо, түзмөктөр бардык файлдарды кайра жүктөбөйт, болгону ачык процесс менен өзгөргөн файл. Ошондой эле, биз колдонмонун айрым бөлүктөрүн талап боюнча жүктөп алабыз.
Бирок кыйынчылык - серверде кайсы файлдар жаңыртылганын кайдан билесиз, ошондо аларды кэшке алмаштыра аласыз? Эгер сиз муну башкаруу үчүн төмөнкү деңгээлдеги кызматкерди жазгыңыз келбесе, анда орнотулган топтомду жаңыртуу үчүн кызмат кызматкеринин жана манифесттин ресурстарынын жаралышына жардам бере турган Workbox ачык китепканасын колдонсоңуз болот.
Түзмөктө сактагычта кысым болсо, PWA файлдарыңыз жок кылынарын, эгерде туруктуу сактагычты сурабасаңыз, анда билиңиз:
if ('storage' in navigator && 'persist' in navigator.storage) navigator.storage.persist ();
Chrome жана көпчүлүк Android браузерлеринде, колдонмоңуз бош орундардын беш пайыздан ашыгын колдоно албайт; iOSто бир хостко 50MiB (50MB жакын) гана туура келет; Edgeде ал жалпы эс тутумунун көлөмүнө жараша өзгөрүлөт жана Windows Дүкөнүндө ал чексиз.
Биринчи класстагы тажрыйба
Бизде мээ бар, эми жүрөккө кез келди: веб-колдонмо манифест. Веб-сайтты PWAга айлантуунун максаты - бул анын тез же оффлайн режиминде жеткиликтүүлүгүн камсыз кылуу гана эмес, ошондой эле ОСто өзүнүн белгиси болушун камсыз кылуу жана башка орнотулган колдонмолор сыяктуу толугу менен өз алдынча тажрыйбаны сунуштоо.
Манифест - бул орнотуу иш-аракетин аныктоо үчүн браузер же колдонмо дүкөнү тарабынан колдонулган PWA үчүн метадайындарды аныктаган JSON файлы.
Файл бир нече касиеттерди сиздин PWA үчүн метадайындар катары аныктайт. Ар бир OS бул касиеттерди окуп чыгып, сиз жактырган тажрыйбага дал келүү үчүн колдон келген аракетин жасайт. Мисалы, Android 'дисплей: автономдуу' деп окуп, колдонмонун кадимки тажрыйбасын жаратат. 'Display: minimal-ui' менен, көрүнөө URL жана TLS сертификаты менен тажрыйба жаратат - коопсуздукту сезгич колдонмолор үчүн пайдалуу. "Дисплей: толук экран" менен ал толугу менен иммерсивдүү колдонмолорду түзүп, абал тилкеси же көрүнөө артка баскычы жок кылат. Сөлөкөттөрдүн жана түстөрдүн топтому экрандын же аталыш тилкесинин колдонмоңуздун терезесин кандайча издей тургандыгын аныктайт.
Веб App Manifest Generator же PWA Builder сыяктуу айрым манифест генераторлор бар, алар сизге жогорку разряддуу болсо (минимум 512 пиксель) сунуштаса, анда ал сиз үчүн сөлөкөттү ар кандай чечимдерде өзгөртө алат.
HTML документинде манифест файлы шилтемеленгенде, колдонуучулар колдонмону браузерге жараша ар кандай ыкмаларды колдонуу менен орното алышат, адатта Үй экранына кошуу, Орнотуу же Жөн эле Кошуу. Эгерде сиздин PWA Bing тарабынан жөрмөлөп чыкса, анда Microsoft аны Microsoft Дүкөнүнө автоматтык түрдө кошот, ошондо Windows 10 колдонуучулары аны ошол жерден орнотуп алышат.
Айрым операциялык тутумдарда сиздин PWA шилтемелерди басып алуу мүмкүнчүлүгүнө ээ болот. Бул колдонуучу колдонмону орнотуп алгандан кийин, сиздин манифесттин алкагындагы каалаган URL браузерде же WhatsApp, Facebook сыяктуу башка колдонмолордо пайда болгонуна карабастан, браузерде эмес, сиздин колдонмоңуздун чектеринде ачылат дегенди билдирет. же электрондук почта.
Эгер биз бул жерде аныктап жаткан PWA талаптарын аткарсаңыз, кээ бир платформалар курчап турган белгини (адатта, URL тилкесинде желе орнотула тургандыгын көрсөткөн кичинекей сүрөтчө) же веб-колдонмо баннерин сунуш кылышат. Эгер кааласаңыз, анда өзүңүздүн жеке орнотуу баскычын төмөнкү үзүндү аркылуу кошо аласыз:
window.addEventListener ("beforeinstallpr ompt", function (e) {e.prompt (); // install native prompt})
Эгер PWA орнотулган болсо, анда "appinstalled" иш-чарасы терезе объектисине күйгүзүлөт, андыктан сиз аны угуп жаткан статистиканы көзөмөлдөсөңүз болот.
Колдонмолор дүкөндөрү
Браузерден орнотуунун эң чоң артыкчылыктарынын бири - колдонмолор дүкөнүн жактыруу процессинен баш тартуу же жарыялоочу болуу үчүн акы төлөө. Бул тезинен жарыялоо, компаниялар үчүн жеке колдонмолорду түзүү же дүкөндөрдө кабыл алынбашы керек тиркемелер сыяктуу ачык-айкын артыкчылыктар менен коштолот.
Бирок кээ бир компаниялар дүкөндө болгусу келет. Бүгүнкү күндөн баштап PWAны расмий түрдө кабыл алган дүкөндөрдүн катарында Windows дүкөнү жана kaiOS дүкөнү бар. Бактыга жараша, Capacitor (азыркы учурда Alpha) же PWA Builder сыяктуу шаймандар менен биз башка платформалар үчүн түпнуска пакеттерди түзүп, кол коё алабыз.
Буга чейин Google Play дүкөнүндө жарыяланган айрым PWAлар бар, мисалы, Twitter Lite жана Google Maps Go, учурда колдонуучунун аткаруусунда. Chrome ишенимдүү веб-иш-аракеттер аркылуу Chrome 68ден чечим сунуштайт. Ошол учурдан баштап, биз PWAбызга ишке киргизгич менен Android пакетин (APK) түзүп, дүкөнгө жүктөй алабыз. Windows 10догу Microsoft дүкөнү үчүн PWA Builder сайты учурда APPX Windows 10 пакетин түзүүдө жардам берип жатат. Веб көрүнүшүн колдонуп, App Store үчүн iOS колдонмосун кол менен түзсөңүз болот, бирок дүкөндүн эрежелерине өтө этият болуңуз.
Платформанын интеграциясы
Прогрессивдүү өркүндөтүү ыкмаларын колдонуу менен, сиз көптөгөн функцияларды, анын ичинде push билдирмелерин, камерага жана микрофонго мүмкүнчүлүк алуу, геолокация, сенсорлор, төлөмдөр, бөлүшүү диалогдору жана оффлайн режимин колдоно аласыз. Бул функциялардын бардыгы түздөн-түз браузердин коопсуздук моделинде, анын ичинде уруксат диалогдорунда иштейт.
Биз башка колдонмолор менен URI схемалары аркылуу байланыша алабыз, мисалы, Twitter, YouTube же WhatsAppты алардын URL дареги же whatsapp: // сыяктуу бажы URIдери аркылуу ачуу.
Акырында, дүкөнгө Capacitor же Microsoft Store аркылуу жарыяланган жергиликтүү PWAларды түзүүдө, биз ар кандай эне-кодду аткарууга мүмкүндүк берген жергиликтүү APIлерге көпүрө боло алабыз. Windows 10 менен интеграциялоо аппараттык жеткиликтүүлүктү, ошондой эле ОС менен интеграциялоону камтыйт, мисалы, Баштапкы орнотуу. Мисалы, Twitter PWA сиз каалаган колдонуучуну баштапкы экраныңызга кадап коё алат.
Дизайн жана UX кыйынчылыктары
PWA долбоорун иштеп чыгуунун өзгөчө кыйынчылыктары бар, андыктан бир аз убакытты изилдөө, мүмкүн болушунча тестирлөө жана төмөнкүлөрдү эске алуу керек:
- Колдонуучулар колдонмо сыяктуу окуяларды күтүшөт.
- Орнотуу процесси дагы деле жаңы, андыктан колдонмону кантип орнотууну түшүндүрүп берүү үчүн кошумча күч-аракет жумшашыбыз керек.
- Колдонмону фондук режимде колдонуучунун өз ара аракеттенүүсүз жаңыртуу эң сонун, бирок UX үчүн бир топ кыйынчылыктарды жаратат.
- Жумуш столунда веб-дизайн тез иштей баштайт, анткени PWA терезелери кичинекей, мобилдик көрүү терезесинен бир аз кичинекей болушу мүмкүн. Демек, бүгүнкү форматта Chrome OS көрүнүп тургандай, биз ушул формат үчүн белгилүү бир көрүнүштөрдү же кичинекей виджеттерди түзүшүбүз керек.
- Push эскертмелери колдонуучуга гана кошумча нарк кошушу керек, андыктан керектүү учурда сураганды үйрөнүңүз жана пайдалуу же кызыктуу эмес билдирүүлөрдү жөнөтүү мүмкүнчүлүгүн текке кетирбеңиз.
- Вебдин иштешине жана оффлайн режиминде иштөөгө ылайыкташтырышыбыз керек.
PWAs жылы
Быйыл iOS жана рабочий стол кошулгандыктан, PWA бүгүнкү күндө бардык жерде бар. Бирок биз алардын саякаты жаңы гана башталып жаткандыгын унутпашыбыз керек, андыктан тез-тез өзгөрүүлөрдү күтүп, платформа өнүгүп жатканда колдонуучунун мыкты тажрыйбасын камсыздоо үчүн эң акыркы ыкмалар жана идеялар менен толукталып туруңуз.
Бул макала алгач 308-санында жарыяланган тор, веб-дизайнерлер жана иштеп чыгуучулар үчүн дүйнөдөгү эң көп сатылган журнал. 308-чыгарылышын ушул жерден сатып алыңыз же бул жерде жазылуу.
