UX on ollut nykyajan web-kehityksen painopiste jo jonkin aikaa. Tämän vaikuttavat useat tekijät, kuten sivujen latausnopeus, luettavuus, käytettävyys ja muotoilu. Mutta nyt, että lisää käyttäjiä mieluummin mobiiliselaus yli työpöytien, minkä tahansa verkkosivuston - oli se kapea blogi tai sähköinen kaupankäynti - pitäisi aloittaa etusijalle matkaviestinnän ystävällisyys .
Nykyään on helppo soveltaa mobiililaitteille sopivaa teemaa ja käyttää Google-työkaluja Mobile-Friendly Test saada lisää suosituksia sivustosi optimoinnista. Mutta jos haluat viedä asioita seuraavalle tasolle, voit kehittää Progressive Web App (PWA) tuoda tuoreita ja ikimuistoisia uusia kokemuksia mobiilikäyttäjille.
PWA hyödyntää nykyaikaisia web-tekniikoita app-tyyppisten ominaisuuksien käyttöönottamiseksi. Toisin kuin perinteiset mobiilisivustot, PWA: n ei tarvitse päivittää koko sivua lataamatta uutta sisältöä, eikä se tarvitse Internet-yhteyttä. Ne ovat myös asennettavissa, joten käyttäjät voivat helposti käyttää niitä uudelleen lisäämällä kotinäytön pikakuvakkeen.
Progressiiviset verkkosovellukset voivat olla seuraavaksi iso juttu mobiiliverkossa. Googlen alun perin ehdotti tätä vain pari vuotta sitten vuonna 2015. Mutta niin lyhyessä ajassa se on jo herättänyt paljon huomiota, koska se on suhteellisen helppoa kehittää ja sovelluksen käyttökokemus toimitetaan.
-Rahul Varshneya, sovelluskehitysyrityksen perustaja Arkenea .
PWA on suuri projekti, joka saattaa johtaa mobiililaitteesi läsnäolon suuntaan tulevaisuudessa. Mutta jos olet täysin uusi PWA: ita, tässä on 7 työkalua ja resurssia, jotka vievät sinut oikealle tielle:
PWA: n kehittämisessä sinun on syytä ymmärtää paremmin, mitä he pystyvät.
Voit tarkastella PWA-toimintoja toiminnassa PWA.rocks esimerkkejä useista eri luokista, mukaan lukien yritykset, pelit, ostokset ja sosiaaliset. Tämä auttaa sinua visualisoimaan, millainen tuleva PWA voisi näyttää. Voit myös lainata inspiraatiota käytettävissä olevista esimerkeistä käsitteellistää, mitä PWA tarjoaa mobiilikäyttäjille.
Tyrmäys on ilmainen, avoimen lähdekoodin työkalu, joka auttaa sinua Model-View-View Model- tai MVVM-sidosten kanssa. Tämä mahdollistaa JavaScript-käyttöliittymien koodaamisen yksinkertaistamisen antamalla määrität näkymät ja deklaratiiviset sidokset, joita Viewmodel- ominaisuudet ohjaavat .
Laite toimii pelkästään JavaScriptiä käyttäen, joka toimii kaikkien tärkeimpien selainten ja minkä tahansa web-kehyksen kanssa. Knockout-kirjasto voidaan helposti integroida olemassa oleviin verkkosivustoihin ilman laajoja uudelleenkirjoituksia.
Nopein tapa luoda PWA on käyttää PWABuilder ja nopeasti rakentaa palveluntuottaja offline-toiminnallisuuteen, joka toimii vetämällä ja palvelemalla "offline.html" web-palvelimelta aina, kun käyttäjät menettävät Internet-yhteyden. Voit myös lähettää PWA: n Android- ja iOS-laitteiden sovelluskauppaan.
PWABuilderin käyttämiseksi sinun tarvitsee vain lisätä verkkosivustosi URL-osoite ja täyttää sitten lisätiedot, kuten nimesi, sivuston kuvaus ja haluamasi kuvake. Voit myös helposti muokata tiettyjä ominaisuuksia, kuten PWAn ruudun suunta, kieli ja taustaväri. Laite tuottaa automaattisesti manifestiä antamiesi tietojen perusteella.
JavaScript on yleensä aloituskurssi, jonka oppivat opiskelijat, jotka haluavat oppia web-kehitystä. Jos olet kokenut Java- tai .NET-kehittäjä, sitten angularjs on yksi parhaista JavaScript-kehyksistä, joita voit käyttää web-sovelluksissa. Niinpä heidän verkkosivuillaan on paljon oppaita, opetusohjelmia ja resursseja, jotka auttavat sinua oppimaan tiesi ympäri alustaa.
Uusin versio, Angular v4.0, tarjoaa samalle ympäristölle, onko sinulla kehitystä mobiililaitteille tai työpöydälle. Jos luulet, että Angular on liian monimutkainen tarpeidesi vuoksi, voit valita sen sijaan suhtautua - JavaScript-kirjasto, joka on räätälöity käyttöliittymän kehittämiseen. Toinen vaihtoehto on Polymeeri , joka voi tarjota sinulle malleja ja muita uudelleenkäytettäviä komponentteja, jotka voivat nopeuttaa PWA: n kehittymistä.
PWA ei ole täsmälleen DIY-projekti itsenäisille bloggaajille tai affiliatemarkkinoijille, mutta silti voidaan tehdä oikeilla resursseilla. Jos sinulla on jo kokemusta sisällönhallintajärjestelmistä, mutta et ole ymmärtänyt verkkosovellusten kehittämistä, voit saada perusasiat alas Google-kehittäjät , resurssien kirjasto, joka auttaa sinua oppimaan koodauksen.
Google-kehittäjille on kattava opetusohjelma siitä, miten PWA-laitteet toimivat, miten ne on rakennettu ja miten se toimii oikein. Se kattaa myös muut perusasiat, kuten "lisätä kotinäytön banneriin" ja käyttää HTTPS: ää.
webpack on erittäin hyödyllinen työkalu ns. JavaScript-sovellusresurssien niputtamiseen, mukaan lukien ei-koodivarastot kuten kirjasimet ja kuvat. Näitä käsitellään JavaScript-objekteina, mikä puolestaan mahdollistaa niiden lataamisen nopeammin. Foorumi helpottaa myös riippuvuuksien hallintaa huomattavasti.
Muista vain, että Webpackilla on jyrkkä oppimiskäyrä, joten voit katsella oppituntien ja oppaiden selaamista. Oppimisresurssit ja dokumentaatiot, jotka ovat saatavilla verkkosivuillaan, eivät kuitenkaan ole aloittelevia. Hyvä uutinen on, että Webpackia käsitellään laajasti muissa sivustoissa, kuten Angular 4.0: n dokumentaatio-osassa.
Lopuksi GitHub on yhteisöhakuinen verkkosivusto, joka ylläpitää hankkeiden arkistoja. Se kattaa laajan valikoiman ohjelmointiin liittyviä aiheita, kuten JavaScript- ja PWA-palveluntuottajia. Itse asiassa voit löytää PWA.rocks ja Webpack repositories sisällä alustan. Tämä auttaa sinua syventämään ymmärrystäsi tai jopa edistä kehitystä.
Nykyään on olemassa kourallinen arkistoja, joihin liittyy PWA: ita GitHubissa. Voit oppia näistä projekteista tai aloittaa oman arkiston kokeilemalla ensimmäistä PWA: ta. GitHubilla on nyt myös projektinhallintaominaisuudet, joiden avulla voit tehdä tiivistä yhteistyötä muiden kehittäjien kanssa etäyhteydellä.
Progressiiviset verkkosovellukset ovat mobiililaitteiden käyttökokemusten tulevaisuus, mutta niitä ei tällä hetkellä ole paljon tuotemerkkejä. Yllä olevien työkalujen avulla pystyt täysin luomaan standout-PWA: n ja luomaan luotettavan läsnäolon. Huomaa vain, että PWA: n työkalut, resurssit ja käytännöt kehittyvät suurimpien selainten jatkuvasti kehittyvien tekniikoiden avulla .