Saturs
- PWA pacelšanās
- PWA darbojas šodien
- Uzstādīšana
- Bezsaistē un tūlītēja palaišana
- Pirmklasīga pieredze
- Lietotņu veikali
- Platformas integrācija
- Dizains un UX izaicinājumi
- PWA gads
Tāpat kā atsaucīgs tīmekļa dizains pirms dažiem gadiem samazināja plaisu starp galddatoru un mobilajām vietnēm, progresīvas tīmekļa lietotņu metodes pašlaik novērš plaisu starp tīmekli un lietotņu pasauli. Tā kā lietotāju pieredze strauji saplūst no darbvirsmas līdz mobilajām lietotnēm, šķiet, ka attīstās daudz gludāks un efektīvāks internets - kaut arī neizbēgami ne bez būtiskām izmaiņām tā pamatā esošajā ģenētiskajā kodā.
- Kā izveidot progresīvo tīmekļa lietotni
Acīmredzot to veicina daži nozīmīgi selektīvie spiedieni. Pirmkārt, vietējo lietotņu izveide katrai nišai ne vienmēr ir efektīva resursu izmantošana: lietotāji galu galā simtiem lielu lietotņu tērē joslas platumu un vērtīgu vietu diskā, un uzņēmumi tērē daudz naudas, veidojot lietotnes tikai tāpēc, lai tās pamestu. pēc viņu pirmajām versijām. Un lielāko daļu šo lietotņu vienkārši vada tīmekļa saturs: informācija, kas nāk no tīmekļa pakalpojumiem vai satura pārvaldības sistēmas.
Progresīvās tīmekļa lietotnes definīcija nav konkrēta. PWA ir tikai tīmekļa lietotne, kas tīmekļa platformā izmanto vairākus jaunus API un spējas, izmantojot pakāpenisku uzlabojumu, lai piedāvātu lietotnei līdzīgu pieredzi katrā platformā ar vienādu kodu bāzi. Tas drīzāk ir paraugprakses un API izmantošanas kopums, kas lietotājiem rada lielisku lietotnēm līdzīgu pieredzi, tāpēc jums nav vai nav PWA; drīzāk jūsu vietne ir vairāk vai mazāk PWA.
Vai jūs gatavojaties veidot jaunu vietni? Mēģiniet izmantot vietņu veidotāju. Un pārliecinieties, ka saņemat nepieciešamo atbalstu arī no pienācīga tīmekļa mitināšanas pakalpojuma. Vai arī kaut ko nedaudz atšķirīgu skatiet mūsu ceļvedī par labāko mākoņa krātuvi.
PWA pacelšanās
Kaut arī nosaukums PWA tika izdomāts 2015. gadā Alex Russell rakstā Escaping Tabs nezaudējot mūsu dvēseli, kurš strādāja pie Google Chrome komandā, viņu ceļojums tur faktiski nesākās. Mums agrāk bija HTML lietojumprogrammas (HTA), kuras Microsoft izveidoja 1999. gadā, kā arī daudzas citas tīmekļa lietotņu platformas no Nokia, BlackBerry un citiem uzņēmumiem. Tad 2007. gadā Stīvs Džobs prezentēja to, kas tajā laikā bija vienīgais veids, kā izveidot lietotnes sākotnējam iPhone: PWA, lai arī ar citu nosaukumu. Chrome sāka no turienes, dažus gadus vēlāk uzlaboja API un izgudroja PWA nosaukumu.
Kāpēc, mūsuprāt, tas darbosies tagad, kad ir tik daudz iepriekšēju neveiksmīgu mēģinājumu, lai tīmekļa saturs nonāktu lietotņu pasaulē? Pirmkārt, tikai daži ir tikai uzņēmumi, kas tagad strādā un reklamē PWA pamatā esošās tehnoloģijas, piemēram, Microsoft, Google, Apple un Mozilla. Arī tīmekļa platformas veiktspēja sasniedza punktu, kurā nav redzamas atšķirības, salīdzinot labi izstrādātu PWA ar vietējo lietotni. Šie apstākļi vēl nekad nav bijuši, un tas ir viens iemesls, kāpēc tīmekļa kopiena ir nolēmusi, ka ir pienācis laiks PWA.
PWA darbojas šodien
Šodien PWA ir pilnībā funkcionālas un instalējamas:
- Android ar lielāko daļu pārlūkprogrammu, un Chrome piedāvā vislabāko pieredzi
- iOS ar Safari
- Chromebook datori
- Windows 10 no Microsoft veikala
- Funkcionālie tālruņi ar KaiOS - dakšiņu no Firefox OS - šobrīd pieejami miljoniem lietotāju galvenokārt Indijā
Vēlāk šogad šogad atbalsts tiek nodrošināts arī ar MacOS, Windows un Linux, izmantojot Chrome. Tas ir pieejams šodien kā eksperimentāls karodziņš 'Desktop PWA', ja vēlaties to izmēģināt tūlīt. Instalēšana operētājsistēmā Windows Edge bez veikala izmantošanas notiks arī vēlāk, lai gan nav noteikts konkrēts laika posms.
Pārlasot sarakstu, jūs varat redzēt, ka nākamajās mēnešos katrai platformai ir vai ir paredzēts pilnībā instalējamu PWA atbalsts. Tā kā PWA ir tikai vietne ar augšpusē esošām funkcijām, kas tiks aktivizētas tikai saderīgās pārlūkprogrammās, mēs pat varam teikt, ka tā ir saderīga ar visām pārlūkprogrammām, sākot ar tās pamata funkcionalitāti.
Arī PWA pašlaik tiek ģenerēti no lielākās daļas CLI dažādiem ietvariem, ieskaitot Angular 6+ CLI, React Create App, PWA Starter Kit no Polymer un Preact CLI. Visbeidzot, Ionic Framework komanda nāca klajā ar ideju par Capacitor - atvērtā koda Cordova aizstājēju, kas vietējos PWA padara iespējamus katrā lietotņu veikalā.
Uzstādīšana
Viens no kritiskajiem PWA aspektiem ir lietotnes instalēšana. Šis process tiek veikts divās izvēles darbībās: lietotnes failu lejupielāde un uzglabāšana bezsaistē un ikonu instalēšana OS. Tā kā abas darbības nav obligātas, pārlūkprogrammā varat piedāvāt bezsaistes pieredzi vai arī piedāvāt ikonu bez instalēšanas bezsaistē. Bet patiesā PWA jāietver abi: tas ir jāapkalpo ar TLS zem HTTPS, un lietotājs izlems, vai to izmantos pārlūkprogrammā vai paša instalētās ikonas ietvaros.
Bezsaistē un tūlītēja palaišana
PWA smadzenes ir apkalpojošais darbinieks - lietotāja ierīcē instalēts JavaScript fails, kas ir atbildīgs par lietotnes failu lejupielādi, saglabāšanu kešatmiņā un vēlāk, kad nepieciešams, to apkalpošanu. Kad servisa darbinieks ir instalēts, tas darbojas kā tīkla starpniekserveris katram tīmekļa lietojumprogrammai vajadzīgajam resursam: tā var nolemt to ielādēt no tīkla vai piegādāt no vietējās kešatmiņas, kas padara lietotni pieejamu bezsaistē un pieejama arī tikai pāris milisekundes, pat ja lietotājam ir savienojums, kas līdzinās vietējās lietotnes palaišanai.
Lai instalētu apkalpojošo darbinieku, HTML dokumentā būs jāiekļauj kaut kas līdzīgs:
if (’serviceWorker’ navigatorā) navigator.serviceWorker.register ("sw.js");
Tas instalēs failu "sw.js" lietotāju ierīcēs pašreizējai mapei pašreizējā domēnā - šo jēdzienu sauc par darbības jomu. Pēc tam, kad tas ir instalēts, nākamos apmeklējumus jebkuram tā darbības jomā esošajam vietrādim URL pārvaldīs šis pakalpojumu sniedzējs.
Pieņemsim, ka mums ir PWA ar četriem failiem: index.html, app.js, app.css un logo.png. Pirmā lieta ir instalēt šos failus kešatmiņā failā sw.js.
const resursi = ["index.html", "app.js", "app.css", "logo.png"]; pats. addEventListener ("install", event => {event. waitUntil (cache.open ("myPWAcache") .then (cache => cache.addAll (resursi));});
Tad, lai PWA vienmēr tiktu piegādāts no kešatmiņas, mums jāieklausās ienesšanas notikumā pakalpojuma darbiniekā un jāizlemj izmantot kešatmiņas politiku, piemēram, vispirms kešatmiņu ar šo fragmentu.
self.addEventListener ("ielādēt", e => e.respondWith (kešatmiņas.match (e.request). tad (res => res);
Šajā gadījumā katru reizi, kad lietotājs piekļūst PWA (gan no pārlūkprogrammas, gan no instalētas ikonas), dzinējs saņems failus no kešatmiņas. PWA un vietējo lietotņu priekšrocība ir tāda, ka ierīcēm nav jāielādē visi faili vēlreiz, kad notiek izmaiņas, tikai fails, kas ir mainīts ar caurspīdīgu procesu. Turklāt mēs joprojām varam lejupielādēt lietotnes daļas pēc pieprasījuma.
Bet izaicinājums ir, kā jūs zināt, kuri faili tika atjaunināti serverī, lai tos varētu aizstāt kešatmiņā? Ja nevēlaties rakstīt zema līmeņa pakalpojumu darbiniekam, lai to pārvaldītu, varat izmantot atvērtā pirmkoda bibliotēkas Workbox, kas palīdzēs jums ģenerēt apkalpojošo darbinieku un resursu sarakstu, lai atjauninātu instalēto pakotni.
Ņemiet vērā, ka jūsu PWA faili tiks dzēsti, ja ierīcē ir spiediens, ja vien nepieprasāt pastāvīgu krātuvi, ja tāda ir pieejama:
ja (‘krātuve’ navigatorā && ’saglabājas’ navigator.storage) navigator.storage.persist ();
Pārlūkā Chrome un lielākajā daļā Android pārlūkprogrammu jūsu lietotne nevar izmantot vairāk nekā piecus procentus no pieejamās vietas; operētājsistēmā iOS tas ir tikai 50 MB (gandrīz 50 MB) katram resursdatoram; Edge tas ir mainīgs atbilstoši kopējam atmiņas izmēram, un Windows Store tas ir neierobežots.
Pirmklasīga pieredze
Mums ir smadzenes, un tagad ir laiks sirdij: tīmekļa lietotnes manifests. Vietnes pārvēršana par PWA mērķis ir ne tikai nodrošināt, ka tā ir pieejama ātri vai bezsaistē, bet arī ļaut tai OS būt ar savu ikonu un piedāvāt pilnīgi atsevišķu pieredzi, tāpat kā jebkuru citu instalētu lietotni.
Manifests ir JSON fails, kas definē PWA metadatus, ko pārlūks vai lietotņu veikals izmanto, lai definētu instalēšanas uzvedību.
Fails nosaka vairākus rekvizītus kā metadatus jūsu PWA. Katra operētājsistēma izlasīs šīs īpašības un centīsies visu iespējamo, lai tā atbilstu vēlamajai pieredzei. Piemēram, Android lasīs “display: standalone” un radīs normālu lietotņu pieredzi. Izmantojot ‘display: minimal-ui’, tas radīs pieredzi ar redzamu URL un TLS sertifikātu, kas ir noderīgi drošības ziņā jutīgām lietotnēm. Ar “display: fullscreen” tas rada pilnībā ieskaujošas lietotnes bez statusa joslas vai redzamas aizmugures pogas. Ikonu un krāsu kopa nosaka, kā uzpūtes ekrāni vai virsraksta joslas meklēs jūsu lietotnes logu.
Ir daži manifesta ģeneratori, piemēram, Web App Manifest Generator vai PWA Builder, kas arī mainīs ikonas lielumu jums dažādās izšķirtspējās, ja nodrošināsit augstas izšķirtspējas (vismaz 512 pikseļi).
Kad jūsu HTML dokumentā ir saistīts manifesta fails, lietotāji varēs instalēt lietotni, izmantojot dažādas metodes atkarībā no pārlūkprogrammas, ko parasti sauc par Pievienot sākuma ekrānam, Instalēt vai vienkārši Pievienot. Ja jūsu PWA var pārmeklēt Bing, Microsoft to automātiski pievienos Microsoft veikalam, lai Windows 10 lietotāji to varētu instalēt no turienes.
Dažās operētājsistēmās jūsu PWA varēs uztvert saites. Tas nozīmē, ka pēc tam, kad lietotājs ir instalējis lietotni, jebkurš URL, kas ietilpst jūsu manifestā, tiks atvērts jūsu lietotnes robežās, nevis pārlūkprogrammā, neatkarīgi no tā, vai tas tiek parādīts pārlūkprogrammā vai citās lietotnēs, piemēram, WhatsApp, Facebook vai e-pastu.
Ja jūs izturēsit PWA prasības, kuras mēs šeit definējam, dažas platformas piedāvās apkārtējās nozīmes (mazu ikonu parasti URL joslā, norādot, ka tīmeklis ir instalējams) vai tīmekļa lietotņu reklāmkarogu. Ja vēlaties, varat pievienot arī savu pielāgoto pogu Instalēt, izmantojot šo fragmentu:
window.addEventListener ("beforeinstallpr ompt", funkcija (e) {e.prompt (); // parādīs instalācijas vietējo uzvedni})
Ja PWA ir instalēts, notikums “appinstalled” tiks aktivizēts uz loga objekta, lai jūs varētu izsekot statistiku, kas to klausās.
Lietotņu veikali
Viena no galvenajām priekšrocībām, ko rada instalēšana no pārlūkprogrammas, ir iespēja izvairīties no lietotņu veikala apstiprināšanas procesa vai maksāt par izdevēju. Tam ir acīmredzamas priekšrocības, piemēram, tūlītēja publicēšana, privātu lietotņu izveidošana uzņēmumiem vai lietotnes, kuras nevajadzētu pieņemt veikalos.
Bet daži uzņēmumi patiešām vēlas atrasties veikalā. Kopš šodienas vienīgie veikali, kas oficiāli pieņem PWA, ir Windows veikals un kaiOS veikals. Par laimi, izmantojot tādus rīkus kā Capacitor (pašlaik Alfā) vai PWA Builder, mēs varam izveidot un parakstīt vietējās paketes arī citām platformām.
Ir daži PWA, kas jau ir publicēti Google Play veikalā, piemēram, Twitter Lite un Google Maps Go, kas pašlaik tiek pielāgoti. Pārlūks Chrome piedāvās risinājumu no pārlūka Chrome 68, izmantojot uzticamas tīmekļa darbības. No šī brīža mēs varēsim izveidot Android pakotni (APK) ar palaišanas programmu mūsu PWA un augšupielādēt to veikalā. Microsoft veikalam operētājsistēmā Windows 10 vietne PWA Builder pašlaik palīdz ģenerēt APPX Windows 10 pakotni. Izmantojot tīmekļa skatu, iespējams, varēsiet manuāli izveidot iOS lietotni App Store, taču esiet ļoti uzmanīgs attiecībā uz veikala noteikumiem.
Platformas integrācija
Ieviešot pakāpeniskas uzlabošanas paņēmienus, jūs varēsiet izmantot daudzas funkcijas, tostarp push paziņojumus, piekļuvi kamerai un mikrofonam, ģeogrāfisko atrašanās vietu, sensorus, maksājumus, koplietošanas dialoglodziņus un bezsaistes krātuvi. Visas šīs funkcijas darbojas tieši pārlūkprogrammas drošības modelī, ieskaitot atļauju dialoglodziņus.
Mēs varam sazināties arī ar citām lietotnēm, izmantojot URI shēmas, piemēram, atverot Twitter, YouTube vai WhatsApp, izmantojot viņu vietrāžus URL vai pielāgotos URI, piemēram, whatsapp: //.
Visbeidzot, izveidojot vietējos PWA, kas tiek publicēti veikalā, izmantojot Capacitor vai Microsoft Store, mēs varēsim pāriet uz vietējām API, kas ļaus mums izpildīt praktiski jebkuru vietējo kodu. Šī integrācija ar Windows 10 ietver piekļuvi aparatūrai, bet arī integrāciju ar OS, piedāvājot tādas iespējas kā Pin to Start. Piemēram, Twitter PWA ļauj piespraust jebkuru lietotāju sākuma ekrānā.
Dizains un UX izaicinājumi
PWA projektēšanai ir unikālas problēmas, tāpēc ir svarīgi pavadīt kādu laiku, pētot, pēc iespējas vairāk testējot un ņemot vērā sekojošo:
- Lietotāji sagaida lietotnei līdzīgu pieredzi.
- Instalēšanas process joprojām ir jauns, tāpēc mums jāpieliek papildu pūles, lai izskaidrotu, kā instalēt lietotni.
- Lietotnes atjaunināšana fonā bez lietotāja mijiedarbības ir lieliska, taču tā arī rada dažas problēmas UX.
- Darbvirsmā atsaucīgais tīmekļa dizains iegūst jaunu robežu, jo PWA logi var būt niecīgi, daudz mazāki nekā mobilais skata punkts. Tas nozīmē, ka mums ir jāizveido konkrēti skati vai nelieli logrīki šim formātam, kā tas šodien redzams Chrome OS.
- Push paziņojumiem vajadzētu pievienot vērtību tikai lietotājam, tāpēc iemācieties jautāt īstajā brīdī un netērējiet iespēju sūtīt ziņojumus, kas nav noderīgi vai interesanti.
- Mums ir jāizstrādā web veiktspēja un bezsaistes piekļuve.
PWA gads
Šogad pievienojot iOS un darbvirsmu, PWA šodien ir visur. Bet mums jāatceras, ka viņu ceļojums ir tikai sākums, tāpēc sagaidiet biežas izmaiņas un pārliecinieties, ka esat informēts par jaunākajām tehnikām un idejām, lai sniegtu izcilu lietotāja pieredzi, kamēr platforma attīstās.
Šis raksts sākotnēji tika publicēts 308 tīkls, pasaulē visvairāk pārdotais žurnāls tīmekļa dizaineriem un izstrādātājiem. Pērciet 308. numuru šeit vai abonēt šeit.
