PWA: Velkomin í farsímabyltinguna

Efni.

• Uppgangur PWAs
• PWAs í aðgerð í dag
• Uppsetning
• Ótengdur og strax ræst
• Fyrsta flokks reynsla
• App verslanir
• Samþætting vettvangs
• Hönnun og UX áskoranir
• Árið PWA

Rétt eins og móttækileg vefsíðuhönnun lokaði bilinu milli skjáborðs- og farsímasíðna fyrir nokkrum árum, eru framsæknar aðferðir við vefforrit að loka bilið á milli vefsins og appheimsins. Með reynslu notenda frá skjáborði í farsímaforrit sem fljótt renna saman virðist það vera mun sléttara og skilvirkara internet í þróun - þó óhjákvæmilega ekki án nokkurra verulegra breytinga á undirliggjandi erfðakóða þess.

• Hvernig á að byggja upp Progressive Web App

Augljóslega er einhver verulegur sértækur þrýstingur sem knýr þetta áfram. Fyrst af öllu, að búa til innfædd forrit fyrir hvern sess er ekki endilega skilvirk nýting auðlinda: notendur lenda í hundruðum stórra forrita sem eyða bandbreidd og dýrmætu plássi og fyrirtæki eyða miklum peningum í að búa til forrit aðeins til að þau verði yfirgefin eftir fyrstu útgáfur þeirra. Og flest þessara forrita eru bara knúin áfram af efni á vefnum: upplýsingar sem koma frá vefþjónustu eða efnisstjórnunarkerfi.

Skilgreiningin á framsæknu vefforriti er ekki áþreifanleg. A PWA er bara vefforrit sem notar nokkur ný forritaskil og hæfileika á vefpallinum með því að nota framsækna aukahlut til að bjóða upp á applíka reynslu á hverjum palli með sama kóðagrunn. Þetta er meira sett af bestu starfsháttum og forritaskilnotkun sem skapar frábæra upplifun af appi fyrir notendur þína, svo það er ekki eins og þú hafir PWA eða ekki. það er meira eins og vefsvæðið þitt sé meira og minna PWA.

Ert þú að fara að byggja nýja lóð? Prófaðu að nota vefsíðugerðarmann. Og vertu viss um að þú fáir stuðninginn sem þú þarft frá ágætis vefþjónusta líka. Eða fyrir eitthvað aðeins annað, sjá leiðbeiningar okkar um bestu skýjageymslu.

Uppgangur PWAs

Þó að nafnið PWA hafi verið mótað árið 2015 í greininni Flýja flipa án þess að missa sál okkar eftir Alex Russell sem starfaði hjá Google fyrir Chrome teymið, þá byrjaði ferð þeirra í raun ekki þar. Við höfðum áður haft HTML forrit (HTA) sem voru búin til af Microsoft árið 1999 ásamt mörgum öðrum vefforritapöllum frá Nokia, BlackBerry og öðrum fyrirtækjum. Svo, árið 2007, kynnti Steve Jobs það sem á þeim tíma var eina leiðin til að búa til forrit fyrir upprunalega iPhone: PWA, að vísu með öðru nafni. Chrome byrjaði þaðan, bætti forritaskilin nokkrum árum síðar og fann upp PWA nafnið.

Með svo marga fyrri misheppnaða reynslu sem reynt var að færa vefinn efni í heim forrita, hvers vegna teljum við að það gangi núna? Jæja fyrst og fremst, það er undir fyrirtækjunum sem nú vinna og kynna tæknina á bak við PWA, svo sem Microsoft, Google, Apple og Mozilla, svo fátt eitt sé nefnt. Einnig náði frammistaða vefpallsins stigi þar sem enginn munur er talinn á þegar þú berð saman vel hannað PWA við innfæddan app. Þessar aðstæður hafa aldrei verið áður og það er ein ástæðan fyrir því að vefsamfélagið hefur ákveðið að tíminn sé kominn fyrir PWA.

PWAs í aðgerð í dag

Í dag eru PWAs fullkomlega hagnýtar og uppsettar á:

• Android með flesta vafra, þar sem Chrome býður upp á bestu upplifunina
• iOS með Safari
• Chromebook tölvur
• Windows 10 frá Microsoft Store
• Aðgerðir símar með KaiOS - gaffli frá Firefox OS - eru nú í boði fyrir milljónir notenda aðallega á Indlandi

