UX har vært et fokuspunkt for moderne webutvikling for en stund nå. Dette påvirkes av flere faktorer, inkludert sidelasterhastighet, lesbarhet, brukervennlighet og design. Men nå er det flere brukere foretrekker mobil nettlesing over bruk av skrivebord, hvilken som helst nettside - det være seg en nisjeblogg eller en e-handelsbutikk - bør begynne å prioritere mobil vennlighet .

I dag er det enkelt å bruke et mobil-responsivt tema og bruke verktøy som Googles Mobilvennlig test å motta ytterligere anbefalinger om hvordan du optimaliserer nettstedet ditt. Men hvis du vil ta ting til neste nivå, kan du utvikle en Progressive Web App (PWA) for å levere friske og minneverdige nye opplevelser til mobilbrukere.

Hva er en Progressiv Web App?

En PWA benytter moderne webteknologi for å aktivere app-lignende funksjoner. I motsetning til tradisjonelle mobile nettsteder trenger en PWA ikke å oppdatere hele siden når du laster inn nytt innhold, og det trenger ikke internettforbindelse for å være tilgjengelig. De er også installerbare, noe som betyr at brukere enkelt kan gjenbruke dem ved å legge til en snarvei på startsiden.

Progressive webapplikasjoner har potensial til å bli neste store ting for mobilnett. Dette ble opprinnelig foreslått av Google bare et par år tilbake i 2015. Men innen kort tid har den allerede tiltrukket seg mye oppmerksomhet fordi det er relativt enkelt å utvikle og for applikasjonens brukeropplevelse.

-Rahul Varshneya, medstifter av app utviklingsselskap Arkenea .

En PWA er et stort prosjekt som kan lede retningen for mobilnettverken din i fremtiden. Men hvis du er helt ny til PWA, er det 7 verktøy og ressurser som vil sette deg på rett spor:

1. PWA.rocks

Når det gjelder å utvikle en PWA, må du ha en dypere forståelse av hva de kan.    

For å se PWAs i aksjon, kan du referere til PWA.rocks for eksempler i flere kategorier, inkludert forretninger, spill, shopping og sosiale. Dette vil hjelpe deg med å visualisere hva din fremtidige PWA kan se ut. Du kan også låne inspirasjon fra de tilgjengelige eksemplene når du konseptualiserer hva PWA vil tilby mobile brukere.

2. Knockout

Slå ut er et gratis, åpen kildekodeverktøy som kan hjelpe deg med modellvisning eller modell-MVVM-bindinger. Dette gjør at du kan forenkle prosessen med å kode JavaScript brukergrensesnitt ved å la deg definere visninger og deklarative bindinger som styres av visningsmodellegenskaper .

Plattformen kjører rent på JavaScript, som fungerer sammen med alle de store nettleserne og alle webrammer. Knockout-biblioteket kan også enkelt integreres med eksisterende nettsteder uten omfattende omskrivninger.

3. PWABuilder

Den raskeste måten å opprette en PWA er å bruke PWABuilder og raskt bygge en servicearbeider for frakoblet funksjonalitet, som fungerer ved å dra og betjene "offline.html" fra webserveren din når brukerne mister internettforbindelse. Du kan også sende inn PWA til app-butikken for Android og iOS-enheter.

For å bruke PWABuilder, alt du trenger å gjøre er å sette inn nettsiden din URL og fyll deretter inn de ytterligere detaljer som ditt navn, nettstedbeskrivelse og foretrukket ikon. Du kan også enkelt endre visse egenskaper som PWAs skjermretning, språk og bakgrunnsfarge. Plattformen vil da automatisk generere et manifest basert på informasjonen du oppgir.

4. AngularJS

JavaScript er vanligvis det innledende språket som læres av studenter som ønsker å lære webutvikling. Hvis du er en erfaren Java eller .NET-utvikler, så AngularJS er en av de beste JavaScript-rammene du kan bruke til webapplikasjoner. Likevel tilbyr deres nettside massevis av guider, opplæringsprogrammer og ressurser som hjelper deg med å lære deg veien rundt plattformen.

Den nyeste versjonen, Angular v4.0, gir det samme miljøet uansett om du utvikler for mobil eller skrivebord. I tilfelle du tror Angular er for komplisert for dine behov, kan du velge i stedet for Reagere -A JavaScript-bibliotek skreddersydd for UI-utvikling. Et annet alternativ er polymer , som kan gi deg maler og andre gjenbrukbare komponenter som kan fremskynde prosessen med PWA-utvikling.

5. Google-utviklere

En PWA er ikke akkurat et DIY-prosjekt for selvlagde bloggere eller tilknyttede markedsførere, men det kan fortsatt gjøres med de riktige ressursene. Hvis du allerede har erfaring med innholdsstyringssystemer, men er uklart om å utvikle webapplikasjoner, kan du få det grunnleggende nede gjennom Google utviklere , et bibliotek med ressurser som kan hjelpe deg med å lære å kode.

Google utviklere har en omfattende opplæring om hvordan PWAs fungerer, hvordan man bygger en, og hvordan man får det til å kjøre riktig. Den dekker også andre grunnleggende som å gjøre det mulig å legge til "banner til hjemmeskjermen" og bruke HTTPS.

6. Webpack

Webpack er et ekstremt nyttig verktøy for å bunte JavaScript-appressursene dine, inkludert ikke-kodeaktiver som fonter og bilder. Disse blir behandlet som JavaScript-objekter, noe som igjen gjør at de kan lastes raskere. Plattformen gjør det også betydelig enklere å håndtere avhengigheter.

Bare husk at Webpack har en bratt læringskurve, noe som betyr at du kan se på timer med å surfe etter veiledning og veiledning. Læringsressursene og dokumentasjonen som er tilgjengelig på deres nettside er imidlertid ikke nybegynnerlige. Den gode nyheten er, Webpack er mye dekket på andre nettsteder, inkludert Angular 4.0s dokumentasjonsavdeling.

7. GitHub

Endelig, GitHub er et fellesskapsdrevet nettsted som opprettholder register av prosjekter. Den dekker et bredt spekter av programmeringsrelaterte temaer, inkludert JavaScript og PWA servicearbeidere. Faktisk kan du finne PWA.rocks og Webpack-depotene i plattformen. Dette vil hjelpe deg å utdype din forståelse eller til og med bidra til videreutvikling.

I dag er det en håndfull lagre som involverer PWAer på GitHub. Du kan lære av disse prosjektene eller starte ditt eget depot når du eksperimenterer med din første PWA. GitHub har nå også prosjektledelsesfunksjoner, slik at du kan sømløst samarbeide med andre utviklere eksternt.    

Konklusjon

Progressive webapplikasjoner er fremtiden for mobilnettopplevelser, men ikke mange merker bruker dem for øyeblikket. Med verktøyene ovenfor er du nå fullt i stand til å skape en standby-PWA og etablere en autoritativ tilstedeværelse. Bare vær oppmerksom på at PWA-verktøy, ressurser og praksis utvikler seg med de stadigvoksende teknologiene til de store nettleserne.