Мазмұны
- PWA көтерілісі
- Бүгін қолданыстағы PWA
- Орнату
- Офлайн және жедел іске қосу
- Бірінші деңгейдегі тәжірибе
- Қолданбалы дүкендер
- Платформа интеграциясы
- Дизайн және UX проблемалары
- PWA-лар жылы
Жауапты веб-дизайн бірнеше жыл бұрын жұмыс үстелі мен мобильді сайттар арасындағы алшақтықты жойған сияқты, прогрессивті веб-қосымшалар қазіргі уақытта веб пен қолданбалар әлемі арасындағы алшақтықты жойып отыр. Жұмыс үстелінен мобильді қосымшаларға дейінгі тәжірибе тез арада жақындаса келе, әлдеқайда жұмсақ, тиімді интернет дамып келе жатқан сияқты, дегенмен оның негізгі генетикалық кодына елеулі өзгерістер енгізілмеген.
- Прогрессивті веб-қосымшаны қалай құруға болады
Бұған әсер ететін кейбір маңызды селективті қысым бар. Біріншіден, әр ұяға арналған жергілікті қосымшалар құру ресурстарды тиімді пайдалану болып табылмайды: пайдаланушылар жүздеген үлкен қосымшалармен өткізгіштік қабілетін және құнды дискілік кеңістігін ысырап етеді, ал компаниялар қолданбаларды жасау үшін көп ақша жұмсамайды, тек олардан бас тарту керек олардың алғашқы нұсқаларынан кейін. Бұл қосымшалардың көпшілігі тек веб-мазмұнға негізделген: веб-қызметтерден немесе мазмұнды басқару жүйесінен алынған ақпарат.
Прогрессивті веб-қосымшаның анықтамасы нақты емес. PWA дегеніміз - веб-платформада бірнеше жаңа API және қабілеттерді қолдана отырып, бірыңғай кодтық базасы бар әр платформада қосымшаға ұқсас тәжірибе ұсыну үшін прогрессивті жетілдіруді қолданады. Бұл сіздің қолданушыларыңыз үшін керемет тәжірибе жасайтын үздік тәжірибелер мен API қолдану жиынтығы, сондықтан сізде PWA бар немесе жоқ сияқты емес; бұл сіздің сайтыңыздың көп немесе аз PWA сияқты.
Сіз жаңа сайт салуды бастамақсыз ба? Веб-сайт құрастырушысын пайдаланып көріңіз. Сізге лайықты веб-хостинг қызметінен де қолдау көрсетілетіндігіне көз жеткізіңіз. Немесе сәл өзгеше нәрсе туралы бұлтты сақтау туралы нұсқаулықты қараңыз.
PWA көтерілісі
PWA атауы 2015 жылы Google-да Chrome командасында жұмыс істейтін Алекс Расселдің «Жанымызды жоғалтпай қойындыларды қашыру» мақаласында пайда болғанымен, олардың саяхаты ол жақта басталған жоқ. Бізде бұрын 1999 жылы Microsoft құрған HTML қосымшалары (HTA) және Nokia, BlackBerry және басқа компаниялардың көптеген веб-қосымшаларымен бірге болған. Содан кейін, 2007 жылы, Стив Джобс сол кезде түпнұсқа iPhone үшін қосымшаларды құрудың жалғыз әдісін ұсынды: басқа атпен болса да PWA. Chrome сол жерден басталып, бірнеше жылдан кейін API-ді жетілдіріп, PWA атауын ойлап тапты.
Веб-мазмұнды қолданбалар әлеміне енгізуге тырысқан көптеген сәтсіз тәжірибелермен, ол неге қазір жұмыс істейді деп ойлаймыз? Бұл, ең алдымен, Microsoft, Google, Apple және Mozilla сияқты PWA технологияларын алға жылжытатын және алға жылжытатын компанияларға байланысты. Сондай-ақ, веб-платформаның өнімділігі жақсы жасалған PWA-ны жергілікті қолданбамен салыстырған кезде ешқандай айырмашылық болмайтын деңгейге жетті. Мұндай жағдайлар бұрын-соңды болмаған және бұл веб-қауымдастықтың PWA-лар уақыты келді деп шешуіне себеп болды.
Бүгін қолданыстағы PWA
Бүгінгі күні PWA толықтай жұмыс істейді және орнатылады:
- Көптеген браузерлері бар Android, ең жақсы тәжірибені Chrome ұсынады
- Safari-мен бірге iOS
- Chromebooks
- Microsoft дүкенінен 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 from 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 (resources))))});
PWA әрқашан кэштен қызмет етуі үшін, біз қызметші ішіндегі алу оқиғасын тыңдап, кэш саясатын, мысалы, келесі үзіндімен бірінші кезекте қолдануды шешіп алуымыз керек.
self.addEventListener («fetch», e => e.respondWith (caches.match (e.request). содан кейін (res => res);
Бұл жағдайда пайдаланушы PWA-ға (браузерден де, орнатылған белгішеден де) қол жеткізген сайын, қозғалтқыш файлдарды кэштен алады. PWA-дің жергілікті қолданбаларға қарағанда артықшылығы - құрылғылар өзгерген кезде барлық файлдарды қайта жүктемеуі керек, тек мөлдір процесте өзгерген файл. Сонымен қатар, біз қолданбаның кейбір бөліктерін сұраныс бойынша жүктей аламыз.
Бірақ сізде қандай файлдар серверде жаңартылғанын қалай білуге болады, осылайша оларды кэшке ауыстыра аласыз ба? Егер сіз мұны басқару үшін төменгі деңгейдегі қызмет қызметкерін жазғыңыз келмесе, сіз жұмысшы орнын құруға және орнатылған буманы жаңарту үшін манифест ресурстарына көмектесетін Workbox ашық кітапханасын пайдалана аласыз.
Егер сізде тұрақты сақтауды сұрамасаңыз, егер құрылғыда сақтау қысымы болса, сіздің PWA файлдарыңыз жойылатынын біліңіз:
if ('storage' in the navigator && 'persist' in navigator.storage) navigator.storage.persist ();
Chrome және көптеген Android браузерлерінде сіздің қолданбаңыз қол жетімді кеңістіктің бес пайызынан астамын пайдалана алмайды; iOS-та ол тек бір хост үшін 50MiB (50MB жанында); Edge-де ол жалпы жад көлеміне сәйкес өзгереді және Windows дүкенінде ол шектеусіз.
Бірінші деңгейдегі тәжірибе
Бізде ми бар, енді жүрекке уақыт келді: веб-бағдарлама манифест. Веб-сайтты PWA-ға айналдырудың мақсаты - оның тез немесе оффлайн режимінде қол жетімді болуын қамтамасыз ету ғана емес, сонымен қатар оның ОЖ-де өзінің белгішесі болуын қамтамасыз ету және басқа орнатылған қолданбалар сияқты толықтай тәжірибе ұсыну.
Манифест - бұл орнату әрекетін анықтау үшін браузерде немесе қолданба дүкенінде қолданылатын PWA үшін метадеректерді анықтайтын JSON файлы.
Файл бірнеше қасиеттерді сіздің PWA үшін метадеректер ретінде анықтайды. Әрбір ОС осы қасиеттерді оқып шығады және сізге ұнайтын тәжірибеге сәйкес келуге тырысады. Мысалы, Android «дисплей: автономды» деп оқып, қолданбаның қалыпты тәжірибесін жасайды. 'Display: minimal-ui' көмегімен бұл көрінетін URL және TLS сертификатымен тәжірибе жасайды - қауіпсіздікті сезінетін қолданбалар үшін пайдалы. «Дисплей: толық экран» көмегімен ол күй жолағы немесе көрінетін артқы батырмасы жоқ толық иммерсивті қолданбаларды жасайды. Белгішелер мен түстер жиынтығы экранның немесе тақырып тақталарының қолданбаның терезесін қалай іздейтіндігін анықтайды.
Web 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 (); // орнатудың жергілікті нұсқауын көрсетеді))
Егер PWA орнатылған болса, ‘appinstalled’ іс-шарасы терезе нысанында өртеніп, оны тыңдайтын статистиканы бақылауға болады.
Қолданбалы дүкендер
Браузерден орнатудың маңызды артықшылықтарының бірі - қолданбалар дүкенін мақұлдау процесін болдырмау немесе баспагер болу үшін ақы төлеу. Бұл тез баспаға шығару, компанияларға арналған жеке қосымшалар жасау немесе дүкендерде қабылдауға болмайтын қосымшалар сияқты айқын артықшылықтармен келеді.
Бірақ кейбір компаниялар дүкенде болғысы келеді. Бүгінгі күні PWA-ны ресми түрде қабылдайтын жалғыз дүкендер Windows дүкені және kaiOS дүкені болып табылады. Бақытымызға орай, Capacitor (қазіргі уақытта Alpha-да) немесе PWA Builder сияқты құралдардың көмегімен біз басқа платформалар үшін түпнұсқалық бумаларды құрып, оларға қол қоя аламыз.
Google Play дүкенінде Twitter Lite және Google Maps Go сияқты кейбір PWA-лар жарияланған, олар қазір тапсырыс бойынша жүзеге асырылуда. 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 дүкенінде дүкенге шығарылатын жергілікті PWA құрған кезде біз кез-келген жергілікті кодты орындауға мүмкіндік беретін жергілікті API-мен байланыс жасай аламыз. Windows 10-мен біріктіру аппараттық қол жетімділікті, сонымен қатар ОС-пен интеграциялауды қамтиды, мысалы, Іске қосу үшін опцияларды ұсынады. Мысалы, Twitter PWA кез-келген пайдаланушыны бастапқы экранға бекітуге мүмкіндік береді.
Дизайн және UX проблемалары
PWA-ны жобалаудың ерекше қиындықтары бар, сондықтан біраз уақытты зерттеуге, мүмкіндігінше тестілеуге және келесілерді ескеруге арнаған жөн:
- Пайдаланушылар қосымшаға ұқсас тәжірибе күтеді.
- Орнату процесі әлі де жаңа, сондықтан біз қолданбаны қалай орнатуға болатынын түсіндіру үшін қосымша күш салуымыз керек.
- Қолданбаны өңдеушілердің өзара әрекеттестігінсіз жаңарту өте жақсы, бірақ сонымен бірге UX үшін қиындықтар туғызады.
- Жұмыс үстелінде жылдам веб-дизайн жаңа шекараға ие, өйткені PWA терезелері ұсақ, мобильді қарау терезесінен әлдеқайда кіші болуы мүмкін. Бұл дегеніміз, қазіргі кезде Chrome ОЖ-да көрсетілгендей, осы формат үшін арнайы көріністер немесе шағын виджеттер жасауымыз керек.
- Push хабарламалары тек пайдаланушыға қосымша мән беруі керек, сондықтан дұрыс сәтте сұрай біліңіз және пайдалы емес немесе қызықты емес хабарламалар жіберу мүмкіндігін жоғалтпаңыз.
- Біз веб-өнімділікке және желіден тыс қол жетімділікке арналған дизайн жасауымыз керек.
PWA-лар жылы
Биылғы жылы iOS пен жұмыс үстелінің қосылуымен PWA барлық жерде бар. Бірақ біз олардың саяхаты жаңа басталып жатқанын есте ұстауымыз керек, сондықтан жиі өзгерістер күтіп, платформа дамып келе жатқан кезде пайдаланушының керемет тәжірибесін алу үшін өзіңізді ең жаңа техникалар мен идеялармен толықтырып отырыңыз.
Бұл мақала бастапқыда 308 санында жарияланған тор, веб-дизайнерлер мен әзірлеушілерге арналған әлемдегі ең көп сатылатын журнал. 308 шығарылымын мына жерден сатып алыңыз немесе жазылу.
