UX har været centrum for moderne webudvikling i nogen tid nu. Dette påvirkes af flere faktorer, herunder sideindlæsningshastighed, læsbarhed, brugervenlighed og design. Men nu så flere brugere foretrækker mobil browsing over brug af desktops, enhver hjemmeside - det være sig en nicheblog eller en e-handelsbutik - bør begynde at prioritere mobil venlighed .

I dag er det nemt at anvende et mobil-responsivt tema og bruge værktøjer som Googles Mobil-venlig test at modtage yderligere anbefalinger om, hvordan du optimerer dit websted. Men hvis du vil tage ting til næste niveau, kan du udvikle en Progressive Web App (PWA) til at levere friske og mindeværdige nye oplevelser til dine mobilbrugere.

Hvad er en Progressiv Web App?

En PWA udnytter moderne webteknologi til at aktivere app-lignende funktioner. I modsætning til traditionelle mobile hjemmesider behøver en PWA ikke at opdatere hele siden, når der lægges nyt indhold, og det behøver heller ikke internetforbindelse til at være tilgængeligt. De kan også installeres, hvilket betyder, at brugerne nemt kan genbruge dem ved at tilføje en startskærmgenvej.

Progressive webapplikationer har potentialet til at være den næste store ting for mobilwebben. Dette blev oprindeligt foreslået af Google bare et par år tilbage i 2015. Men inden for så kort tid har det allerede tiltrukket sig meget opmærksomhed, fordi det er relativt nemt at udvikle og for applikationens brugeroplevelse levering.

-Rahul Varshneya, medstifter af App Development Company Arkenea .

En PWA er et stort projekt, som kan lede retningen af ​​din mobilwebs tilstedeværelse i fremtiden. Men hvis du er helt ny til PWA'er, her er 7 værktøjer og ressourcer, der sætter dig på rette spor:

1. PWA.rocks

Når det kommer til at udvikle en PWA, skal du have en dybere forståelse af, hvad de er i stand til.    

For at se PWA'er i aktion kan du henvise til PWA.rocks til eksempler under flere kategorier, herunder forretning, spil, shopping og socialt. Dette vil hjælpe dig med at visualisere, hvad din fremtidige PWA kunne se ud. Du kan også låne inspiration fra de tilgængelige eksempler, når du konceptualiserer, hvad din PWA vil tilbyde mobilbrugere.

2. Knockout

Slå ud er et gratis, open source-værktøj, der kan hjælpe dig med Model-View-View Model eller MVVM bindinger. Dette gør det muligt at forenkle processen med kodning af JavaScript-brugergrænseflader ved at lade dig definere visninger og deklarative bindinger, der styres af viewmodel- egenskaber.

Platformen kører udelukkende på JavaScript, som fungerer sammen med alle større browsere og enhver webramme. Knockout-biblioteket kan også nemt integreres med eksisterende websteder uden omfattende omskrivninger.

3. PWABuilder

Den hurtigste måde at oprette en PWA på er at bruge PWABuilder og hurtigt opbygge en servicearbejder til offline funktionalitet, som fungerer ved at trække og betjene "offline.html" fra din webserver, når brugerne taber internetforbindelse. Du kan også sende din PWA til appbutikken til Android og iOS-enheder.

For at bruge PWABuilder er alt, hvad du skal gøre, indsat websitetens webadresse og derefter udfyld de yderligere detaljer som dit navn, webstedsbeskrivelse og foretrukket ikon. Du kan også nemt ændre visse egenskaber som din PWAs skærmretning, sprog og baggrundsfarve. Platformen genererer så automatisk et manifest baseret på de oplysninger, du giver.

4. AngularJS

JavaScript er normalt det indledende sprog, der læres af studerende, der ønsker at lære webudvikling. Hvis du er en erfaren Java eller .NET-udvikler, så AngularJS er et af de bedste JavaScript-rammer, du kan bruge til webapplikationer. Alligevel tilbyder deres hjemmeside et væld af vejledninger, vejledninger og ressourcer, der kan hjælpe dig med at lære dig rundt om platformen.

Den nyeste version, Angular v4.0, giver det samme miljø, uanset om du udvikler til mobil eller desktop. Hvis du mener, at Angular er for kompleks til dine behov, kan du vælge i stedet for Reagere -A JavaScript-bibliotek skræddersyet til UI-udvikling. Et andet alternativ er Polymer , som kan give dig skabeloner og andre genbrugelige komponenter, der kan fremskynde processen med PWA-udvikling.

5. Google-udviklere

En PWA er ikke ligefrem et DIY projekt for selvfremstillede bloggere eller affiliate marketingfolk, men det kan stadig gøres med de rigtige ressourcer. Hvis du allerede har erfaring med indholdsstyringssystemer, men er uklare om at udvikle webapplikationer, så kan du få det grundlæggende gennem Google-udviklere , et bibliotek med ressourcer, der kan hjælpe dig med at lære at kode.

Google-udviklere har en omfattende vejledning om, hvordan PWA'er fungerer, hvordan man bygger en, og hvordan man får det til at køre korrekt. Det dækker også andre grundlæggende elementer, som f.eks. Aktivering af "Add to Home Screen Banner" og brug af HTTPS.

6. Webpack

Webpack er et yderst nyttigt værktøj til at bundle dine JavaScript app-ressourcer, herunder ikke-kodeaktiver som fonte og billeder. Disse vil blive behandlet som JavaScript-objekter, som igen tillader dem at blive indlæst hurtigere. Platformen gør det også betydeligt lettere at håndtere afhængigheder.

Bare husk, at Webpack har en stejl indlæringskurve, hvilket betyder at du kan se på timer med at søge efter vejledninger og vejledninger. Læringsressourcerne og dokumentationen til rådighed på deres hjemmeside er dog ikke nybegynderlige. Den gode nyhed er, Webpack er bredt dækket på andre websteder, herunder Angular 4.0's dokumentationsafdeling.

7. GitHub

Endelig, GitHub er et community-drevet websted, der opbevarer repositorier af projekter. Det dækker en bred vifte af programmeringsrelaterede emner, herunder JavaScript og PWA servicearbejdere. Faktisk kan du finde PWA.rocks og Webpack-repositorierne inden for platformen. Dette vil hjælpe dig med at uddybe din forståelse eller endda bidrage til videre udvikling.

I dag er der en håndfuld repositorier, der involverer PWA'er på GitHub. Du kan lære af disse projekter eller starte dit eget depot, når du eksperimenterer med din første PWA. GitHub har nu også projektstyringsfunktioner, som giver dig mulighed for at arbejde uhindret med andre udviklere eksternt.    

Konklusion

Progressive webapplikationer er fremtiden for mobile weboplevelser, men ikke mange mærker bruger i øjeblikket dem. Med værktøjerne ovenfor er du nu fuldt ud i stand til at skabe en standby PWA og etablere en autoritativ tilstedeværelse. Vær opmærksom på, at PWA-værktøjer, ressourcer og praksis udvikler sig med de konstant udviklede teknologier af de store online-browsere.