Stuðningur er einnig að koma til macOS, Windows og Linux í gegnum Chrome síðar á þessu ári. Það er fáanlegt í dag sem tilraunafáni 'Desktop PWA' ef þú vilt prófa það núna. Uppsetning á Windows á Edge án þess að nota verslunina kemur líka seinna, þó að enginn sérstakur tímarammi sé skilgreindur.

Ef þú endurlesir listann, geturðu séð að hver vettvangur hefur eða er í þann mund að hafa stuðning við PWA sem hægt er að setja upp á næstu mánuðum. Og vegna þess að PWA er bara vefsíða með eiginleikum að ofan sem verða aðeins virkjaðir í samhæfum vöfrum, getum við jafnvel sagt að það sé samhæft við alla vafra frá grunnvirkni þess.

Einnig er nú verið að búa til PWA úr flestum CLI fyrir mismunandi ramma, þar með talið Angular 6+ CLI, React Create forritið, PWA startpakkann frá Polymer og Preact CLI. Að lokum kom Ionic Framework teymið með hugmyndina um Capacitor, opinn uppsprettu Cordova skipti sem gerir innfæddar PWA mögulegar í öllum appverslunum.

Uppsetning

Einn af mikilvægustu þáttum PWA er uppsetning forritsins. Þetta ferli er gert í tveimur valfrjálsum skrefum: niðurhal og geymsla utan skjalar forritaskrárinnar og táknuppsetningin í stýrikerfinu. Þar sem bæði skrefin eru valfrjáls geturðu boðið upp á upplifun utan nets í vafranum eða þú getur boðið upp á táknmynd án uppsetningar án nettengingar. En sönn PWA ætti að innihalda hvort tveggja: það verður að þjóna því með TLS undir HTTPS og notandinn mun ákveða hvort hann muni nota það í vafranum eða innan eigin uppsettrar táknmyndar.

Ótengdur og strax ræst

Heilinn í PWA er þjónustumaður, JavaScript skrá sem er sett upp á tæki notandans sem sér um að hlaða niður skrám forritsins, geyma þau í skyndiminni og þjóna þeim síðar þegar þess er þörf. Þegar þjónustumaðurinn er uppsettur virkar hann eins og netumboð fyrir allar auðlindir sem vefforritið þarfnast: það getur ákveðið að sækja það af netinu eða koma því frá staðbundnu skyndiminni, sem gerir forritið aðgengilegt án nettengingar og einnig tiltækt á aðeins nokkrar millisekúndur, jafnvel þó að notandinn hafi tengingu, líkir eftir frumbyggingu forrits.

Til þess að setja upp þjónustumann þarf HTML skjalið þitt að innihalda eitthvað eins og:

if (’serviceWorker’ in navigator) navigator.serviceWorker.register („sw.js“);

Það mun setja skrána „sw.js“ á tæki notenda fyrir núverandi möppu í núverandi léni - hugtak sem kallast umfang. Eftir að það er sett upp verður næstu heimsóknum á hvaða vefslóð sem er innan gildissviðs stjórnað af þeim þjónustumanni.

Við skulum segja að við höfum PWA með fjórum skrám: index.html, app.js, app.css og logo.png. Það fyrsta er að setja þessar skrár í skyndiminnið í sw.js skránni.

const resources = ["index.html", "app.js", "app.css", "logo.png"]; sjálf. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache") .þá (cache => cache.addAll (resources)));});

Svo að PWA sé alltaf borið fram úr skyndiminni skulum við hlusta á sóknaratburðinn innan þjónustumannsins og ákveða skyndiminni stefnuna sem á að nota, svo sem skyndiminni fyrst með eftirfarandi bút.

self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). þá (res => res);

Í þessu tilfelli, í hvert skipti sem notandinn fær aðgang að PWA (bæði úr vafra eða frá uppsettu tákni) fær vélin skrárnar úr skyndiminni. Kostur PWAs gagnvart innfæddum forritum er að tæki þurfa ekki að hlaða niður öllum skrám aftur þegar breyting er á, aðeins skráin sem hefur breyst með gagnsæju ferli. Einnig getum við ennþá sótt hluta af forritinu eftir þörfum.

