Sisu
- PWA-de tõus
- PWA-d tegutsevad täna
- Paigaldamine
- Võrguühenduseta ja kohene käivitamine
- Esmaklassiline kogemus
- Rakenduste poed
- Platvormi integreerimine
- Disain ja UX väljakutsed
- PWA-de aasta
Nii nagu reageeriv veebidisain paar aastat tagasi lõhe töölaua- ja mobiilisaitide vahel lõi, vähendavad progressiivsed veebirakenduste tehnikad praegu tühimikku veebi ja rakenduste maailma vahel. Kuna kasutajate kogemused alates töölauast kuni mobiilirakendusteni kiiresti lähenevad, tundub, et areneb palju klanitud ja tõhusam internet - ehkki paratamatult mitte ilma selle aluseks oleva geneetilise koodi oluliste muudatusteta.
- Kuidas luua progressiivset veebirakendust
Ilmselt juhivad seda mõned olulised valikulised surved. Esiteks ei tähenda iga niši jaoks natiivrakenduste loomine ressursside tõhusat kasutamist: kasutajad raiskavad sajad suured rakendused ribalaiust ja väärtuslikku kettaruumi ning ettevõtted kulutavad palju raha ainult neile hülgamiseks mõeldud rakenduste loomiseks. pärast nende esimesi versioone. Ja enamikku neist rakendustest juhib lihtsalt veebisisu: veebiteenustest või sisuhaldussüsteemist tulev teave.
Progressiivse veebirakenduse määratlus pole konkreetne. PWA on lihtsalt veebirakendus, mis kasutab veebiplatvormil mitmeid uusi API-sid ja võimeid, kasutades järkjärgulist täiustust, et pakkuda rakendusetaolist kogemust kõigil sama koodibaasiga platvormidel. See on pigem parimate tavade ja API kasutamise kogum, mis loob teie kasutajatele suurepärase rakendusesarnase kasutuskogemuse, nii et see pole nii, nagu teil oleks või poleks PWA-d; pigem on teie sait enam-vähem PWA.
Kas hakkate uut saiti ehitama? Proovige kasutada veebisaidi koostajat. Ja veenduge, et saaksite vajalikku tuge ka korralikust veebimajutusteenusest. Või pisut erineva kohta vaadake meie juhendit parima pilvemälu kohta.
PWA-de tõus
Kui Chrome'i meeskonnas Google'is töötanud Alex Russell kasutas nime PWA 2015. aastal artiklis Escaping Tabs Ilma meie hinge kaotamata, ei alanud nende teekond seal. Varem olid meil HTML-rakendused (HTA-d), mille lõi Microsoft 1999. aastal koos paljude teiste Nokia, BlackBerry ja teiste ettevõtete veebirakenduste platvormidega. Seejärel esitas Steve Jobs 2007. aastal selle, mis oli tollal ainus viis rakenduste loomiseks algsele iPhone'ile: PWA-d, ehkki teise nimega. Chrome alustas sealt, parandas paar aastat hiljem API-sid ja leiutas PWA nime.
Nii palju varasemaid ebaõnnestunud kogemusi, mis üritavad veebisisu rakenduste maailma tuua, miks me arvame, et see nüüd töötab? Noh, peamiselt on need ettevõtted, kes praegu töötavad ja reklaamivad PWA-de taga olevaid tehnoloogiaid, nagu Microsoft, Google, Apple ja Mozilla. Samuti jõudis veebiplatvormi jõudlus punkti, kus tajutud erinevust pole, kui võrrelda hästi kujundatud PWA-d põlisrakendusega. Neid tingimusi pole kunagi varem olnud ja see on üks põhjus, miks veebikogukond otsustas, et PWA-de aeg on käes.
PWA-d tegutsevad täna
Täna on PWA-d täielikult funktsionaalsed ja installitavad:
- Android enamiku brauseritega, Chrome pakub parimat kasutuskogemust
- iOS koos Safariga
- Chromebookid
- Windows 10 Microsofti poest
- KaiOSiga - Firefoxi OS-i kahvliga - telefonid on praegu saadaval miljonitele kasutajatele peamiselt Indias
Sel aastal saab Chrome'i kaudu tuge ka macOS, Windows ja Linux. Kui soovite seda kohe proovida, on see täna saadaval eksperimentaalse lipuna 'Desktop PWA'. Windowsi serverisse installimine ilma poe kasutamiseta toimub ka hiljem, ehkki konkreetset ajavahemikku pole määratletud.
Kui loendi uuesti läbi loete, näete, et järgmistel kuudel on igal platvormil täielikult installitavate PWA-de tugi või peagi. Kuna PWA on lihtsalt funktsioonidega veebisait, mis aktiveeritakse ainult ühilduvates brauserites, võime isegi öelda, et see sobib kõigi brauseritega alates oma põhifunktsioonidest.
Samuti luuakse PWA-sid praegu enamiku erinevate raamistike kliendipunktidest, sealhulgas Angular 6+ CLI, React Create App, Polymer PWA Starter Kit ja Preact CLI. Lõpuks pakkus Ionic Framework meeskond välja idee Capacitorist, mis on avatud lähtekoodiga Cordova asendus, mis võimaldab kohalikke PWA-sid igas rakenduste poes.
Paigaldamine
PWA üks kriitilisi aspekte on rakenduse installimine. See protsess toimub kahes valikulises etapis: rakenduse failide allalaadimine ja võrguühenduseta salvestamine ning ikoonide installimine OS-is. Kuna mõlemad toimingud on valikulised, saate brauseris pakkuda võrguühenduseta kasutuskogemust või pakkuda ikooni ilma võrguühenduseta installimata. Kuid tõeline PWA peaks sisaldama mõlemat: seda tuleb HTSPS-i abil serveerida TLS-iga ja kasutaja otsustab, kas ta kasutab seda brauseris või oma installitud ikooni piires.
Võrguühenduseta ja kohene käivitamine
PWA aju on teenindustöötaja - kasutaja seadmesse installitud JavaScripti fail, mis vastutab rakenduse failide allalaadimise, nende vahemällu salvestamise ja vajaduse korral hiljem esitamise eest. Kui hooldustöötaja on installitud, toimib see nagu iga veebirakenduse jaoks vajaliku ressursi võrgupuhverserver: ta võib otsustada selle hankida võrgust või kohalikust vahemälust, mis muudab rakenduse võrguühenduseta kättesaadavaks ja on saadaval ka lihtsalt paar millisekundit, isegi kui kasutajal on ühendus, emiteerides rakenduse kohalikku käivitamist.
Teenindustöötaja installimiseks peab teie HTML-dokument sisaldama järgmist:
if (navigaatoris ’’ serviceWorker ’) navigaator.serviceWorker.register (" sw.js ");
See installib faili sw.js praeguse domeeni praeguse kausta kasutajate seadmetesse - seda mõistet nimetatakse ulatuseks. Pärast selle installimist haldab teenindustöötaja järgmisi külastusi mis tahes selle reguleerimisalasse kuuluvas URL-is.
Oletame, et meil on nelja failiga PWA: index.html, app.js, app.css ja logo.png. Esimene asi on nende failide installimine sw.js-faili vahemällu.
const ressursid = ["index.html", "app.js", "app.css", "logo.png"]; ise. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache"). siis (cache => cache.addAll (ressursid));});
Siis, kui PWA-d pakutakse alati vahemälust, peame kuulama teenindustöötaja allalaadimise sündmust ja otsustama, millist vahemälupoliitikat kasutada, näiteks vahemälu kõigepealt järgmise jupiga.
self.addEventListener ("tooma", e => e. vastavadWith (vahemälud.match (e.request). siis (res => res);
Sellisel juhul saab iga kord, kui kasutaja pöördub PWA poole (nii brauserist kui ka installitud ikoonilt), failid vahemälust. PWA-de ja kohalike rakenduste eeliseks on see, et muutuste korral ei pea seadmed kõiki faile uuesti alla laadima, vaid ainult läbipaistva protsessiga muutunud faile. Samuti võime rakenduse osi siiski nõudmisel alla laadida.
Kuid väljakutse seisneb selles, kuidas saate teada, milliseid faile serveris värskendati, et saaksite need vahemälus asendada? Kui te ei soovi selle haldamiseks kirjutada madalama taseme teenindustöötajat, võite kasutada avatud lähtekoodiga teegi Workboxi, mis aitab teil installitud paketi värskendamiseks hooldustöötaja genereerimist ja ressursside manifesti.
Pange tähele, et teie PWA-failid kustutatakse, kui seadmel on salvestussurve, kui te ei soovi püsivat salvestusruumi, kui see on saadaval:
if (’navigeerimisruumis’ ja & ’’ navigeerimisseadmes navigator.storage) navigaator.storage.persist ();
Chrome'is ja enamikus Androidi brauserites ei saa teie rakendus kasutada rohkem kui viit protsenti saadaolevast ruumist; iOS-is on see ainult 50MiB (peaaegu 50MB) hosti kohta; Edge'is on see muutuv vastavalt kogu mälumahule ja Windows Store'is on see piiramatu.
Esmaklassiline kogemus
Meil on aju ja nüüd on aeg südame jaoks: veebirakenduse manifest. Veebisaidi muutmine PWA-ks ei taga mitte ainult selle kiiret või võrguühenduseta kättesaadavust, vaid ka võimaldada sellel operatsioonisüsteemis oma ikooni ja pakkuda täiesti iseseisvat kogemust nagu mis tahes muu installitud rakendus.
Manifest on JSON-fail, mis määratleb PWA metaandmed, mida brauser või rakenduste pood kasutab installimiskäitumise määratlemiseks.
Fail määratleb mitu atribuuti teie PWA metaandmetena. Iga operatsioonisüsteem loeb need omadused läbi ja proovib oma parima, et see vastaks teie eelistustele. Näiteks loeb Android sõna „display: standalone” ja loob tavalise rakenduskogemuse. Funktsiooniga 'display: minimal-ui' loob see nähtava URL-i ja TLS-i sertifikaadiga kogemuse - see on kasulik turbatundlike rakenduste jaoks. Funktsiooniga 'display: fullscreen' loob täiesti kaasahaaravad rakendused ilma olekuriba ja nähtava tagasinuputa. Ikoonide ja värvide komplekt määratleb, kuidas pritsmekraanid või tiitliribad teie rakenduse aknas otsivad.
On mõned manifestigeneraatorid, näiteks Veebirakenduse manifestide generaator või PWA Builder, mis suurendab ka teie jaoks eraldusvõimega (vähemalt 512 pikslit) ikooni suurust erinevates resolutsioonides.
Kui teie manifestifail on teie HTML-dokumendis lingitud, saavad kasutajad rakenduse installida, kasutades erinevaid tehnikaid, olenevalt brauserist, tavaliselt nimega Lisa avalehele, Installi või lihtsalt Lisa. Kui Bing saab teie PWA-d roomata, lisab Microsoft selle automaatselt Microsofti poodi, nii et Windows 10 kasutajad saavad selle sealt installida.
Mõnes operatsioonisüsteemis on teie PWA-l võimalus linke lüüa. See tähendab, et pärast seda, kui kasutaja on rakenduse installinud, avatakse teie manifestiga hõlmatud mis tahes URL teie rakenduse piirides, mitte brauseris, olenemata sellest, kas see kuvatakse brauseris või muudes rakendustes, näiteks WhatsApp, Facebook või e-posti aadressi.
Kui ületate siin määratletud PWA nõuded, pakuvad mõned platvormid ümbritsevat märki (URL-i ribal tavaliselt väike ikoon, mis täpsustab, et veeb on installitav) või veebirakenduse bännerit. Soovi korral saate lisada ka oma kohandatud installinupu järgmise koodilõigu abil:
window.addEventListener ("beforeinstallpr ompt", funktsioon (e) {e.prompt (); // näitab installi kohalikku viipa})
Kui PWA on installitud, käivitatakse sündmus „installitud” aknaobjektil, et saaksite jälgida selle kuulamist.
Rakenduste poed
Brauserist installimise üks peamisi eeliseid on võimalus vältida rakenduste poe kinnitamisprotsessi või väljaandjaks olemise eest maksmist. Sellega kaasnevad ilmsed eelised, nagu kohene avaldamine, ettevõtete privaatsete rakenduste loomine või rakendused, mida ei tohiks poodides aktsepteerida.
Kuid mõned ettevõtted tahavad poes olla. Alates tänasest on PWA-sid ametlikult aktsepteerivad kauplused Windowsi pood ja kaiOS-pood. Õnneks saame selliste tööriistadega nagu Capacitor (praegu Alpha) või PWA Builder luua ja allkirjastada natiivpaketid ka teistele platvormidele.
Google Play poes on juba avaldatud mõned PWA-d, näiteks Twitter Lite ja Google Maps Go, mis on praegu kohandatud rakenduste all. Chrome pakub usaldusväärsete veebitegevuste kaudu lahendust Chrome 68-lt. Sellest hetkest alates saame oma PWA-sse luua käivitajaga Android-paketi (APK) ja selle poodi üles laadida. Windows 10 Microsofti poe jaoks aitab sait PWA Builder praegu APPX Windows 10 paketi loomist. Veebivaate abil saate võib-olla käsitsi luua App Store'i jaoks iOS-i rakenduse, kuid olge poe reeglite suhtes äärmiselt ettevaatlik.
Platvormi integreerimine
Rakendades järkjärgulist täiustamistehnikat, saate kasutada paljusid funktsioone, sealhulgas tõukemärguanded, juurdepääs kaamerale ja mikrofonile, geolokatsioon, andurid, maksed, jagamisdialoogid ja võrguühenduseta salvestusruum. Kõik need funktsioonid töötavad otse brauseri turvamudelis, sealhulgas loa dialoogid.
Saame suhelda ka teiste rakendustega URI-skeemide kaudu, näiteks Twitteri, YouTube'i või WhatsAppi avamine nende URL-ide või kohandatud URI-de kaudu, näiteks whatsapp: //.
Lõpuks, kui loome natiivseid PWA-sid, mis on poes avaldatud Capacitori või Microsofti poe abil, siis saame ühendada natiivsete API-dega, mis võimaldavad meil käivitada praktiliselt kõiki kohalikke koode. See integratsioon Windows 10-ga sisaldab riistvarale juurdepääsu, aga ka integreerimist operatsioonisüsteemiga, pakkudes selliseid võimalusi nagu Pin to Start. Näiteks Twitter PWA võimaldab teil kõik kasutajad oma avaekraanile kinnitada.
Disain ja UX väljakutsed
PWA-de kujundamisel on ainulaadsed väljakutsed, seetõttu on oluline veeta aega uurimiseks, võimalikult palju testimiseks ja järgmistega arvestamiseks:
- Kasutajad ootavad rakendusesarnaseid kogemusi.
- Installiprotsess on endiselt uus, nii et peame rakenduse installimise selgitamiseks lisapingutusi tegema.
- Rakenduse värskendamine taustal ilma kasutaja sekkumiseta on suurepärane, kuid lisab ka UX-le mõningaid väljakutseid.
- Töölaual võtab tundlik veebidisain uue piiri, kuna PWA aknad võivad olla pisikesed, palju väiksemad kui mobiilne vaateava. See tähendab, et peame selle vormingu jaoks looma konkreetsed vaated või väikesed vidinad, nagu täna näete Chrome OS-is.
- Tõukemärguanded peaksid lisama väärtust ainult kasutajale, seega õppige õigel hetkel küsima ja ärge raisake võimalust saata sõnumeid, mis pole kasulikud ega huvitavad.
- Peame kujundama veebi jõudluse ja võrguühenduseta juurdepääsu.
PWA-de aasta
Tänavu iOS-i ja töölaua lisamisega on PWA-d tänapäeval kõikjal. Kuid peame meeles pidama, et nende teekond on alles algamas, seega oodake sagedasi muudatusi ja veenduge, et oleksite kursis uusimate tehnikate ja ideedega, et platvormi arenedes pakkuda suurepärast kasutuskogemust.
See artikkel avaldati algselt 308. Aasta väljaandes võrk, maailma enimmüüdud ajakiri veebidisaineritele ja -arendajatele. Osta väljaanne 308 siit või telli siin.
