Задаволены
- Узыходжанне на PWA
- PWA ў дзеянні сёння
- Ўстаноўка
- Пазасеткавы і неадкладны запуск
- Першакласны вопыт
- Крамы прыкладанняў
- Інтэграцыя платформы
- Праблемы дызайну і UX
- Год PWA
Падобна таму, як некалькі гадоў таму спагадны вэб-дызайн пераадолеў разрыў паміж настольнымі і мабільнымі сайтамі, у цяперашні час прагрэсіўныя метады вэб-прыкладанняў скарачаюць разрыў паміж Інтэрнэтам і светам прыкладанняў. З хуткай канвергенцыяй досведу карыстальнікаў ад настольных да мабільных прыкладанняў, здаецца, развіваецца значна больш зграбны і эфектыўны Інтэрнэт - хаця непазбежна, не без істотных змен у яго генетычным кодзе.
- Як стварыць прагрэсіўны вэб-дадатак
Відавочна, што гэта абумоўлівае значныя выбарачныя нагрузкі. Перш за ўсё, стварэнне ўласных праграм для кожнай нішы не абавязкова эфектыўнае выкарыстанне рэсурсаў: карыстальнікі ў канчатковым выніку атрымліваюць сотні вялікіх праграм, якія марнуюць прапускную здольнасць і каштоўную дыскавую прастору, і кампаніі марнуюць шмат грошай на стварэнне праграм толькі для таго, каб іх адмовіліся. пасля іх першых версій. І большасць гэтых прыкладанняў проста кіруецца вэб-кантэнтам: інфармацыяй, якая паступае з вэб-сэрвісаў альбо з сістэмы кіравання кантэнтам.
Вызначэнне прагрэсіўнага вэб-прыкладання не з'яўляецца канкрэтным. PWA - гэта проста вэб-дадатак, якое выкарыстоўвае некалькі новых API і здольнасцей на вэб-платформе з выкарыстаннем прагрэсіўнага ўдасканалення, каб прапанаваць падобны на дадатак вопыт на кожнай платформе з аднолькавай базай кода. Гэта больш набор лепшых практык і выкарыстання API, якія ствараюць выдатны досвед падобнага прыкладання для вашых карыстальнікаў, таму гэта не так, як у вас ёсць ці няма PWA; гэта больш падобна на ваш сайт больш-менш PWA.
Ці збіраецеся вы пачаць будаваць новы сайт? Паспрабуйце скарыстацца канструктарам сайтаў. І пераканайцеся, што вы таксама атрымліваеце неабходную падтрымку прыстойнай службы хостынгу. Або што-небудзь крыху іншае глядзіце ў нашым кіраўніцтве па лепшым воблачным сховішчы.
Узыходжанне на PWA
Хоць назва PWA была прыдумана ў 2015 годзе ў артыкуле "Уцёкі з укладак, не губляючы душу" Алекса Расэла, які працуе ў Google для каманды Chrome, на самой справе іх шлях не пачаўся. Раней у нас былі HTML-дадаткі (HTA), якія былі створаны Microsoft у 1999 годзе разам са шматлікімі платформамі вэб-прыкладанняў ад Nokia, BlackBerry і іншых кампаній. Затым, у 2007 годзе, Стыў Джобс прадставіў адзіны спосаб стварэння прыкладанняў для арыгінальнага iPhone: PWA, хаця і пад іншым імем. Chrome пачаў з гэтага, некалькі гадоў праз палепшыў API і вынайшаў назву PWA.
З такой вялікай колькасцю папярэдніх няўдалых спробаў данесці вэб-кантэнт да свету прыкладанняў, чаму мы думаем, што гэта спрацуе зараз? Ну, у першую чаргу, гэта залежыць ад кампаній, якія зараз працуюць і прасоўваюць тэхналогіі, якія стаяць за PWA, такія як Microsoft, Google, Apple і Mozilla, каб назваць некалькі. Акрамя таго, прадукцыйнасць вэб-платформы дасягнула кропкі, калі няма адрозненняў пры параўнанні добра распрацаванай PWA з уласным дадаткам. Такіх умоў ніколі не было, і таму адна з прычын вэб-супольнасці вырашыла, што прыйшоў час для PWA.
PWA ў дзеянні сёння
Сёння PWA цалкам функцыянальныя і ўсталёўваюцца на:
- Android з большасцю браўзэраў, а Chrome прапануе лепшы вопыт
- iOS з Safari
- Chromebook
- Windows 10 з крамы Microsoft
- Функцыі тэлефонаў з KaiOS - відэльцам ад Firefox OS - у цяперашні час даступныя для мільёнаў карыстальнікаў, галоўным чынам у Індыі
Пазней у гэтым годзе падтрымка таксама паступае ў MacOS, Windows і Linux праз Chrome. Сёння ён даступны як эксперыментальны сцяг "Desktop PWA", калі вы хочаце паспрабаваць яго зараз. Усталёўка на Windows на Edge без выкарыстання крамы таксама пойдзе пазней, хоць пэўныя тэрміны не вызначаны.
Калі вы перачытаеце спіс, вы ўбачыце, што кожная платформа мае альбо збіраецца падтрымліваць цалкам усталяваныя PWA ў наступныя месяцы. І паколькі PWA - гэта проста вэб-сайт з функцыямі зверху, які будзе актываваны толькі ў сумяшчальных браўзэрах, мы нават можам сказаць, што ён сумяшчальны з усімі браўзэрамі па сваёй асноўнай функцыянальнасці.
Акрамя таго, PWA ў цяперашні час ствараюцца з большасці CLI для розных фреймворкаў, уключаючы Angular 6+ CLI, React Create App, PWA Starter Kit ад Polymer і Preact CLI. Нарэшце, каманда Ionic Framework прыйшла да ідэі Capacitor, замены Cordova з адкрытым зыходным кодам, якая робіць уласныя PWA магчымымі ў кожнай краме прыкладанняў.
Ўстаноўка
Адзін з найважнейшых аспектаў PWA - гэта ўстаноўка прыкладання. Гэты працэс ажыццяўляецца ў два дадатковыя этапы: загрузка і пазасеткавае захоўванне файлаў прыкладання і ўстаноўка значка ў АС. Паколькі абодва этапы неабавязковыя, вы можаце прапанаваць пазасеткавы рэжым працы ў браўзэры альбо абразок без аўтаномнай усталёўкі. Але сапраўдная PWA павінна ўключаць у сябе і тое, і іншае: яна павінна падавацца з TLS пад HTTPS, і карыстальнік вырашыць, ці будзе яна выкарыстоўваць яе ў браўзэры альбо ў яе ўласным значку.
Пазасеткавы і неадкладны запуск
Мозг PWA - гэта работнік службы, файл JavaScript, усталяваны на прыладзе карыстальніка, які адказвае за загрузку файлаў прыкладання, захоўванне іх у кэш і пазней абслугоўванне пры неабходнасці. Пасля таго, як работнік службы ўсталяваны, ён дзейнічае як сеткавы проксі-сервер для кожнага рэсурсу, які патрэбны вэб-дадатку: ён можа прыняць яго з сеткі альбо даставіць з лакальнага кэша, што робіць прыкладанне даступным у аўтаномным рэжыме, а таксама даступным толькі пару мілісекунд, нават калі карыстальнік мае падключэнне, эмулюючы ўласны запуск прыкладання.
Для таго, каб усталяваць работніка службы, у ваш HTML-дакумент трэба ўключыць нешта накшталт:
if (’serviceWorker’ у навігатары) navigator.serviceWorker.register ("sw.js");
Гэта ўсталюе файл "sw.js" на прылады карыстальнікаў для бягучай тэчкі ў бягучым дамене - паняцце, вядомае як сфера. Пасля яго ўсталёўкі наступнымі наведваннямі любога URL-адраса, які ўваходзіць у яго аб'ём, будзе кіраваць гэты работнік службы.
Скажам, у нас ёсць PWA з чатырма файламі: index.html, app.js, app.css і logo.png. Першае, што трэба - усталяваць гэтыя файлы ў кэш у файле sw.js.
const resources = ["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.respoWWith (caches.match (e.request). then (res => res);
У гэтым выпадку кожны раз, калі карыстальнік атрымлівае доступ да PWA (як з браўзэра, так і з усталяванага значка), рухавік будзе атрымліваць файлы з кэша. Перавага PWA у параўнанні з уласнымі праграмамі заключаецца ў тым, што прыладам не трэба зноў загружаць усе файлы пры змене, а толькі файл, які змяніўся празрыстым працэсам. Акрамя таго, мы ўсё яшчэ можам загружаць часткі прыкладання па патрабаванні.
Але праблема ў тым, як вы ведаеце, якія файлы былі абноўлены на серверы, каб вы маглі замяніць іх у кэшы? Калі вы не хочаце пісаць работнік службы нізкага ўзроўню, каб кіраваць гэтым, вы можаце выкарыстоўваць бібліятэку з адкрытым зыходным кодам Workbox, якая дапаможа вам генераваць службоўца і маніфест рэсурсаў для абнаўлення ўсталяванага пакета.
Памятаеце, што файлы вашага PWA будуць выдалены, калі на прыладзе ўзнікае ціск для захоўвання, калі вы не запатрабуеце пастаяннага сховішча, калі яно даступна:
if ('сховішча' ў навігатары && 'persist' у navigator.storage) navigator.storage.persist ();
У Chrome і большасці аглядальнікаў Android ваша прыкладанне не можа выкарыстоўваць больш за пяць адсоткаў даступнай прасторы; на iOS гэта 50 Мб (каля 50 Мб) толькі на хост; у Edge гэта зменна ў залежнасці ад агульнага аб'ёму памяці, а ў краме Windows гэта неабмежавана.
Першакласны вопыт
У нас ёсць мозг, і цяпер прыйшоў час для сэрца: вэб-дадатак маніфест. Мэта ператварэння вэб-сайта ў PWA заключаецца не толькі ў забеспячэнні яго хуткай даступнасці альбо ў аўтаномным рэжыме, але і ў тым, каб мець уласную абразок у АС і прапанаваць цалкам аўтаномны вопыт, як і любое іншае ўсталяванае прыкладанне.
Маніфест - гэта файл JSON, які вызначае метаданыя для PWA, якія выкарыстоўваюцца браўзэрам альбо крамай прыкладанняў для вызначэння паводзін пры ўсталёўцы.
Файл вызначае некалькі ўласцівасцей як метаданыя для вашага PWA. Кожная АС прачытае гэтыя ўласцівасці і паспрабуе з усіх сіл адпавядаць пераважнаму досведу. Напрыклад, Android будзе чытаць "display: standalone" і ствараць звычайную працу прыкладання. З ’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", функцыя (e) {e.prompt (); // будзе паказана родная падказка пра ўстаноўку})
Калі ўстаноўлена PWA, падзея "усталяванае" будзе запушчана на аб'екце акна, каб вы маглі адсочваць статыстыку, якая яго праслухоўвае.
Крамы прыкладанняў
Адным з галоўных плюсаў усталёўкі з браўзэра з'яўляецца магчымасць пазбегнуць працэсу зацвярджэння крамы прыкладанняў альбо плаціць за тое, каб быць выдаўцом. Гэта мае відавочныя перавагі, такія як імгненная публікацыя, стварэнне прыватных прыкладанняў для кампаній альбо прыкладанняў, якія нельга прымаць у крамах.
Але некаторыя кампаніі хочуць быць у краме. На сённяшні дзень адзінымі крамамі, якія афіцыйна прымаюць PWA, з'яўляюцца крама Windows і крама kaiOS. На шчасце, з дапамогай такіх інструментаў, як Capacitor (у цяперашні час у альфа-версіі) або PWA Builder, мы можам ствараць і падпісваць уласныя пакеты і для іншых платформаў.
У краме Google Play ужо апублікаваны некаторыя PWA, такія як Twitter Lite і Google Maps Go, якія зараз рэалізуюцца на заказ. Chrome прапануе рашэнне ад Chrome 68 з дапамогай правераных вэб-мерапрыемстваў. З гэтага моманту мы зможам стварыць пакет Android (APK) з праграмай запуску ў наш PWA і загрузіць яго ў краму. Для крамы Microsoft у Windows 10 сайт PWA Builder у цяперашні час дапамагае ў стварэнні пакета APPX для Windows 10. Выкарыстоўваючы вэб-прагляд, вы можаце ўручную стварыць дадатак для iOS для App Store, але будзьце вельмі ўважлівыя да правілаў крамы.
Інтэграцыя платформы
Укараняючы метады прагрэсіўнага ўдасканалення, вы зможаце выкарыстоўваць мноства функцый, уключаючы push-апавяшчэнні, доступ да камеры і мікрафона, геалагізацыю, датчыкі, плацяжы, дыялогавае акно і пазасеткавае сховішча. Усе гэтыя функцыі працуюць непасрэдна ў рамках мадэлі бяспекі браўзэра, уключаючы дыялогавыя дыялогі.
Мы таксама можам мець зносіны з іншымі праграмамі праз схемы URI, такія як адкрыццё Twitter, YouTube ці WhatsApp праз іх URL-адрасы альбо карыстацкія URI, напрыклад WhatsApp: //.
Нарэшце, пры стварэнні ўласных PWA, якія публікуюцца ў краме з выкарыстаннем кандэнсатараў альбо ў краме Microsoft, мы зможам перайсці на ўласныя API, якія дазволяць нам выконваць практычна любы ўласны код. Гэтая інтэграцыя з Windows 10 уключае апаратны доступ, але таксама інтэграцыю з АС, прапаноўваючы такія варыянты, як Pin to Start. Напрыклад, Twitter PWA дазваляе замацаваць любога карыстальніка на стартавым экране.
Праблемы дызайну і UX
Распрацоўка PWA мае унікальныя задачы, таму важна выдаткаваць некаторы час на даследаванні, максімальнае тэсціраванне і ўлік наступнага:
- Карыстальнікі будуць чакаць падобнага прыкладання.
- Працэс усталёўкі па-ранейшаму новы, таму нам трэба прыкласці дадатковыя намаганні, каб растлумачыць, як усталяваць прыкладанне.
- Абнаўленне прыкладання ў фонавым рэжыме без узаемадзеяння з карыстальнікам выдатна, але гэта таксама стварае некаторыя праблемы для UX.
- На працоўным стале адаптыўны вэб-дызайн набывае новыя межы, бо вокны PWA могуць быць маленькімі, значна меншымі, чым мабільны агляд. Гэта азначае, што нам трэба стварыць пэўныя віды альбо невялікія віджэты для гэтага фармату, як гэта відаць сёння ў АС Chrome.
- Націскныя апавяшчэнні павінны дадаць каштоўнасць толькі для карыстальніка, таму навучыцеся задаваць пытанні ў патрэбны момант і не марнуйце магчымасць адпраўляць паведамленні, якія не з'яўляюцца карыснымі ці цікавымі.
- Нам трэба распрацаваць для працы ў Інтэрнэце і для аўтаномнага доступу.
Год PWA
З даданнем iOS і настольных кампутараў у гэтым годзе PWA сёння паўсюдна. Але мы павінны памятаць, што іх падарожжа толькі пачынаецца, таму чакайце частых змен і не забудзьцеся сачыць за самымі сучаснымі метадамі і ідэямі, каб забяспечыць выдатны карыстацкі досвед, пакуль платформа развіваецца.
Гэты артыкул быў першапачаткова апублікаваны ў нумары 308 ад сетка, самы прадаваны ў свеце часопіс для вэб-дызайнераў і распрацоўшчыкаў. Набудзьце выпуск 308 тут альбо падпішыцеся тут.