En áskorunin er hvernig veistu hvaða skrár voru uppfærðar á netþjóninum svo þú getir skipt þeim út í skyndiminni? Ef þú vilt ekki skrifa þjónustumann á lágu stigi til að stjórna þessu geturðu notað opinn bókasafnið Workbox, sem mun hjálpa þér við framleiðslu þjónustumannsins og auðlindirnar til að uppfæra uppsettan pakka.

Hafðu í huga að skrám PWA þinnar verður eytt ef geymsluþrýstingur er á tækinu, nema þú biðjir um viðvarandi geymslu ef það er í boði:

ef (‘geymsla’ í stýrimanni && ‘viðvarandi’ í navigator.storage) navigator.storage.persist ();

Í Chrome og flestum Android vöfrum getur forritið þitt ekki notað meira en fimm prósent af lausu plássi; í iOS er það 50MiB (nálægt 50MB) á hvern gestgjafa; í Edge er það breytilegt eftir heildarstærð minni og í Windows Store er það ótakmarkað.

Fyrsta flokks reynsla

Við höfum heilann og nú er kominn tími fyrir hjartað: birtingarmynd vefforritsins. Tilgangurinn með því að breyta vefsíðu í PWA er ekki bara að tryggja að hún sé fáanleg fljótt eða án nettengingar heldur einnig að gera henni kleift að hafa sitt eigið tákn í stýrikerfinu og bjóða upp á algjörlega sjálfstæða upplifun eins og hvert annað uppsett forrit.

Upplýsingaskráin er JSON skrá sem skilgreinir lýsigögn fyrir PWA sem notuð er af vafra eða appbúð til að skilgreina uppsetningarhegðun.

Skráin skilgreinir nokkra eiginleika sem lýsigögn fyrir PWA. Hvert stýrikerfi mun lesa þessa eiginleika og reyna eftir fremsta megni að passa við þá reynslu sem þú vilt. Til dæmis mun Android lesa „skjá: sjálfstætt“ og búa til venjulega upplifun af appi. Með ‘skjá: lágmarks-ui’ mun það skapa upplifun með sýnilegri slóð og TLS vottorð - gagnlegt fyrir öryggisnæm forrit. Með ‘skjánum: fullskjánum’ býr það til fullkomlega grípandi forrit án stöðustiku eða sýnilegs afturhnapps. Sett af táknum og litum skilgreinir hvernig skvettuskjáir eða titilstikur líta út fyrir glugga forritsins þíns.

Það eru nokkur augljós rafala, svo sem Web App Manifest Generator eða PWA Builder sem einnig breyta stærð táknsins fyrir þig í mismunandi upplausn ef þú gefur háupplausn (lágmark 512 punktar).

Þegar þú ert með tengda manifestaskrána í HTML skjalinu þínu, geta notendur sett upp forritið með mismunandi aðferðum eftir vafranum, venjulega kallað Bæta við heimaskjá, setja upp eða bara bæta við. Ef PWA er hægt að skríða með Bing mun Microsoft bæta því sjálfkrafa við Microsoft Store svo notendur Windows 10 geti sett það upp þaðan.

Í sumum stýrikerfum mun PWA hafa getu til að fanga tengla. Þetta þýðir að eftir að notandinn hefur sett upp forritið verður hvaða vefslóð sem er innan gildissviðs manifestsins opnuð innan marka forritsins þíns en ekki í vafranum, sama hvort það birtist í vafranum eða öðrum forritum eins og WhatsApp, Facebook eða tölvupóst.

Ef þú stenst PWA kröfurnar sem við erum að skilgreina hér, munu sumir pallar bjóða upp á umhverfismerki (lítið tákn venjulega á slóðinni sem tilgreinir að vefurinn sé uppsettanlegur) eða vefforritaborða. Ef þú vilt það geturðu einnig bætt við þínum sérsniðna uppsetningarhnappi með eftirfarandi bút:

