9 hämmastavat PWA saladust

Progressiivsed veebirakendused (PWA) on uus piir aastal 2007 tundlik veebidisain ja nende populaarsus kasvab. PWA tugi sai alguse Androidi Chrome'ist ja on nüüd saadaval enamikus teistes Androidi brauserites, nagu Opera, Firefox, Samsung Internet ja UCWeb, samuti iPhone'ides ja iPadides iOS 11.3-st ning Edge for Windowsile ja Chrome'ile lauaarvutite opsüsteemides.

Et aidata teil head luua kasutuskogemus selle kasvava publiku jaoks jagame olulisi nippe ja ideid. Lisateabe saamiseks vaadake meie artiklit kuidas rakendust luua .

01. WebAPK vs Androidi otsetee

2017. aastal tõi Chrome Androidi kasutajatele välja uue funktsiooni: WebAPK. Nüüd, kui teie kasutajad installivad teie PWA (kui see vastab nõuetele), loob Google Play server käigult APK (Androidi pakett, kohalik rakenduse konteiner) ja installib selle seadmesse nii, nagu oleks see pärit Play poest . Teie kasutaja ei pea lubama ebaturvalisi allikaid ega puudutama muid seadeid.

Kui PWA on installitud, kuvatakse see avakuval, rakenduste käivitusprogrammis, seadetes ja kõigi muude OS-i esmaklassiliste kodanikurakendustega, sealhulgas teave süsteemis kasutatava aku ja ruumi kohta.

Kui teie PWA ei vasta kõigile nõuetele, Play teenus on maas, on ühenduse probleem või kui kasutatakse mõnda muud Androidi brauserit, näiteks Firefox või Samsung Internet, luuakse avaekraanile standardne otsetee. See ikoon on brauseri kaubamärgiga alates Android 8+.

WebAPK võimaldab ka mõnusat, kuid ohtlikku funktsiooni, millest peate olema teadlik: PWA-le kuulub domeen ja tee Android OS-i piirides. Teie veebirakenduste manifesti sordiatribuudi põhjal edastatakse iga link, mille kasutaja selle ulatuseni saab, teie täisekraanil kuvatavale rakendusele, mitte brauserile, mis tähendab, et peate pöörama tähelepanu kasutatavatele URL-idele.

Oletame, et teil on mobiilikasutajaid teenindav PWA ja see asub teie domeeni juurkaustas. Kui rakendus on WebAPK kaudu installitud, kuulub nüüd kogu domeen PWA-le. Kui teil on küsitlus aadressil / survey, mida jagate Facebooki kaudu, või PDF koos tingimustega, mille saadate oma kasutajatele aadressil /terms.pdf, avab operatsioonisüsteem nendel linkidel klõpsates PWA, mitte brauseri. Oluline on kontrollida, kas teie PWA marsruutimissüsteem teab nende URL-ide kohta ja kuidas neid serveerida, ja kui ei, siis avage need muu ulatusega brauseris.

02. Looge kohandatud veebirakenduse installiriba

Me saame

Me ei saa brauseri veebirakenduse installiriba kohandada, kuid võime pärast kasutajale lisateabe näitamist neid edasi lükata

Mitmed brauserid kutsuvad kasutajat installima teie PWA, kui teatud tingimused on täidetud, sealhulgas selle kasutaja korduvad külastused teie PWA jaoks. Praegu ei sisalda ribariba piisavalt teavet selle kohta, miks kasutaja peaks nõustuma. Kuid me võime sündmusi kasutada bänneri vältimiseks ja mis veelgi tähtsam, selle edasilükkamiseks millegi tõenäolisema heakskiidu saamiseks, näiteks installimise ikooni jaoks.

Esimene samm on bänneri välimuse tühistamine ja sündmuse objekti salvestamine hilisemaks kasutamiseks:

// global variable for the event object var installPromptEvent; window.addEventListener('beforeinstallprompt', function(event) { event.preventDefault(); installPromptEvent = event; });

Järgmine samm on pakkuda kasutajaliides, et selgitada installimise eeliseid või nuppu Install. See kasutajaliides kutsub meie järgmist funktsiooni:

