Turinys
- PWA kilimas
- PWA veikia šiandien
- Montavimas
- Neprisijungus ir nedelsiant paleidžiama
- Pirmos klasės patirtis
- Programų parduotuvės
- Platformos integracija
- Dizainas ir UX iššūkiai
- PWA metai
Lygiai taip pat, kaip reaguojantis interneto dizainas prieš keletą metų pašalino atotrūkį tarp stalinių ir mobiliųjų svetainių, progresyvios žiniatinklio programų technologijos šiuo metu mažina spragą tarp interneto ir programų pasaulio. Sparčiai besikeičiant vartotojų patirtims nuo darbalaukio iki mobiliųjų programų, atrodo, kad kuriasi daug aptakesnis, efektyvesnis internetas, nors neišvengiamai ne be esminių jo pagrindinio genetinio kodo pakeitimų.
- Kaip sukurti „Progressive Web App“
Akivaizdu, kad tai lemia keletas selektyvių slėgių. Visų pirma, kuriant vietines programas kiekvienai nišai nebūtinai reikia efektyviai naudoti išteklius: vartotojai galų gale šimtus didelių programų sugaišo pralaidumą ir vertingą disko vietą, o įmonės išleidžia daug pinigų kurdamos programas, kad tik jos būtų paliktos. po pirmųjų jų versijų. Ir daugumą šių programų tiesiog lemia žiniatinklio turinys: informacija, gaunama iš žiniatinklio paslaugų ar turinio valdymo sistemos.
Pažangiosios žiniatinklio programos apibrėžimas nėra konkretus. PWA yra tik žiniatinklio programa, kuri naudoja keletą naujų API ir gebėjimų žiniatinklio platformoje, naudodama laipsnišką patobulinimą, kad kiekvienai platformai, turinčiai tą pačią kodo bazę, būtų teikiama į programą panaši patirtis. Tai daugiau geriausios praktikos ir API naudojimo rinkinys, sukuriantis puikią panašų į jūsų programas patirtį, taigi nėra taip, kad turite ar neturite PWA; panašu, kad jūsų svetainė yra daugiau ar mažiau PWA.
Ar ruošiatės kurti naują svetainę? Pabandykite naudoti svetainės kūrimo priemonę. Taip pat įsitikinkite, kad jums reikalinga parama iš padoraus interneto prieglobos paslaugų. Arba, jei norite sužinoti šiek tiek kitokių dalykų, žr. Geriausios debesies saugyklos vadovą.
PWA kilimas
Nors „PWA“ pavadinimas 2015 m. Buvo sugalvotas Alexo Russello, dirbusio „Google“ „Chrome“ komandoje, straipsnyje „Pabėgimas nuo skirtukų neprarandant mūsų sielos“, jų kelionė iš tikrųjų neprasidėjo. Anksčiau mes turėjome HTML programas (HTA), kurias 1999 m. Sukūrė „Microsoft“, kartu su daugeliu kitų „Nokia“, „BlackBerry“ ir kitų kompanijų žiniatinklio programų platformų. Tada, 2007 m., Steve'as Jobsas pristatė tai, kas tuo metu buvo vienintelis būdas sukurti programas originaliam „iPhone“: PWA, nors ir kitu pavadinimu. „Chrome“ pradėjo nuo ten, po kelerių metų patobulino API ir išrado PWA pavadinimą.
Kodėl manome, kad dabar tai veiks dabar, kai tiek daug ankstesnių nesėkmių bandė pritraukti interneto turinį į programų pasaulį? Visų pirma, tai tik įmonės, kurios dabar dirba ir reklamuoja PWA technologijas, tokias kaip „Microsoft“, „Google“, „Apple“ ir „Mozilla“. Be to, žiniatinklio platformos našumas pasiekė tašką, kuriame nėra pastebimo skirtumo, kai lyginate gerai sukurtą PWA su vietine programa. Šios sąlygos dar niekada nebuvo ir tai yra viena iš priežasčių, dėl kurios interneto bendruomenė nusprendė, kad atėjo laikas PWA.
PWA veikia šiandien
Šiandien PWA yra visiškai funkcionalios ir įdiegiamos:
- „Android“ su daugeliu naršyklių, o „Chrome“ siūlo geriausią patirtį
- „iOS“ su „Safari“
- „Chromebook“ kompiuteriai
- „Windows 10“ iš „Microsoft Store“
- Funkciniai telefonai su „KaiOS“ - „Firefox OS“ šakute - šiuo metu prieinami milijonams vartotojų, daugiausia iš Indijos
Vėliau šiais metais palaikymas taip pat pasiekiamas „MacOS“, „Windows“ ir „Linux“ per „Chrome“. Šiandien ją galima įsigyti kaip eksperimentinę vėliavą „Desktop PWA“, jei norite ją išbandyti dabar. Diegimas „Windows on Edge“ nenaudojant parduotuvės taip pat bus vėliau, nors nėra apibrėžtas konkretus laikotarpis.
Perskaitydami sąrašą iš naujo, pamatysite, kad per ateinančius mėnesius kiekviena platforma turi arba ketina palaikyti visiškai įdiegiamas PWA. Kadangi PWA yra tik svetainė su viršuje esančiomis funkcijomis, kuri bus suaktyvinta tik suderinamose naršyklėse, galime net sakyti, kad ji yra suderinama su visomis naršyklėmis iš savo pagrindinės funkcijos.
Be to, šiuo metu PWA generuojami iš daugelio skirtingų rėmų CLI, įskaitant „Angular 6+ CLI“, „React Create App“, „PWA Starter Kit“ iš „Polymer“ ir „Preact CLI“. Galiausiai „Ionic Framework“ komanda sugalvojo „Capacitor“ - atvirojo kodo „Cordova“ pakaitalą, kuris leidžia vietinius PWA naudoti kiekvienoje programų parduotuvėje.
Montavimas
Vienas iš svarbiausių PWA aspektų yra programos įdiegimas. Šis procesas atliekamas dviem pasirenkamais žingsniais: programos failų atsisiuntimas ir saugojimas neprisijungus ir piktogramų diegimas OS. Kadangi abu veiksmai yra neprivalomi, naršyklėje galite pasiūlyti naudotis neprisijungus arba galite pasiūlyti piktogramą neįdiegę neprisijungę. Tačiau tikrame PWA turėtų būti abu: jis turi būti pateiktas su TLS pagal HTTPS, o vartotojas nuspręs, ar naudos jį naršyklėje, ar per savo įdiegtą piktogramą.
Neprisijungus ir nedelsiant paleidžiama
PWA smegenys yra paslaugos darbuotojas, vartotojo įrenginyje įdiegtas „JavaScript“ failas, kuris yra atsakingas už programos failų atsisiuntimą, saugojimą talpykloje ir vėliau, kai reikia, pateikimą. Įdiegus paslaugų darbuotoją, jis veikia kaip tinklo tarpinis serveris kiekvienam žiniatinklio programai reikalingam ištekliui: jis gali nuspręsti jį paimti iš tinklo arba pristatyti iš vietinės talpyklos, todėl programa tampa prieinama neprisijungus ir taip pat pasiekiama tiesiog pora milisekundžių, net jei vartotojas turi ryšį, imituoja savosios programos paleidimą.
Norint įdiegti paslaugų darbuotoją, į HTML dokumentą reikės įtraukti:
if (’navigatoriuje’ serviceWorker ’) navigator.serviceWorker.register („ sw.js “);
Tai įdiegs failą „sw.js“ į vartotojų įrenginius dabartiniam dabartinio domeno aplankui - ši sąvoka vadinama taikymo sritimi. Įdiegus, kitus apsilankymus bet kuriame jo taikymo srities URL tvarkys tas paslaugų darbuotojas.
Tarkime, kad turime PWA su keturiais failais: index.html, app.js, app.css ir logo.png. Pirmas dalykas yra įdiegti tuos failus į sw.js failo talpyklą.
const ištekliai = ["index.html", "app.js", "app.css", "logo.png"]; savarankiškai. addEventListener ("install", event => {event. waitUntil (cache.open ("myPWAcache") .then (cache => cache.addAll (ištekliai)));});
Tada norėdami, kad PWA visada būtų teikiama iš talpyklos, turime išklausyti paslaugų darbuotojo iškvietimo įvykį ir nuspręsti naudoti talpyklos politiką, pvz., Pirmiausia talpyklą su šiuo fragmentu.
self.addEventListener ("gauti", e => e.respondWith (talpyklos.match (e.request). tada (res => res);
Tokiu atveju kiekvieną kartą, kai vartotojas pasiekia PWA (tiek iš naršyklės, tiek iš įdiegtos piktogramos), variklis gaus failus iš talpyklos. PWA ir vietinių programų pranašumas yra tas, kad pasikeitus įrenginiams nereikia iš naujo atsisiųsti visų failų, tik failą, kuris pasikeitė per skaidrų procesą. Be to, mes vis dar galime atsisiųsti programos dalis pagal pareikalavimą.
Bet iššūkis yra iš kur žinoti, kurie failai buvo atnaujinti serveryje, kad galėtumėte juos pakeisti talpykloje? Jei nenorite parašyti žemo lygio paslaugų darbuotojo, kad tai valdytumėte, galite naudoti atvirojo kodo bibliotekos „Workbox“, kuri padės jums sugeneruoti aptarnaujančio darbuotojo ir išteklių aprašą, kad atnaujintumėte įdiegtą paketą.
Turėkite omenyje, kad jūsų PWA failai bus ištrinti, jei įrenginyje bus laikomasi spaudimo, nebent paprašysite nuolatinės saugyklos, jei tokia yra:
jei (’saugykla’ navigatoriuje && ’persist’ ’navigator.storage) navigator.storage.persist ();
„Chrome“ ir daugumoje „Android“ naršyklių jūsų programa negali naudoti daugiau nei penkių procentų laisvos vietos; „iOS“ yra tik 50 MB (beveik 50 MB) vienam prieglobai; „Edge“ jis kintamas pagal bendrą atminties dydį, o „Windows Store“ - neribotas.
Pirmos klasės patirtis
Mes turime smegenis ir dabar atėjo laikas širdžiai: žiniatinklio programos manifestas. Svetainės pavertimas PWA yra ne tik užtikrinti, kad ji būtų pasiekiama greitai ar neprisijungus, bet ir leisti jai turėti savo piktogramą OS ir pasiūlyti visiškai atskirą patirtį, kaip ir bet kurią kitą įdiegtą programą.
Aprašas yra JSON failas, apibrėžiantis PWA, kurį naudoja naršyklė ar programų parduotuvė, metaduomenis, kad apibrėžtų diegimo elgseną.
Faile kelios ypatybės apibrėžiamos kaip jūsų PWA metaduomenys. Kiekviena OS perskaitys šias savybes ir pasistengs, kad atitiktų jums patinkančią patirtį. Pvz., „Android“ skaitys „display: standalone“ ir sukurs įprastą programos patirtį. Naudodami „display: minimal-ui“, tai sukurs patirtį su matomu URL ir TLS sertifikatu - tai naudinga saugiai jautrioms programoms. Su „display: fullscreen“ sukuriamos visiškai įtraukiančios programos be būsenos juostos ar matomo grįžimo mygtuko. Piktogramų ir spalvų rinkinys nurodo, kaip jūsų programos lange bus rodomi apatiniai ekranai ar pavadinimo juostos.
Yra keletas akivaizdžių generatorių, tokių kaip „Web App Manifest Generator“ arba „PWA Builder“, kurie taip pat pakeis piktogramos dydį jums skirtingomis rezoliucijomis, jei pateiksite didelės skiriamosios gebos (mažiausiai 512 taškų).
Kai HTML faile susiesite manifesto failą, vartotojai galės įdiegti programą naudodami skirtingus metodus, priklausomai nuo naršyklės, paprastai vadinamos Pridėti prie pagrindinio ekrano, Įdiegti arba tiesiog Pridėti. Jei jūsų PWA gali nuskaityti „Bing“, „Microsoft“ automatiškai pridės jį prie „Microsoft Store“, kad „Windows 10“ vartotojai galėtų jį įdiegti iš ten.
Kai kuriose operacinėse sistemose jūsų PWA galės užfiksuoti nuorodas. Tai reiškia, kad vartotojui įdiegus programą, bet koks jūsų aprašo URL bus atidarytas jūsų programos ribose, o ne naršyklėje, nesvarbu, ar jis rodomas naršyklėje, ar kitose programose, tokiose kaip „WhatsApp“, „Facebook“ arba el.
Jei atitiksite PWA reikalavimus, kuriuos mes čia apibrėžėme, kai kurios platformos pasiūlys aplinkos ženklelius (maža piktograma paprastai URL juostoje, nurodanti, kad žiniatinklis yra įdiegiamas) arba žiniatinklio programos reklamjuostę. Jei norite, taip pat galite pridėti savo pasirinktinį diegimo mygtuką naudodami šį fragmentą:
window.addEventListener ("beforeinstallpr ompt", funkcija (e) {e.prompt (); // parodys diegimo gimtąją eilutę})
Jei įdiegta PWA, įvykis „įdiegtas“ bus suaktyvintas lango objekte, kad galėtumėte stebėti jo klausymosi statistiką.
Programų parduotuvės
Vienas pagrindinių diegimo iš naršyklės pranašumų yra galimybė išvengti „App Store“ patvirtinimo proceso arba mokėti už leidėją. Tai turi akivaizdžių pranašumų, tokių kaip momentinė publikacija, privačių programų kūrimas įmonėms arba programos, kurių negalima priimti parduotuvėse.
Tačiau kai kurios įmonės nori būti parduotuvėje. Nuo šios dienos vienintelės parduotuvės, oficialiai priimančios PWA, yra „Windows Store“ ir „KaiOS Store“. Laimei, su tokiais įrankiais kaip „Capacitor“ (šiuo metu naudojama „Alpha“) ar „PWA Builder“ galime sukurti ir pasirašyti vietinius paketus ir kitoms platformoms.
Kai kurie „PWA“ jau paskelbti „Google Play“ parduotuvėje, pvz., „Twitter Lite“ ir „Google Maps Go“, šiuo metu pritaikomi pagal pasirinktį. „Chrome“ pasiūlys „Chrome 68“ sprendimą naudodama patikimą žiniatinklio veiklą. Nuo to laiko mes galėsime sukurti „Android“ paketą (APK) su paleidimo priemone į savo PWA ir įkelti į parduotuvę. „Microsoft Store“, skirtoje „Windows 10“, svetainė „PWA Builder“ šiuo metu padeda kuriant „APPX Windows 10“ paketą. Naudodamiesi žiniatinklio rodiniu, galbūt galėsite rankiniu būdu sukurti „iOS“ programą „App Store“, tačiau būkite labai atsargūs dėl parduotuvės taisyklių.
Platformos integracija
Įdiegę laipsniško tobulinimo metodus, galėsite naudoti daugybę funkcijų, įskaitant „push“ pranešimus, prieigą prie fotoaparato ir mikrofono, geografinę vietą, jutiklius, mokėjimus, bendrinimo dialogus ir saugojimą neprisijungus. Visos šios funkcijos veikia tiesiogiai naršyklės saugos modelyje, įskaitant leidimų dialogus.
Mes taip pat galime bendrauti su kitomis programomis naudodami URI schemas, tokias kaip „Twitter“, „YouTube“ ar „WhatsApp“ atidarymas per jų URL arba pasirinktinius URI, pvz., „Whatsapp: //“.
Galiausiai, kurdami vietinius PWA, kurie yra paskelbti parduotuvėje naudojant „Capacitor“ arba „Microsoft Store“, galėsime pereiti prie vietinių API, kurie leis mums vykdyti praktiškai bet kokį gimtąjį kodą. Ši integracija su „Windows 10“ apima prieigą prie aparatūros, bet taip pat ir su OS, siūlant tokias galimybes kaip „Pin to Start“. Pavyzdžiui, „Twitter PWA“ leidžia prie pradinio ekrano prisegti bet kurį vartotoją.
Dizainas ir UX iššūkiai
Kuriant PWA turi unikalių iššūkių, todėl svarbu skirti šiek tiek laiko tyrimams, bandymams, kiek įmanoma, ir atsižvelgti į šiuos dalykus:
- Vartotojai tikėsis panašios į programas.
- Diegimo procesas vis dar naujas, todėl turime įdėti papildomų pastangų, kad paaiškintume, kaip įdiegti programą.
- Puiku atnaujinti programą fone be vartotojo sąveikos, tačiau tai taip pat prideda tam tikrų UX iššūkių.
- Darbalaukyje interaktyvus interneto dizainas užima naują sieną, nes PWA langai gali būti maži, daug mažesni nei mobiliojo vaizdo peržiūra. Tai reiškia, kad turime sukurti konkrečius šio formato rodinius ar mažus valdiklius, kaip šiandien matome „Chrome“ OS.
- Tiesioginiai pranešimai turėtų pridėtinės vertės tik vartotojui, todėl išmokite klausti tinkamu momentu ir nepraleiskite progos siųsti nenaudingus ar neįdomius pranešimus.
- Turime kurti žiniatinklio našumą ir prieigą neprisijungę.
PWA metai
Šiemet pridėjus „iOS“ ir darbalaukį, PWA šiandien yra visur. Tačiau turime nepamiršti, kad jų kelionė dar tik prasideda, todėl tikėkitės dažnų pokyčių ir įsitikinkite, kad nuolat atnaujinate naujausias technikas ir idėjas, kad platforma tobulėtų ir teiktų puikią vartotojo patirtį.
Šis straipsnis iš pradžių buvo paskelbtas 308 leidime neto, perkamiausias pasaulyje žurnalas, skirtas interneto dizaineriams ir kūrėjams. 308 numerį pirkite čia arba užsiprenumeruok čia.
