Sisältö
- PWA: n nousu
- PWA: t toiminnassa tänään
- Asennus
- Offline ja välitön käynnistys
- Ensiluokkainen kokemus
- Sovelluskaupat
- Alustan integrointi
- Suunnittelu ja UX-haasteet
- PWA: n vuosi
Aivan kuten reagoiva verkkosuunnittelu esti muutama vuosi sitten työpöytä- ja mobiilisivustojen välisen kuilun, progressiiviset verkkosovellustekniikat ovat tällä hetkellä sulkemassa kuilua verkon ja sovellusmaailman välillä. Kun käyttäjäkokemukset pöytätietokoneesta mobiilisovelluksiin lähestyvät nopeasti, näyttää siltä, että paljon tyylikäs ja tehokkaampi Internet on kehittymässä - tosin väistämättä ei ilman merkittäviä muutoksia sen taustalla olevaan geneettiseen koodiin.
- Kuinka rakentaa progressiivinen verkkosovellus
Ilmeisesti on olemassa joitain merkittäviä valikoivia paineita, jotka ajavat tätä. Ensinnäkin natiivisovellusten luominen jokaiselle markkinarakolle ei välttämättä ole tehokasta resurssien käyttöä: käyttäjät lopulta sadat isot sovellukset tuhlaavat kaistanleveyttä ja arvokasta levytilaa, ja yritykset käyttävät paljon rahaa luomalla sovelluksia vain hylättäviksi. ensimmäisten versioidensa jälkeen. Ja suurinta osaa näistä sovelluksista ohjaa vain verkkosisältö: tiedot, jotka tulevat verkkopalveluista tai sisällönhallintajärjestelmästä.
Progressiivisen verkkosovelluksen määritelmä ei ole konkreettinen. PWA on vain verkkosovellus, joka käyttää useita uusia sovellusliittymiä ja kykyjä web-alustalla progressiivisen parannuksen avulla tarjotakseen sovelluksen kaltaisen kokemuksen jokaiselle alustalle samalla koodipohjalla. Se on enemmän joukko parhaita käytäntöjä ja sovellusliittymän käyttöä, joka luo erinomaisen sovelluksen kaltaisen käyttökokemuksen käyttäjillesi, joten se ei ole kuin sinulla olisi tai ei ole PWA: ta. se on enemmän kuin sivustosi olisi enemmän tai vähemmän PWA.
Oletko aloittamassa uuden sivuston rakentamista? Kokeile käyttää verkkosivuston rakennustyökalua. Ja varmista, että saat tarvitsemasi tuen myös kunnolliselta web-hosting-palvelulta. Tai jotain hieman erilaista, katso oppaamme parhaasta pilvitallennustilasta.
PWA: n nousu
Vaikka nimi PWA keksittiin vuonna 2015 Googlen Chrome-tiimissä työskentelevän Alex Russellin artikkelissa Escaping Tabs Lose Losing Our Soul, heidän matkansa ei tosiasiassa alkanut siellä. Meillä oli aiemmin HTML-sovelluksia (HTA), jotka Microsoft loi vuonna 1999, samoin kuin monet muut Nokian, BlackBerryn ja muiden yritysten web-sovellusalustat. Sitten vuonna 2007 Steve Jobs esitteli, mikä oli tuolloin ainoa tapa luoda sovelluksia alkuperäiselle iPhonelle: PWA: t, vaikkakin eri nimellä. Chrome aloitti sieltä, paransi sovellusliittymiä muutama vuosi myöhemmin ja keksi PWA-nimen.
Kun niin monta aikaisempaa epäonnistunutta kokemusta on yrittänyt tuoda verkkosisältöä sovellusten maailmaan, miksi uskomme sen toimivan nyt? Ensinnäkin, vain yrityksistä, jotka nyt työskentelevät ja mainostavat PWA-tekniikoiden takana olevia tekniikoita, kuten Microsoft, Google, Apple ja Mozilla, on vain muutamia. Myös verkkoalustan suorituskyky saavutti pisteen, jossa ei havaittu eroa, kun verrataan hyvin suunniteltua PWA: ta natiivisovellukseen. Näitä ehtoja ei ole koskaan ennen ollut, ja se on yksi syy, miksi verkkoyhteisö on päättänyt, että PWA: n aika on tullut.
PWA: t toiminnassa tänään
Nykyään PWA: t ovat täysin toimivia ja asennettavissa:
- Android useimmilla selaimilla, Chrome tarjoaa parhaan kokemuksen
- iOS ja Safari
- Chromebookit
- Windows 10 Microsoft Storesta
- KaiOS-puhelimet, joissa on Firefox-käyttöjärjestelmän haarukka - ovat tällä hetkellä saatavilla miljoonille käyttäjille pääasiassa Intiassa
Tuki on tulossa myös macOSiin, Windowsiin ja Linuxiin Chromen kautta myöhemmin tänä vuonna. Se on saatavana tänään kokeellisena lippuna 'Desktop PWA', jos haluat kokeilla sitä nyt. Asennus Windows on Edge -palveluun ilman myymälän käyttöä on tulossa myös myöhemmin, vaikka mitään tiettyä aikataulua ei ole määritelty.
Jos luet luettelon uudelleen, näet, että jokaisella alustalla on tai on tulossa tuki täysin asennettaville PWA-tiedostoille seuraavina kuukausina. Ja koska PWA on vain verkkosivusto, jonka päällä on ominaisuuksia, jotka aktivoidaan vain yhteensopivissa selaimissa, voimme jopa sanoa, että se on yhteensopiva kaikkien selainten kanssa perustoiminnoistaan.
Lisäksi PWA: ita kehitetään tällä hetkellä useimmista eri kehysten CLI: stä, mukaan lukien Angular 6+ CLI, React Create App, PWA Starter Kit from Polymer ja Preact CLI. Lopuksi Ionic Framework -tiimi keksi idean Capacitorista, avoimen lähdekoodin Cordova-korvikkeesta, joka tekee natiivista PWA: sta mahdollisen jokaisessa sovelluskaupassa.
Asennus
Yksi PWA: n kriittisistä näkökohdista on sovelluksen asennus. Tämä prosessi tapahtuu kahdessa valinnaisessa vaiheessa: sovelluksen tiedostojen lataaminen ja offline-tallennus sekä kuvakkeiden asennus käyttöjärjestelmään. Koska molemmat vaiheet ovat valinnaisia, voit tarjota offline-kokemuksen selaimessa tai kuvakkeen ilman offline-asennusta. Todellisen PWA: n tulisi kuitenkin sisältää molemmat: se on annettava TLS: n kanssa HTTPS: n alla, ja käyttäjä päättää käyttävätkö sitä selaimessa vai omassa asennetussa kuvakkeessaan.
Offline ja välitön käynnistys
PWA: n aivot ovat palvelutyöntekijä, käyttäjän laitteeseen asennettu JavaScript-tiedosto, joka on vastuussa sovelluksen tiedostojen lataamisesta, tallentamisesta välimuistiin ja myöhemmästä palvelusta tarvittaessa. Kun palvelutyöntekijä on asennettu, se toimii kuin verkon välityspalvelin jokaiselle verkkosovelluksen tarvitsemalle resurssille: se voi päättää hakea sen verkosta tai toimittaa sen paikallisesta välimuistista, mikä tekee sovelluksesta saatavana offline-tilassa ja saatavana myös vain pari millisekuntia, vaikka käyttäjällä olisi yhteys, jäljittelemällä natiivisovelluksen käynnistystä.
Huoltotyöntekijän asentamiseksi HTML-dokumenttisi on sisällettävä jotain:
if (’serviceWorker’ navigaattorissa) navigator.serviceWorker.register ("sw.js");
Se asentaa tiedoston "sw.js" käyttäjien laitteisiin nykyisen verkkotunnuksen nykyiselle kansiolle - tämä käsite tunnetaan laajuutena. Asennuksen jälkeen kyseinen palvelutyöntekijä hallitsee seuraavia vierailuja mihin tahansa sen soveltamisalaan kuuluvaan URL-osoitteeseen.
Oletetaan, että meillä on PWA, jossa on neljä tiedostoa: index.html, app.js, app.css ja logo.png. Ensimmäinen asia on asentaa nämä tiedostot sw.js-tiedoston välimuistiin.
const resurssit = ["index.html", "app.js", "app.css", "logo.png"]; itse. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (resurssit));});
Sitten PWA: n tarjoamiseksi aina välimuistista meidän on kuunneltava palvelun työntekijän hakutapahtuma ja päätettävä käytettävä välimuistikäytäntö, kuten välimuisti ensin seuraavalla katkelmalla.
self.addEventListener ("noutaa", e => e.respondWith (välimuistit.match (e.pyyntö). sitten (res => res);
Tässä tapauksessa aina, kun käyttäjä käyttää PWA: ta (sekä selaimesta että asennetusta kuvakkeesta), moottori saa tiedostot välimuistista. PWA: n etu verrattuna natiivisovelluksiin on, että laitteiden ei tarvitse ladata kaikkia tiedostoja uudelleen muutoksen tapahtuessa, vain tiedosto, joka on muuttunut läpinäkyvällä prosessilla. Voimme myös ladata sovelluksen osia tarvittaessa.
Mutta haasteena on, mistä tiedät, mitkä tiedostot päivitettiin palvelimella, jotta voit korvata ne välimuistissa? Jos et halua kirjoittaa matalan tason palvelutyöntekijää tämän hallintaan, voit käyttää avoimen lähdekoodin kirjaston Workboxia, joka auttaa sinua luomaan huoltotyöntekijän ja resurssiluettelon päivittämään asennetun paketin.
Huomaa, että PWA: n tiedostot poistetaan, jos laitteessa on tallennuspaine, ellet pyydä pysyvää tallennustilaa, jos se on käytettävissä:
jos (’tallennus’ navigaattorissa && ’pysyy’ navigaattorissa.varasto) navigator.storage.persist ();
Chromessa ja useimmissa Android-selaimissa sovelluksesi ei voi käyttää yli viittä prosenttia käytettävissä olevasta tilasta. iOS: ssä se on vain 50 Mt (lähes 50 Mt) isäntää kohti; Edgessä se vaihtelee muistin koon mukaan, ja Windows Storessa se on rajaton.
Ensiluokkainen kokemus
Meillä on aivot, ja nyt on aika sydämelle: verkkosovelluksen manifest. Verkkosivuston muuttaminen PWA: ksi ei ole vain varmistaa, että se on käytettävissä nopeasti tai offline-tilassa, vaan myös mahdollistaa sen, että sillä on oma kuvake käyttöjärjestelmässä ja joka tarjoaa täysin itsenäisen kokemuksen kuten mikä tahansa muu asennettu sovellus.
Luettelo on JSON-tiedosto, joka määrittelee selaimen tai sovelluskaupan käyttämän PWA: n metatiedot asennuskäyttäytymisen määrittämiseksi.
Tiedosto määrittää useita ominaisuuksia PWA: n metatiedoiksi. Jokainen käyttöjärjestelmä lukee nämä ominaisuudet ja yrittää parhaansa mukaan vastaamaan haluamaasi kokemusta. Esimerkiksi Android lukee ”display: standalone” ja luo normaalin sovelluskokemuksen. ”Display: minimal-ui” -toiminnon avulla se luo kokemuksen näkyvällä URL-osoitteella ja TLS-varmenteella - hyödyllinen tietoturvalle sovelluksille. 'Näyttö: koko näyttö' -toiminnolla se luo täysin mukaansatempaavat sovellukset ilman tilariviä tai näkyvää paluupainiketta. Kuvakkeet ja värit määrittelevät, kuinka roiskutusnäytöt tai otsikkopalkit etsivät sovelluksesi ikkunaa.
On joitain ilmeisiä generaattoreita, kuten Web App Manifest Generator tai PWA Builder, jotka myös muuttavat kuvakkeen kokoa sinulle eri tarkkuuksilla, jos annat korkean resoluution (vähintään 512 pikseliä).
Kun manifestitiedosto on linkitetty HTML-dokumenttiin, käyttäjät voivat asentaa sovelluksen eri tekniikoilla selaimesta riippuen, yleensä nimellä Lisää aloitusnäyttöön, Asenna tai vain Lisää. Jos Bing voi indeksoida PWA: n, Microsoft lisää sen automaattisesti Microsoft Storeen, jotta Windows 10 -käyttäjät voivat asentaa sen sieltä.
Joissakin käyttöjärjestelmissä PWA pystyy sieppaamaan linkkejä. Tämä tarkoittaa sitä, että kun käyttäjä on asentanut sovelluksen, kaikki luettelosi soveltamisalaan kuuluvat URL-osoitteet avautuvat sovelluksesi rajoissa eikä selaimessa riippumatta siitä, näkyykö se selaimessa vai muissa sovelluksissa, kuten WhatsApp, Facebook tai sähköposti.
Jos läpäisette täällä määrittelemämme PWA-vaatimukset, jotkut alustat tarjoavat ympäristön tunnuksen (pieni kuvake yleensä URL-palkissa, joka ilmoittaa, että verkko on asennettava) tai verkkosovelluksen bannerin. Halutessasi voit myös lisätä oman mukautetun Asenna-painikkeesi seuraavalla katkelmalla:
window.addEventListener ("beforeinstallpr ompt", funktio (e) {e.prompt (); // näyttää asennuksen alkuperäisen kehotteen})
Jos PWA on asennettu, tapahtuma ”asennettu” ammutaan ikkunaobjektille, jotta voit seurata sitä kuuntelevaa tilastoa.
Sovelluskaupat
Yksi selaimen asennuksen tärkeimmistä eduista on mahdollisuus välttää sovelluskaupan hyväksymisprosessi tai joutua maksamaan julkaisijaksi. Siellä on ilmeisiä etuja, kuten välitön julkaisu, yksityisten sovellusten luominen yrityksille tai sovellukset, joita ei pitäisi hyväksyä kaupoissa.
Mutta jotkut yritykset haluavat olla kaupassa. Tästä päivästä lähtien ainoat PWA: n virallisesti hyväksyvät myymälät ovat Windows Store ja kaiOS Store. Onneksi työkaluilla, kuten Capacitor (tällä hetkellä Alpha) tai PWA Builder, voimme luoda ja allekirjoittaa natiivipaketteja myös muille alustoille.
Jotkut PWA: t on jo julkaistu Google Play Kaupassa, kuten Twitter Lite ja Google Maps Go, jotka ovat tällä hetkellä mukautettujen toteutusten alla. Chrome tarjoaa ratkaisun Chrome 68: sta luotettujen verkkotoimintojen kautta. Siitä lähtien voimme luoda Android-paketin (APK), jossa on kantoraketti PWA-laitteeseemme, ja ladata sen kauppaan. Windows 10: n Microsoft Storen sivusto PWA Builder auttaa tällä hetkellä APPX Windows 10 -paketin luomisessa. Verkkokuvan avulla voit ehkä luoda iOS-sovelluksen manuaalisesti App Storeen, mutta ole erityisen varovainen myymälän sääntöjen suhteen.
Alustan integrointi
Toteuttamalla progressiiviset parannustekniikat, voit käyttää monia ominaisuuksia, kuten push-ilmoitukset, kameran ja mikrofonin käyttö, maantieteellinen sijainti, anturit, maksut, jakamisikkunat ja offline-tallennus. Kaikki nämä ominaisuudet toimivat suoraan selaimen suojausmallissa, mukaan lukien käyttöoikeusikkunat.
Voimme myös olla yhteydessä muihin sovelluksiin URI-järjestelmien kautta, kuten avaamalla Twitter, YouTube tai WhatsApp niiden URL-osoitteiden tai mukautettujen URI-osoitteiden, kuten whatsapp: //, kautta.
Lopuksi, kun luot natiivia PWA-tiedostoja, jotka julkaistaan kaupassa Capacitorin tai Microsoft Storen avulla, voimme yhdistää natiiviin sovellusliittymiin, joiden avulla voimme suorittaa käytännössä kaikki natiivikoodit. Integrointi Windows 10: n kanssa sisältää laitteiston käytön, mutta myös integroinnin käyttöjärjestelmään, joka tarjoaa vaihtoehtoja, kuten Pin to Start. Esimerkiksi Twitter PWA: n avulla voit kiinnittää minkä tahansa käyttäjän aloitusnäyttöön.
Suunnittelu ja UX-haasteet
PWA: n suunnittelulla on ainutlaatuisia haasteita, joten on tärkeää viettää aikaa tutkimiseen, testaamiseen mahdollisimman paljon ja huomioiden seuraavat asiat:
- Käyttäjät odottavat sovelluksen kaltaisia kokemuksia.
- Asennusprosessi on edelleen uusi, joten meidän on tehtävä enemmän työtä selittääksesi, miten sovellus asennetaan.
- Sovelluksen päivittäminen taustalla ilman käyttäjän vuorovaikutusta on hienoa, mutta se tuo myös joitain haasteita UX: lle.
- Pöytäkoneella reagoiva verkkosuunnittelu vie uuden rajan, koska PWA-ikkunat voivat olla pieniä, paljon pienempiä kuin mobiilinäkymä. Tämä tarkoittaa, että meidän on luotava erityisiä näkymiä tai pieniä widgettejä tälle muodolle, kuten Chrome-käyttöjärjestelmässä tänään nähdään.
- Push-ilmoitusten tulisi lisätä arvoa vain käyttäjälle, joten opi kysymään oikeaan aikaan ja älä tuhlaa mahdollisuutta lähettää viestejä, jotka eivät ole hyödyllisiä tai mielenkiintoisia.
- Meidän on suunniteltava web-suorituskykyä ja offline-käyttöä varten.
PWA: n vuosi
Tänä vuonna iOS: n ja työpöydän lisäämisen myötä PWA: t ovat kaikkialla tänään. Mutta meidän on muistettava, että heidän matkansa on vasta alkamassa, joten odota usein muutoksia ja varmista, että pidät itsesi ajan tasalla uusimmista tekniikoista ja ideoista saadaksesi erinomaisen käyttökokemuksen alustan kehittyessä.
Tämä artikkeli julkaistiin alun perin netto, maailman myydyin verkkosivujen suunnittelijoille ja kehittäjille suunnattu lehti. Osta numero 308 täältä tai tilaa täällä.