function callInstallPrompt() { // We can't fire the dialog before preventing default browser dialog if (installPromptEvent !== undefined) { installPromptEvent.prompt(); } }

03. Jagage oma PWA-st sisu

Ühilduvates brauserites käivitab veebijagamise API opsüsteemist tuntud jagamisdialoogi

Ühilduvates brauserites käivitab veebijagamise API opsüsteemist tuntud jagamisdialoogi

Kui teie PWA on täisekraanirežiimis, pole brauseril URL-i riba ega toimingut Jaga, et kasutaja saaks sisu sotsiaalsete võrgustikega jagada. Saame kasutada veebijagamise API eeliseid ja meil on natiivsete sotsiaalsete rakenduste avamine.

function share() { var text = 'Add text to share with the URL'; if ('share' in navigator) { navigator.share({ title: document.title, text: text, url: location.href, }) } else { // Here we use the WhatsApp API as fallback; remember to encode your text for URI location.href = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(text + ' - ') + location.href } }

04. Analüütika jälgimine

Kui teil on PWA, soovite jälgida võimalikult palju sündmusi, nii et vaatame kõike, mida me praegu mõõta saame. Nende sündmuste hilisemaks jälgimiseks võite kasutada Google Analyticsi API-sid või mis tahes muid analüütilisi tööriistu.

window.addEventListener('appinstalled', function(event) { // Track event: The app was installed (banner or manual installation) }); window.addEventListener('beforeinstallprompt', function(event) { // Track event: The web app banner has appeared event.userChoice.then(function(result) { if (result.outcome === 'accepted') { // Track event: The web app banner was accepted } else { // Track event: The web app banner was dismissed } }); });

Järgmine oluline jälgimissündmus on see, kui kasutaja avab rakenduse avaekraanilt. See tähendab, et kasutaja on klõpsanud rakenduse ikoonil või klõpsanud WebAPK toega Androidis ka PWA ulatusele viitaval lingil.

Lihtsaim viis selleks on manifesti atribuudi start_url lisamine, lisades URL-i jälgimissündmuse, mida saab automaatselt kasutada Analyticsi skripti päritoluna, näiteks:

start_url: '/?utm_source=standalone&utm_medium=pwa'

Järgmine skript jätab meile tõeväärtuse, märkides, kas kasutaja on praegu brauseris (tõene) või eraldiseisvas rakenduse režiimis (vale):

var isPWAinBrowser = true; // replace standalone with fullscreen or minimal-ui according to your manifest if (matchMedia('(display-mode: standalone)').matches) { // Android and iOS 11.3+ isPWAinBrowser = false; } else if ('standalone' in navigator) { // useful for iOS < 11.3 isPWAinBrowser = !navigator.standalone; }

Seejärel, kui kasutate tõukemärguandeid, saate hooldustöölises jälgida mitmeid sündmusi, näiteks:

self.addEventListener('push', function(e) { // Track event: Push Message Received }); self.addEventListener('notificationclick', function(e) { // Track event: Push Message Clicked, you can read e.action.id to track actions }); self.addEventListener('notificationclose', function(e) { // Track event: Push Message Dismissed });

05. Looge ühilduv iOS PWA

PWA-de tegemisel iOS-is kontrollige alati oma olekuriba määratlust, mis loob erinevad olekuriba kogemused

PWA-de tegemisel iOS-is kontrollige alati oma olekuriba määratlust, mis loob erinevad olekuriba kogemused

Kuigi paljud arvavad, et PWA tugi hakkab esimest korda jõudma iOS 11.3-le, on tõsi, et kontseptsiooni - ehkki erineva nimega - esitas Steve Jobs rohkem kui kümme aastat tagasi WWDC 07-s. Seetõttu toetas iOS avakuva ja võrguühenduseta rakendused mõnda aega, kasutades pärandtehnikat. Kuid alates iOS 11.3-st hakkab see toetama samu spetsifikatsioone nagu Android.

Kui soovite siiski enne iOS 11.3-d installimiskogemust pakkuda, peate lisama metasildid või kasutama selle autori loodud polüfilli aadressil https://github.com/firtman/iWAM

Nüüd on teie PWA võrguühenduseta ja iOS-ile installitav, isegi kui te ei soovi iOS-i lubada. Oluline on mõista mõningaid erinevusi, mis võivad mõjutada teie PWA kasutuskogemust iOS-is:

  1. Kasutajaliidese probleemide vältimiseks peavad iOS-i ikoonid olema ruudukujulised ja läbipaistmatud. Ärge kasutage sama ikooni, mis teil on Androidis. Kasutage iPhone'i jaoks 120x120 ja 180x180.
  2. Kui teil on SPA või linkite teistele oma reguleerimisala lehtedele, olge navigeerimisega ettevaatlik, kuna iOS-i kasutajatel pole võimalust tagasi või edasi liikuda, kui te ei paku oma kasutajaliideses navigeerimislinke. Pühkimisžestid ei tööta täisekraanil PWA-de puhul.
  3. Alates iOS 11.3 esimestest versioonidest laadib operatsioonisüsteem PWA-d igal rakenduse juurdepääsul, nii et kui kasutaja peab rakendusest välja tulema, et hiljem tagasi tulla (näiteks kahepoolse autentimisprotsessi jaoks), pidage meeles oma rakendus algab vaikimisi nullist.

06. Andmete sünkroonimine taustal

Teenindustöötajatel on PWA aknast või brauseri vahekaardilt eraldi elutsükkel. Sellepärast saate võrgutoiminguid teha taustal isegi pärast kasutaja PWA sulgemist. Kui ootel operatsioon on olemas ja sellel hetkel pole võrgule juurdepääsu saadaval, laseb mootor meil taustal olles töödelda, kui ühendus hiljem tuvastatakse.

Taustsünkroonimise API on praegu saadaval ainult mõnes brauseris, seega peate tagavaravarustuse pakkuma. Idee on selles, et teie PWA seab lipiku stringimärgendiga, märkides, et ta peab tegema sünkroonimise taustal.

navigator.serviceWorker.ready.then(function(reg) { reg.sync.register('myTag') });

Seejärel kuulame ServiceWorkeris sündmust ja kui see on silt, siis loodame, et anname lubaduse. Kui lubadus täidetakse, märgitakse operatsioon lõpetatuks. Kui ei, siis proovib ta taustal hiljem.

self.addEventListener('sync', function(event) { if (event.tag === 'myTag') { event.waitUntil(doAsyncOperationForMyTag()); } });

07. Sotsiaalsed võrgustikud ja pseudobrauserid

Kui teie kasutajad jagavad teie PWA-sisu sotsiaalsetes võrgustikes või kui nad kasutavad pseudobrausereid (brauserid ilma oma mootorita, kuid kasutavad veebivaateid), peate olema teadlik mõnest probleemist.

Näiteks kasutab Facebook Androidi ja iOS-i rakendustes veebivaadet, et pakkuda rakendusesisest sirvimiskogemust, kui kasutajad lingil klõpsavad. Androidis ei toeta enamus veebivaateid teenindustöötajaid ega saa teie PWA-d installida, nii et kui kasutaja teie sisu Facebookist avab, käitub teie PWA nagu ühildumatu brauser ilma vahemällu salvestatud failide ja seansi üksikasjadeta .

Alates versioonist iOS 11.3 toetab WebView teenindustöölisi, kuid see on sama PWA kloon, mida kasutaja on kasutanud Safaris või isegi muudes pseudobrauserites, näiteks Chrome'is või Firefoxis iOS-is.

Seega, kui renderdate installiriba või installi vihje dialoogi, mis selgitab teie rakenduse installimise väärtust, kontrollige, kas olete veebivaates, kuna kasutaja ei saa teie juhiseid järgida. Peida see teave või kutsuge kasutaja avama URL vaikebrauseris. See kehtib muude rakenduste hulgas Androidi Facebooki, iOS-i Facebooki, iOS-i Chrome'i ja iOS-i Firefoxi kohta. Otsekontrolli tegemine, kui olete veebivaates või mitte, on keeruline, kuid on olemas abistaja tööriist saadaval .

08. Test Android-seadmetes ja emulaatorites

Teenindustöötajate ja veebirakenduste manifestide testimiseks on vaja https-i, välja arvatud localhost. Kuigi esialgu on kohalike arvutite testimine korras, tahame ühel hetkel näha oma PWA-sid Android-seadmetes toimimas. Kuidas me saame seda teha? Dev-serverile juurdepääs meie telefonist või Android-emulaatorist ei toimi, kuna see ei ole https ega kohalik host Android OS-i seisukohast.

Lahendus ilmub Chrome'i arendaja tööriistadega. Kui läheme lehele chrome: // kontrollime ja avame emulaatori või reaalse seadme, millel on ühendatud USB-silumine, saame lubada pordi edastamise. Seejärel edastatakse meie Android-seadme http: // localhost meie hostarvuti kohalikule hostile või mõnele muule hostile. Selle trikiga renderdab Android PWA ebaturvalise ühenduse korral korralikult. Pidage siiski meeles, et kuigi WebAPK loob paketi ja installib selle, ei pruugi see iseseisvas režiimis töötada.

09. Kirjastamine kauplustes

PWA Builder on Microsofti veebitööriist kauplustega ühilduvate PWA-pakettide loomiseks Windows 10 ja teiste operatsioonisüsteemide jaoks

PWA Builder on Microsofti veebitööriist kauplustega ühilduvate PWA-pakettide loomiseks Windows 10 ja teiste operatsioonisüsteemide jaoks

Kuigi PWA-lähenemine ei alanud poode silmas pidades, hakkasid mõned pakkumised, sealhulgas Play poes olevad Twitter Lite ja Google Maps Go, pakkuma PWA-sid kauplustes. Kui see on midagi, mis teid huvitab, saate oma PWA-d levitada ilma Cordovaga pakendamata:

  • Microsofti pood: saate Windows 10 jaoks PWA luua ametliku tööriista abil pwabuilder.com
  • Google Play pood: kirjutamise ajal võimaldavad Canary Channelil saadaval olevad usaldusväärsed veebitegevused luua Androidi rakenduse, mis lihtsalt avab teile kuuluva PWA ja levitab seda poes, luues sarnase lahenduse nagu WebAPK. Saate rohkem teada saada siin .
  • Apple App Store: PWA-de levitamiseks pole praegu ametlikke lahendusi, kuid WKWebView toetab teenuse töötajaid alates iOS 11.3-st, seega pole PWA-le lihtsa ümbrise loomine keeruline. Küsimus on selles, kas Apple kiidab selle poes heaks? Apple ei soovi lahendusi, mis on lihtsalt veebisaidid, millel on ümbris.

See artikkel avaldati algselt 304. Aasta väljaandes võrk , maailma enimmüüdud ajakiri veebidisaineritele ja -arendajatele. Osta väljaanne 304 siit või telli siin .

Seotud artiklid: