Vsebina
- Vzpon PWA
- Danes delujejo PWA
- Namestitev
- Brez povezave in takojšen zagon
- Prvovrstne izkušnje
- Trgovine z aplikacijami
- Integracija platforme
- Izzivi oblikovanja in UX
- Leto PWA
Tako kot je odzivno spletno oblikovanje pred nekaj leti zapolnilo vrzel med spletnimi mesti za namizja in mobilne naprave, tudi postopne tehnike spletnih aplikacij trenutno zapolnjujejo vrzel med spletom in svetom aplikacij. Ker se uporabniške izkušnje od namiznih do mobilnih aplikacij hitro zbližujejo, se zdi, da se razvija bistveno bolj uglajen in učinkovitejši internet - čeprav neizogibno ne brez nekaterih pomembnih sprememb v svoji genetski kodi.
- Kako zgraditi progresivno spletno aplikacijo
Očitno je to nekaj pomembnih selektivnih pritiskov. Prvič, ustvarjanje izvornih aplikacij za vsako nišo ni nujno učinkovita raba virov: uporabniki na koncu dobijo na stotine velikih aplikacij, ki zapravijo pasovno širino in dragocen prostor na disku, podjetja pa porabijo veliko denarja za ustvarjanje aplikacij samo zato, da jih opustijo. po njihovih prvih različicah. In večino teh aplikacij poganja samo spletna vsebina: informacije, ki prihajajo iz spletnih storitev ali sistema za upravljanje vsebin.
Opredelitev progresivne spletne aplikacije ni konkretna. PWA je le spletna aplikacija, ki uporablja več novih API-jev in zmožnosti v spletni platformi z uporabo postopnih izboljšav, da ponudi aplikaciji podobno izkušnjo na vsaki platformi z isto kodno osnovo. Gre bolj za nabor najboljših praks in uporabe API-jev, ki ustvarjajo izvrstno izkušnjo, podobno aplikacijam, za vaše uporabnike, zato ni tako, kot da imate ali nimate PWA; bolj kot da je vaše spletno mesto bolj ali manj PWA.
Ali boste začeli graditi novo spletno mesto? Poskusite uporabiti gradnik spletnih strani. Prepričajte se, da dobite podporo, ki jo potrebujete tudi od dostojne storitve spletnega gostovanja. Ali pa nekaj drugega, si oglejte naš vodnik do najboljšega prostora za shranjevanje v oblaku.
Vzpon PWA
Medtem ko je ime PWA nastalo leta 2015 v članku Escaping Tabs Without Losing our Soul avtorja Alex Russell, ki je delal pri Googlu za ekipo Chrome, se njihovo potovanje pravzaprav ni začelo tam. Včasih smo imeli aplikacije HTML (HTA), ki jih je leta 1999 ustvaril Microsoft skupaj s številnimi drugimi platformami spletnih aplikacij Nokia, BlackBerry in drugih podjetij. Nato je Steve Jobs leta 2007 predstavil tedanji edini način za ustvarjanje aplikacij za prvotni iPhone: PWA, čeprav z drugačnim imenom. Chrome je začel od tam, nekaj let kasneje izboljšal API-je in izumil ime PWA.
Zakaj menimo, da bo s toliko prejšnjimi neuspešnimi izkušnjami, ki so spletno vsebino prinesle v svet aplikacij, zdaj delovalo? No, predvsem na podjetjih, ki zdaj delajo in promovirajo tehnologije, ki stojijo za PWA-ji, kot so Microsoft, Google, Apple in Mozilla, če omenimo le nekaj. Prav tako je zmogljivost spletne platforme dosegla točko, ko ni opazne razlike, če primerjate dobro zasnovan PWA z izvorno aplikacijo. Ti pogoji še nikoli niso obstajali in zato se je spletna skupnost odločila, da je napočil čas za PWA.
Danes delujejo PWA
Danes so PWA popolnoma funkcionalni in jih je mogoče namestiti na:
- Android z večino brskalnikov, Chrome ponuja najboljšo izkušnjo
- iOS s Safarijem
- Chromebooki
- Windows 10 iz Microsoftove trgovine
- Predstavljeni telefoni s sistemom KaiOS - vilico iz sistema Firefox OS - so trenutno na voljo milijonom uporabnikom, večinoma v Indiji
Podpora bo v tem letu prišla tudi v macOS, Windows in Linux prek Chroma. Danes je na voljo kot poskusna zastavica 'Desktop PWA', če jo želite preizkusiti zdaj. Namestitev v sistem Windows na Edge brez uporabe trgovine prihaja pozneje, čeprav ni določen noben časovni okvir.
Če ponovno preberete seznam, lahko vidite, da ima vsaka platforma v naslednjih mesecih podporo za nameščene PWA-je ali pa jih bo kmalu podpirala. In ker je PWA le spletno mesto s funkcijami na vrhu, ki se bo aktiviralo samo v združljivih brskalnikih, lahko celo rečemo, da je združljivo z vsemi brskalniki iz svoje osnovne funkcije.
Prav tako se PWA trenutno generirajo iz večine CLI-jev za različne okvire, vključno z Angular 6+ CLI, React Create App, PWA Starter Kit iz Polymer in Preact CLI. Na koncu je ekipa Ionic Framework prišla na idejo Capacitor, odprtokodni nadomestek Cordove, ki omogoča domače PWA-je v vsaki trgovini z aplikacijami.
Namestitev
Eden od kritičnih vidikov PWA je namestitev aplikacije. Ta postopek se izvede v dveh neobveznih korakih: prenos datotek aplikacije in shranjevanje datotek brez povezave ter namestitev ikon v OS. Ker sta oba koraka neobvezna, lahko v brskalniku ponudite izkušnjo brez povezave ali ikono brez namestitve brez povezave. Toda pravi PWA mora vključevati oboje: vročiti ga je treba s TLS pod HTTPS in uporabnik se bo odločil, ali ga bo uporabljal v brskalniku ali v svoji nameščeni ikoni.
Brez povezave in takojšen zagon
Možgani PWA so serviser, datoteka JavaScript, nameščena v uporabnikovi napravi, ki je odgovorna za prenos datotek aplikacije, njihovo shranjevanje v predpomnilnik in poznejše servisiranje po potrebi. Ko je serviser nameščen, deluje kot omrežni strežnik za vsak vir, ki ga potrebuje spletna aplikacija: lahko se odloči, da ga pridobi iz omrežja ali dostavi iz lokalnega predpomnilnika, zaradi česar je aplikacija na voljo brez povezave in je na voljo tudi v samo nekaj milisekund, tudi če ima uporabnik povezavo, posnema zagon izvorne aplikacije.
Če želite namestiti serviserja, mora vaš dokument HTML vsebovati nekaj takega:
if ('serviceWorker' v navigatorju) navigator.serviceWorker.register ("sw.js");
S tem bo datoteka "sw.js" nameščena v uporabniške naprave za trenutno mapo v trenutni domeni - koncept, znan kot obseg. Ko je nameščen, bo naslednji uslužbenec upravljal naslednje obiske katerega koli URL-ja v njegovem obsegu.
Recimo, da imamo PWA s štirimi datotekami: index.html, app.js, app.css in logo.png. Najprej je treba te datoteke namestiti v predpomnilnik datoteke sw.js.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; sebe. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache"). then (cache => cache.addAll (resources)));});
Potem, da se PWA vedno streže iz predpomnilnika, moramo prisluhniti dogodku za prenos v servisnem delavcu in se odločiti, katero politiko predpomnilnika bomo uporabili, na primer predpomnilnik z naslednjim delčkom.
self.addEventListener ("fetch", e => e.respoWWith (caches.match (e.request). then (res => res);
V tem primeru bo motor vsakič, ko uporabnik dostopa do PWA (iz brskalnika ali nameščene ikone), datoteke dobil iz predpomnilnika. Prednost PWA-jev v primerjavi z izvornimi aplikacijami je, da napravam ni treba znova prenesti vseh datotek, ko pride do spremembe, temveč samo datoteko, ki se je spremenila s preglednim postopkom. Prav tako lahko na zahtevo še vedno prenesemo dele aplikacije.
Toda izziv je, kako veste, katere datoteke so bile posodobljene na strežniku, tako da jih lahko nadomestite v predpomnilniku? Če za upravljanje tega ne želite napisati uslužbenca na nizki ravni, lahko uporabite odprtokodno knjižnico Workbox, ki vam bo pomagala pri generiranju serviserja in manifestu virov za posodobitev nameščenega paketa.
Zavedajte se, da bodo datoteke PWA izbrisane, če bo naprava pritisnila na prostor za shranjevanje, razen če ne zahtevate trajnega shranjevanja, če je na voljo:
if ('pomnilnik' v navigatorju && 'vztraja' v navigator.storage) navigator.storage.persist ();
V Chromu in večini brskalnikov Android aplikacija ne more porabiti več kot pet odstotkov razpoložljivega prostora; v iOS-u znaša samo 50 MB (skoraj 50 MB) na gostitelja; v Edgeu je spremenljiv glede na skupno velikost pomnilnika, v trgovini Windows Windows pa neomejen.
Prvovrstne izkušnje
Imamo možgane in zdaj je čas za srce: spletna aplikacija manifest. Namen spreminjanja spletnega mesta v PWA ni samo zagotoviti, da je na voljo hitro ali brez povezave, temveč tudi omogočiti, da ima v OS svojo ikono in ponuja popolnoma samostojno izkušnjo kot katera koli druga nameščena aplikacija.
Manifest je datoteka JSON, ki definira metapodatke za PWA, ki jih brskalnik ali trgovina z aplikacijami določi za vedenje namestitve.
Datoteka določa več lastnosti kot metapodatke za vaš PWA. Vsak OS bo prebral te lastnosti in se po svojih najboljših močeh trudil, da se ujema z vašo izkušnjo, ki vam je ljubša. Android bo na primer prebral 'display: standalone' in ustvaril običajno izkušnjo aplikacije. Z 'display: minimal-ui' bo ustvaril izkušnjo z vidnim URL-jem in potrdilom TLS - koristno za varnostno občutljive aplikacije. Z 'display: fullscreen' ustvarja popolnoma poglobljene aplikacije brez vrstice stanja ali vidnega gumba za nazaj. Nabor ikon in barv določa, kako bodo začetni zasloni ali naslovne vrstice videti za okno aplikacije.
Obstaja nekaj generatorjev manifestov, na primer Generator manifestov spletnih aplikacij ali PWA Builder, ki bodo ikono za vas prav tako spremenili v različnih ločljivostih, če zagotovite visoko ločljivost (najmanj 512 slikovnih pik).
Ko je datoteka manifesta povezana v dokumentu HTML, bodo uporabniki lahko namestili aplikacijo z različnimi tehnikami, odvisno od brskalnika, ki se običajno imenuje Dodaj na začetni zaslon, Namesti ali samo Dodaj. Če je BWA sposoben iskati po vašem PWA, ga bo Microsoft samodejno dodal v Microsoftovo trgovino, tako da ga bodo lahko uporabniki sistema Windows 10 od tam namestili.
V nekaterih operacijskih sistemih bo vaš PWA lahko zajemal povezave. To pomeni, da se bo po namestitvi aplikacije kateri koli URL v obsegu vašega manifesta odprl znotraj meja vaše aplikacije in ne v brskalniku, ne glede na to, ali se prikaže v brskalniku ali drugih aplikacijah, kot so WhatsApp, Facebook ali e-poštno sporočilo.
Če izpolnite zahteve PWA, ki jih tukaj definiramo, bodo nekatere platforme ponujale zunanje značke (majhna ikona, ki je običajno v vrstici URL, ki določa, ali je splet mogoče namestiti), ali pasico spletne aplikacije. Če želite, lahko dodate tudi svoj gumb Namesti po meri z naslednjim delčkom:
window.addEventListener ("beforeinstallpr ompt", funkcija (e) {e.prompt (); // bo prikazan domači poziv za namestitev})
Če je nameščen PWA, se dogodek „appinstalled“ sproži na okenskem predmetu, tako da lahko spremljate statistiko, ki ga posluša.
Trgovine z aplikacijami
Ena glavnih prednosti namestitve iz brskalnika je, da se lahko izognete postopku odobritve trgovine z aplikacijami ali plačilu za založništvo. To ima očitne prednosti, na primer takojšnje objavljanje, ustvarjanje zasebnih aplikacij za podjetja ali aplikacije, ki jih ne bi smeli sprejemati v trgovinah.
Toda nekatera podjetja si želijo biti v trgovini. Danes sta edini trgovini, ki uradno sprejemata PWA, Windows Store in kaiOS Store. Na srečo lahko z orodji, kot sta Capacitor (trenutno v različici Alpha) ali PWA Builder, ustvarimo in podpišemo izvorne pakete tudi za druge platforme.
V trgovini Google Play je že objavljenih nekaj PWA-jev, na primer Twitter Lite in Google Maps Go, ki se trenutno izvajajo po meri. Chrome bo ponudil rešitev iz Chroma 68 prek zaupanja vrednih spletnih dejavnosti. Od tega trenutka bomo lahko ustvarili paket Android (APK) z zaganjalnikom na naš PWA in ga naložili v trgovino. Za trgovino Microsoft Store v operacijskem sistemu Windows 10 spletno mesto PWA Builder trenutno pomaga pri izdelavi paketa APPX Windows 10. Z uporabo spletnega pogleda boste morda lahko ročno ustvarili aplikacijo iOS za App Store, vendar bodite previdni pri pravilih trgovine.
Integracija platforme
Z izvajanjem postopnih postopkov izboljšav boste lahko uporabljali številne funkcije, vključno s potisnimi obvestili, dostopom do kamere in mikrofona, geolokacijo, senzorji, plačili, pogovornimi okni za skupno rabo in shranjevanjem brez povezave. Vse te funkcije se izvajajo neposredno znotraj varnostnega modela brskalnika, vključno z pogovornimi okni z dovoljenji.
Z drugimi aplikacijami lahko komuniciramo tudi prek shem URI, kot je odpiranje Twitterja, YouTubea ali WhatsAppa prek njihovih URL-jev ali URI-jev po meri, kot je whatsapp: //.
Nazadnje, ko ustvarjamo izvorne PWA-je, ki so objavljeni v trgovini s pomočjo kondenzatorja ali v Microsoftovi trgovini, bomo lahko prešli na izvorne API-je, ki nam bodo omogočili izvajanje skoraj katere koli izvorne kode. Ta integracija z operacijskim sistemom Windows 10 vključuje dostop do strojne opreme, pa tudi integracijo z OS, ki ponuja možnosti, kot je Pin to Start. Na primer, Twitter PWA vam omogoča, da katerega koli uporabnika pripnete na začetni zaslon.
Izzivi oblikovanja in UX
Oblikovanje PWA ima edinstvene izzive, zato je pomembno, da nekaj časa namenite raziskovanju, čim večjemu preizkušanju in upoštevanju naslednjega:
- Uporabniki bodo pričakovali izkušnje, podobne aplikacijam.
- Postopek namestitve je še vedno nov, zato se moramo še dodatno potruditi, da razložimo, kako namestiti aplikacijo.
- Posodabljanje aplikacije v ozadju brez interakcije z uporabnikom je super, vendar dodaja tudi nekaj izzivov za UX.
- Na namizju odzivno spletno oblikovanje dobi novo mejo, saj so okna PWA lahko majhna, veliko manjša od mobilnega vidnega polja. To pomeni, da moramo za to obliko ustvariti posebne poglede ali majhne pripomočke, kot je danes videti v sistemu Chrome OS.
- Potisna obvestila bi morala uporabniku dodati samo vrednost, zato se naučite spraševati ob pravem trenutku in ne zapravljajte priložnosti za pošiljanje sporočil, ki niso uporabna ali zanimiva.
- Oblikovati moramo spletno zmogljivost in dostop brez povezave.
Leto PWA
Z letošnjim dodajanjem iOS-a in namizja so danes PWA povsod povsod. Vendar se moramo zavedati, da se njihova pot šele začenja, zato pričakujte pogoste spremembe in se prepričajte, da ste na tekočem z najnovejšimi tehnikami in idejami, da boste med razvojem platforme nudili odlično uporabniško izkušnjo.
Ta članek je bil prvotno objavljen v številki 308 časopisa mreža, najbolje prodajana revija na svetu za spletne oblikovalce in razvijalce. Kupite številko 308 tukaj ali naročite se tukaj.