window.addEventListener ("beforeinstallpr ompt", aðgerð (e) {e.prompt (); // mun sýna uppsetningu innfæddra hvetja})

Ef PWA er sett upp verður atburðurinn 'appinstalled' rekinn á gluggahlutinn svo þú getir fylgst með tölfræði sem hlustar á hann.

App verslanir

Einn helsti ávinningur þess að setja upp í vafra er að geta forðast samþykki fyrir app-verslun eða þurfa að borga fyrir að vera útgefandi. Þessu fylgja augljósir kostir, svo sem augnabliksútgáfa, búa til einkaforrit fyrir fyrirtæki eða forrit sem ekki ætti að samþykkja í verslunum.

En sum fyrirtæki vilja vera í versluninni. Frá og með deginum í dag eru einu verslanirnar sem samþykkja opinberlega PWAs Windows Store og kaiOS Store. Sem betur fer, með verkfærum eins og þétti (sem stendur í Alpha) eða PWA Builder, getum við búið til og undirritað innfæddur pakki fyrir aðra kerfi líka.

Það eru nokkur PWA sem þegar hafa verið birt í Google Play Store, svo sem Twitter Lite og Google Maps Go, sem eru nú undir sérsniðnum útfærslum. Chrome mun bjóða upp á lausn frá Chrome 68 með áreiðanlegum vefstarfsemi. Frá þeim tímapunkti munum við geta búið til Android pakka (APK) með sjósetja í PWA okkar og hlaðið því í verslunina. Fyrir Microsoft Store í Windows 10 er síðan PWA Builder að hjálpa til við gerð APPX Windows 10 pakka. Með því að nota vefskoðun gætirðu búið til iOS app handvirkt fyrir App Store en verið mjög varkár varðandi reglur verslunarinnar.

Samþætting vettvangs

Með því að innleiða framsækna aðferðir við aukahluti muntu geta notað marga möguleika, þar á meðal ýttu tilkynningar, aðgang að myndavél og hljóðnema, landsvæði, skynjara, greiðslur, samnýtingarglugga og geymslu án nettengingar. Allir þessir eiginleikar keyra beint innan öryggismódels vafrans, þ.mt leyfisgluggar.

Við getum líka átt samskipti við önnur forrit í gegnum URI kerfi, svo sem að opna Twitter, YouTube eða WhatsApp í gegnum vefslóðir þeirra eða sérsniðin URI, svo sem whatsapp: //.

Að lokum, þegar búið er til innfæddar PWA sem eru gefnar út í versluninni með þétti eða í Microsoft Store, munum við geta brúað yfir í innfædd API sem gerir okkur kleift að framkvæma nánast hvaða innfæddan kóða. Þessi samþætting við Windows 10 inniheldur aðgang að vélbúnaði en einnig samþættingu við stýrikerfið og býður upp á möguleika eins og Pin to Start. Til dæmis gerir Twitter PWA þér kleift að festa hvaða notanda sem er á upphafsskjáinn þinn.

Hönnun og UX áskoranir

Hönnun PWAs hefur einstaka áskoranir, svo það er mikilvægt að eyða smá tíma í að rannsaka, prófa eins mikið og mögulegt er og íhuga eftirfarandi:

• Notendur munu búast við upplifun eins og forritum.
• Uppsetningarferlið er enn nýtt og því þurfum við að leggja okkur meira fram við að útskýra hvernig setja á upp forritið.
• Að uppfæra appið í bakgrunni án samskipta notenda er frábært en það bætir einnig nokkrum áskorunum fyrir UX.
• Á skjáborðinu tekur móttækileg vefsíðuhönnun nýja landamæri þar sem PWA gluggar geta verið litlir, miklu minni en farsíma útsýni. Þetta þýðir að við þurfum að búa til sérstakar skoðanir eða litla búnað fyrir þetta snið, eins og sést í Chrome OS í dag.
• Push tilkynningar ættu aðeins að auka gildi fyrir notandann, svo lærðu að spyrja á réttu augnabliki og ekki eyða tækifærinu í að senda skilaboð sem eru ekki gagnleg eða áhugaverð.
• Við þurfum að hanna fyrir frammistöðu á vefnum og fyrir aðgang án nettengingar.

Árið PWA

Að viðbættum iOS og skjáborði á þessu ári eru PWA alls staðar í dag. En við verðum að muna að ferð þeirra er rétt að byrja, svo búast við tíðum breytingum og vertu viss um að halda þér uppfærð með nýjustu tækni og hugmyndum til að skila framúrskarandi notendaupplifun meðan vettvangurinn þróast.

Þessi grein var upphaflega birt í tölublaði 308 af net, söluhæsta tímarit heims fyrir vefhönnuði og forritara. Kauptu tölublað 308 hér eða gerast áskrifandi hér.