Мундариҷа
- Баландшавии PWAs
- Имрӯз PWA-ҳо амал мекунанд
- Насб
- Офлайн ва оғози фаврӣ
- Таҷрибаи дараҷаи аввал
- Дӯкони барномаҳо
- Ҳамгироии платформа
- Тарроҳӣ ва мушкилоти UX
- Соли PWAs
Ҳамон тавре ки тарроҳии бомасъулияти веб чанд сол пеш фарқи байни сайтҳои мизи корӣ ва мобилиро бартараф кард, техникаи пешрафтаи веб дар айни замон фарқи байни веб ва ҷаҳони барномаро маҳкам мекунад. Бо назардошти таҷрибаи корбарон аз мизи корӣ ба барномаҳои мобилӣ, ки ба зудӣ ба ҳам наздик мешаванд, ба назар чунин мерасад, ки интернети хеле ҳамвор ва муассиртар рушд мекунад - гарчанде ки ногузир бидуни ягон тағироти ҷиддӣ дар рамзи аслии генетикии он ба назар мерасад.
- Чӣ гуна веб-барномаи прогрессивиро сохтан мумкин аст
Эҳтимол, ин фишорҳои ҷиддии интихобӣ ҳастанд, ки инро пеш мебаранд. Пеш аз ҳама, эҷоди барномаҳои ватанӣ барои ҳар як ҷой истифодаи ҳатмии истифодаи захираҳо нест: корбарон бо садҳо барномаҳои калон паҳнои банд ва фазои арзишманди дискро аз даст медиҳанд ва ширкатҳо барои эҷоди барномаҳо пули зиёде сарф мекунанд, то танҳо аз онҳо даст кашанд пас аз версияҳои аввалини онҳо. Ва аксари ин барномаҳо танҳо аз ҷониби мундариҷаи веб ба амал оварда мешаванд: иттилоот аз хидматҳои веб ё системаи идоракунии мундариҷа.
Таърифи веб-барномаи пешрафта мушаххас нест. PWA танҳо як веб барномаест, ки якчанд платформаҳои API ва қобилиятҳои навро дар платформаи веб истифода аз такмилдиҳии пешрафта истифода мебарад, то дар ҳар як платформа бо ҳамон пойгоҳи рамз таҷрибаи ба барнома монанд пешниҳод кунад. Ин бештар маҷмӯи таҷрибаҳои беҳтарин ва истифодаи API мебошад, ки барои корбарони шумо таҷрибаи аълои шабеҳи барнома ба вуҷуд меорад, бинобар ин чунин нест, ки шумо PWA дошта бошед ё надоред; он ба сайти шумо бештар ё камтар PWA монанд аст.
Оё шумо мехоҳед ба сохтани сайти нав шурӯъ кунед? Кӯшиш кунед, ки вебсайтсозро истифода баред. Ва боварӣ ҳосил кунед, ки шумо низ аз хидмати муносиби хостинги веб дастгирии лозимаро мегиред. Ё барои чизи каме фарқ, ба дастури мо дар бораи беҳтарин нигаҳдории абр нигаред.
Баландшавии PWAs
Дар ҳоле ки номи PWA дар соли 2015 дар мақолаи "Забонҳои гуреза бидуни аз даст додани ҷони мо" аз ҷониби Алекс Рассел, ки дар Google барои дастаи Chrome кор мекунад, сохта шудааст, сафари онҳо аслан аз он ҷо оғоз нашудааст. Мо қаблан барномаҳои HTML (HTA) доштем, ки онро Microsoft 1999 сохта буд ва дар якҷоягӣ бо бисёр платформаҳои дигари веб-барномаҳо аз Nokia, BlackBerry ва дигар ширкатҳо. Сипас, дар соли 2007, Стив Ҷобс пешниҳод кард, ки он замон ягона роҳи сохтани барномаҳо барои iPhone аслӣ буд: PWAs, ҳарчанд бо номи дигар. Chrome аз он ҷо оғоз ёфт, пас аз чанд сол API-ҳоро такмил дод ва номи PWA -ро ихтироъ кард.
Бо ин қадар таҷрибаҳои номуваффақи қаблӣ, ки мундариҷаи вебро ба ҷаҳони барномаҳо ворид мекунанд, чаро мо фикр мекунем, ки он ҳоло кор хоҳад кард? Хуб, пеш аз ҳама, ба ширкатҳое, ки ҳоло кор мекунанд ва технологияҳои паси PWA-ро пеш мебаранд, ба монанди Microsoft, Google, Apple ва Mozilla, номбар кардан мумкин аст. Инчунин, иҷрои платформаи веб ба дараҷае расид, ки ҳангоми муқоисаи PWA-и хуб тарҳрезишуда бо барномаи ватанӣ фарқияти эҳсосшаванда вуҷуд надорад. Он шароитҳо қаблан ҳеҷ гоҳ вуҷуд надоштанд ва ин як сабабест, ки ҷомеаи интернетӣ қарор кард, ки вақти PWA расидааст.
Имрӯз PWA-ҳо амал мекунанд
Имрӯз PWA пурра коршоям ва насбшаванда мебошанд:
- Android бо аксари браузерҳо, бо Chrome таҷрибаи беҳтаринро пешниҳод мекунад
- iOS бо Safari
- Chromebooks
- 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) 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 ("овардан", e => e.respondWith (caches.match (e.request). пас (res => res);
Дар ин ҳолат, ҳар вақте, ки корбар ба PWA дастрасӣ пайдо мекунад (ҳам аз браузер ва ҳам аз тасвири насбшуда), муҳаррик файлҳоро аз кэш мегирад. Афзалияти PWA-ҳо нисбат ба барномаҳои ватанӣ дар он аст, ки ҳангоми тағирот дастгоҳҳо набояд дубора ҳамаи файлҳоро зеркашӣ кунанд, танҳо он файле, ки бо раванди шаффоф тағир ёфтааст. Инчунин, мо метавонем қисмҳои барномаро мувофиқи талабот зеркашӣ кунем.
Аммо мушкил дар он аст, ки чӣ гуна шумо медонед, ки кадом файлҳо дар сервер навсозӣ шудаанд, то шумо онҳоро дар кэш иваз кунед? Агар шумо намехоҳед як корманди сатҳи пасти хидматрасониро барои идоракунии он нависед, шумо метавонед китобхонаи кушодаасоси Workbox -ро истифода баред, ки ба шумо дар тавлиди корманди хидматрасон ва захираҳои манифест барои навсозии бастаи насбшуда кӯмак мерасонад.
Огоҳ бошед, ки файлҳои PWA-и шумо нест карда мешаванд, агар дар дастгоҳ фишори нигаҳдорӣ бошад, агар шумо дар сурати мавҷуд будани нигаҳдории доимӣ дархост накунед:
агар ('нигоҳдорӣ' дар navigator && 'persist' in navigator.storage) navigator.storage.persist ();
Дар Chrome ва аксари браузерҳои Android, барномаи шумо қодир нест, ки зиёда аз панҷ фоизи фазои мавҷудбударо истифода барад; дар iOS он танҳо 50MiB (наздик ба 50MB) барои як мизбон; дар Edge он аз рӯи ҳаҷми умумии хотира тағйирёбанда аст ва дар Дӯкони Windows, он номаҳдуд аст.
Таҷрибаи дараҷаи аввал
Мо мағзи сар дорем ва акнун вақти дил аст: веб-барнома манифест. Ҳадаф аз табдил додани вебсайт ба PWA на танҳо таъмини дастрасии он ба зудӣ ва ё дар ҳолати ғайрифаъол, балки инчунин имкон додани он аст, ки дар ОС нишони худро дошта бошад ва таҷрибаи комилан мустақилро ба мисли дигар барномаҳои насбшуда пешниҳод намояд.
Манифест файли JSON мебошад, ки метамаълумотро барои PWA, ки браузер ё мағозаи барномаҳо барои муайян кардани рафтори насб истифода мебарад, муайян мекунад.
Файл якчанд хосиятҳоро ҳамчун метамаълумот барои PWA-и худ муайян мекунад. Ҳар як OS ин хосиятҳоро хонда, кӯшиш мекунад, ки таҷрибаи ба шумо афзалро мувофиқат кунад. Масалан, Android 'display: standalone' -ро мехонад ва таҷрибаи муқаррарии барнома эҷод мекунад. Бо 'display: minimal-ui' он бо URL-и намоён ва шаҳодатномаи TLS таҷриба эҷод мекунад - барои барномаҳои ҳассоси амният муфид. Бо 'дисплей: экрани пурра' он барномаҳоеро, ки пурра ғарқ мекунанд, бидуни сатри ҳолат ё тугмаи баргаштаи намоён месозад. Маҷмӯаи нишонаҳо ва рангҳо муайян мекунад, ки чӣ гуна экрани лаппишҳо ё сутунҳои унвонҳо равзанаи барномаи шуморо пайдо мекунанд.
Баъзе аз генераторҳои манифест мавҷуданд, ба монанди Web App Manifest Generator ё PWA Builder, ки инчунин тасвири онро барои шумо дар қатъномаҳои гуногун тағир медиҳанд, агар шумо иҷозати баланд дошта бошед (ҳадди ақалл 512 пиксел).
Вақте ки шумо файли манифести дар ҳуҷҷати HTML пайвастшуда доред, корбарон метавонанд барномаро бо истифода аз усулҳои мухталиф вобаста ба браузер насб кунанд, ки одатан Илова ба экрани асосӣ, насб ё танҳо илова кардан ном дорад. Агар PWA-и шумо тавассути Bing crawl карда шавад, Microsoft онро ба таври худкор ба Дӯкони Microsoft илова мекунад, то корбарони Windows 10 тавонанд онро аз он ҷо насб кунанд.
Дар баъзе системаҳои оператсионӣ PWA-и шумо қобилияти забти пайвандҳоро дорад. Ин маънои онро дорад, ки пас аз корбар насб кардани барнома, ягон URL дар доираи манифести шумо кушода мешавад, на дар браузер, новобаста аз он ки он дар браузер ё барномаҳои дигар, ба монанди WhatsApp, Facebook пайдо мешавад ё почтаи электронӣ.
Агар шумо талаботҳои PWA-ро, ки мо дар ин ҷо муайян мекунем, гузаред, баъзе платформаҳо лавҳачаи атрофро пешниҳод мекунанд (аломати хурд одатан дар сатри URL, ки веб насбшаванда аст) ё баннерӣ барномаҳои веб. Агар шумо хоҳед, шумо инчунин метавонед тугмаи шахсии насби худро бо истифода аз фрагменти зерин илова кунед:
window.addEventListener ("beforeinstallpr ompt", function (e) {e.prompt (); // фаврии насби насбро нишон медиҳад})
Агар PWA насб карда шавад, чорабинии 'appinstalled' дар объекти тиреза сабт карда мешавад, то шумо статистикаи онро гӯш кунед.
Дӯкони барномаҳо
Яке аз манфиатҳои асосии насбкунӣ аз браузер ин пешгирӣ аз раванди тасдиқи мағозаҳои барнома мебошад ё барои воиз шудан пардохт кардан лозим аст. Ин бо афзалиятҳои намоён, ба монанди нашрияи фаврӣ, эҷоди барномаҳои хусусӣ барои ширкатҳо ё барномаҳое, ки набояд дар мағозаҳо қабул карда шаванд.
Аммо баъзе ширкатҳо мехоҳанд дар мағоза бошанд. Аз имрӯз, ягона мағозаҳое, ки PWA-ро расман қабул мекунанд, ин Дӯкони Windows ва Store kaiOS мебошанд. Хушбахтона, бо асбобҳо ба монанди Capacitor (ҳоло дар Alpha) ё PWA Builder, мо метавонем барои платформаҳои дигар низ бастаҳои аслӣ созем ва имзо кунем.
Баъзе PWAҳое ҳастанд, ки дар Google Play Store аллакай нашр шудаанд, ба монанди Twitter Lite ва Google Maps Go, ки айни замон дар амалисозии фармоишӣ мебошанд. Chrome ҳалли худро аз Chrome 68 тавассути фаъолиятҳои боэътимоди веб пешниҳод мекунад. Аз ин лаҳза, мо метавонем як бастаи Android (APK) -ро бо launcher ба PWA-и худ созем ва ба мағоза бор кунем. Барои мағозаи Microsoft дар Windows 10, сайти PWA Builder айни замон дар тавлиди бастаи APPX Windows 10 кӯмак мерасонад. Бо истифода аз намуди веб, шумо метавонед ба таври дастӣ як барномаи iOS барои App Store созед, аммо нисбати қоидаҳои мағоза бениҳоят эҳтиёткор бошед.
Ҳамгироии платформа
Бо татбиқи усулҳои пешрафтаи такмилдиҳӣ, шумо метавонед аз бисёр хусусиятҳо, аз ҷумла огоҳиномаҳо, дастрасии камера ва микрофон, геолокация, сенсорҳо, пардохтҳо, муколамаи мубодила ва нигаҳдории офлайн истифода баред. Ҳамаи ин хусусиятҳо бевосита дар дохили модели амнияти браузер, аз ҷумла муколамаҳои иҷозат иҷро мешаванд.
Мо инчунин метавонем бо барномаҳои дигар тавассути схемаҳои URI муошират кунем, ба монанди кушодани Twitter, YouTube ё WhatsApp тавассути суроғаҳои онҳо ё URI-ҳои фармоишӣ, ба монанди whatsapp: //.
Ниҳоят, ҳангоми эҷоди PWA-ҳои ватанӣ, ки дар мағоза бо истифодаи Capacitor ё дар мағозаи Microsoft нашр мешаванд, мо метавонем ба API-ҳои ватанӣ гузарем, ки ба мо имкон медиҳанд, ки амалан ҳама гуна рамзи ватаниро иҷро кунем. Ин ҳамгироӣ бо Windows 10 дастрасии сахтафзорро дар бар мегирад, инчунин ҳамгироӣ бо ОС, ки имконот ба монанди Pin to Start пешниҳод мекунад. Масалан, Twitter PWA ба шумо имкон медиҳад, ки ягон корбарро ба экрани оғози худ пинҳон кунед.
Тарроҳӣ ва мушкилоти UX
Тарҳрезии PWA дорои мушкилоти беназир аст, аз ин рӯ муҳим аст, ки чанд вақт ба таҳқиқ, санҷиш то ҳадди имкон ва бо назардошти чизҳои зерин сарф кунед:
- Истифодабарандагон таҷрибаҳои ба барнома монандро интизор мешаванд.
- Раванди ҷойгиркунӣ ҳанӯз ҳам нав аст, бинобар ин ба мо лозим аст, ки барои фаҳмонидани тарзи насб кардани барнома саъйи иловагӣ кунем.
- Навсозии барнома дар замина бидуни ҳамкории корбар бузург аст, аммо он барои UX низ мушкилот эҷод мекунад.
- Дар мизи корӣ, веб-дизайни ҷавобгӯ сарҳади нав мегирад, зеро тирезаҳои PWA метавонанд хурд бошанд, ва аз нуқтаи назари мобилӣ хеле хурдтар. Ин маънои онро дорад, ки мо бояд барои ин формат намудҳои мушаххас ё виҷетҳои хурд созем, тавре ки имрӯз дар OS OS дида мешавад.
- Огоҳномаҳои пахш бояд танҳо ба корбар арзиши иловагӣ илова кунанд, аз ин рӯ дар лаҳзаи мувофиқ пурсиданро ёд гиред ва имкони фиристодани паёмҳои фоидаовар ё ҷолибро аз даст надиҳед.
- Мо бояд барои иҷрои веб ва дастрасии офлайн тарҳрезӣ кунем.
Соли PWAs
Бо илова шудани iOS ва мизи кории имсола, PWAs имрӯз дар ҳама ҷо мавҷуданд. Аммо мо бояд дар хотир дорем, ки сафари онҳо нав оғоз меёбад, бинобар ин тағиротҳои зуд-зудро интизор шавед ва боварӣ ҳосил намоед, ки худро бо навтарин усулҳо ва ғояҳо навсозӣ кунед, то таҷрибаи аълои корбарро ҳангоми рушдёбӣ фароҳам оварад.
Ин мақола дар аввал дар шумораи 308 аз чоп шудааст тӯр, маҷаллаи серхаридори ҷаҳон барои тарроҳони веб ва таҳиягарон. Шумораи 308-ро дар ин ҷо харед ё дар ин ҷо обуна шавед.
