UX is al geruime tijd het brandpunt van moderne webontwikkeling. Dit wordt beïnvloed door verschillende factoren, zoals laadsnelheid van pagina's, leesbaarheid, bruikbaarheid en ontwerp. Maar nu dat meer gebruikers geef de voorkeur aan mobiel surfen op het internet over het gebruik van desktops moet elke website - of dit nu een niche-blog of een e-commerce-winkel is - prioriteit gaan geven aan mobiele vriendelijkheid .
Tegenwoordig is het eenvoudig om een thema toe te passen dat geschikt is voor mobiele apparaten en om tools zoals Google's te gebruiken Mobielvriendelijke test om aanvullende aanbevelingen te ontvangen over hoe u uw site kunt optimaliseren. Maar als u de dingen naar een hoger niveau wilt tillen, kunt u een Progressive Web App (PWA) ontwikkelen om uw mobiele gebruikers nieuwe en memorabele nieuwe ervaringen te bezorgen.
Een PWA maakt gebruik van moderne webtechnologieën om app-achtige functies mogelijk te maken. In tegenstelling tot traditionele mobiele websites hoeft een PWA niet de hele pagina te verversen bij het laden van nieuwe inhoud, noch is internetverbinding nodig om toegankelijk te zijn. Ze kunnen ook worden geïnstalleerd, wat betekent dat gebruikers deze eenvoudig opnieuw kunnen gebruiken door een snelkoppeling op het startscherm toe te voegen.
Progressieve webapps hebben het potentieel om het volgende grote ding te worden voor het mobiele internet. Dit werd oorspronkelijk slechts een paar jaar geleden door Google voorgesteld in 2015. Maar in zo'n korte tijd heeft het al veel aandacht getrokken, omdat het relatief eenvoudig is te ontwikkelen en voor de levering van de gebruikerservaring door de toepassing.
-Rahul Varshneya, medeoprichter van het app-ontwikkelingsbedrijf Arkenea .
Een PWA is een groot project dat in de toekomst de richting van uw aanwezigheid op het mobiele internet kan bepalen. Maar als je helemaal nieuw bent in PWA's, zijn hier 7 hulpprogramma's en bronnen waarmee je op de goede weg bent:
Als het gaat om het ontwikkelen van een PWA, moet je een beter begrip hebben van wat ze kunnen.
Om PWA's in actie te zien, kunt u verwijzen naar PWA.rocks voor voorbeelden in verschillende categorieën, waaronder zakelijk, games, winkelen en sociaal. Dit zal u helpen visualiseren hoe uw toekomstige PWA eruit zou kunnen zien. Je kunt ook inspiratie opdoen uit de beschikbare voorbeelden bij het conceptualiseren van wat je PWA mobiele gebruikers biedt.
Knock out is een gratis, open source tool die je kan helpen met Model-View-View Model- of MVVM-bindingen. Hiermee kunt u het coderingsproces van JavaScript UI's vereenvoudigen door u views en declaratieve bindingen te laten definiëren die worden beheerd door viewmodel- eigenschappen.
Het platform draait uitsluitend op JavaScript, dat werkt met alle belangrijke browsers en elk webraamwerk. De Knockout-bibliotheek kan ook gemakkelijk worden geïntegreerd met bestaande websites zonder uitgebreide herschrijvingen.
De snelste manier om een PWA te maken is om te gebruiken PWABuilder en bouw snel een servicemedewerker voor offline functionaliteit, die werkt door de "offline.html" van uw webserver te trekken en te serveren wanneer gebruikers de internetverbinding verliezen. U kunt uw PWA ook indienen bij de app store voor Android- en iOS-apparaten.
Om PWABuilder te gebruiken, hoeft u alleen de URL van uw website in te voegen en vervolgens de aanvullende gegevens in te vullen, zoals uw naam, sitebeschrijving en voorkeurspictogram. U kunt ook eenvoudig bepaalde eigenschappen wijzigen, zoals de schermoriëntatie, taal en achtergrondkleur van uw PWA. Het platform zal dan automatisch een manifest genereren op basis van de informatie die u verstrekt.
JavaScript is meestal de inleidende taal die wordt geleerd door studenten die webontwikkeling willen leren. Als u een ervaren Java- of .NET-ontwikkelaar bent, dan angularjs is een van de beste JavaScript-frameworks die je kunt gebruiken voor webapplicaties. Toch biedt hun website een heleboel gidsen, tutorials en bronnen die u helpen uw weg te vinden op het platform.
De nieuwste versie, Angular v4.0, biedt dezelfde omgeving, of u zich nu ontwikkelt voor mobiel of desktop. Als u denkt dat Angular te ingewikkeld is voor uw behoeften, kunt u ervoor kiezen Reageer - een JavaScript-bibliotheek op maat van de UI-ontwikkeling. Een ander alternatief is Polymeer , die u sjablonen en andere herbruikbare componenten kan bieden die het proces van PWA-ontwikkeling kunnen versnellen.
Een PWA is niet echt een doe-het-zelf-project voor zelfgemaakte bloggers of affiliate marketeers, maar het kan nog steeds met de juiste middelen worden gedaan. Als je al ervaring hebt met content management systemen, maar geen idee hebt van het ontwikkelen van webapplicaties, dan kun je de basis er doorheen krijgen Google-ontwikkelaars , een bibliotheek met bronnen die u kunnen helpen bij het leren coderen.
Google-ontwikkelaars hebben een uitgebreide zelfstudie over hoe PWA's werken, hoe er een te bouwen en hoe het correct kan worden uitgevoerd. Het behandelt ook andere basics, zoals het inschakelen van de banner 'Toevoegen aan startscherm' en het gebruik van HTTPS.
webpack is een uiterst nuttige tool voor het bundelen van uw JavaScript-app-bronnen, inclusief niet-codeactiva zoals lettertypen en afbeeldingen. Deze worden behandeld als JavaScript-objecten, waardoor ze sneller kunnen worden geladen. Het platform maakt het ook aanzienlijk eenvoudiger om afhankelijkheden te beheren.
Vergeet niet dat Webpack een steile leercurve heeft, wat betekent dat je uren kunt bladeren voor tutorials en handleidingen. De leermiddelen en documentatie die beschikbaar zijn op hun website zijn echter niet beginnersvriendelijk. Het goede nieuws is dat Webpack veel wordt behandeld op andere sites, waaronder het documentatiegedeelte van Angular 4.0.
Tenslotte, GitHub is een community-driven website die repositories van projecten onderhoudt. Het omvat een breed scala aan programmeergerelateerde onderwerpen, inclusief JavaScript- en PWA-servicemedewerkers. In feite kunt u de PWA.rocks- en Webpack-repositories binnen het platform vinden. Dit zal je helpen je begrip te vergroten of zelfs bijdragen aan verdere ontwikkeling.
Tegenwoordig zijn er een handvol repositories met PWA's op GitHub. Je kunt van deze projecten leren of je eigen repository starten terwijl je met je eerste PWA experimenteert. GitHub heeft nu ook projectbeheerfuncties, zodat u op afstand naadloos kunt samenwerken met andere ontwikkelaars.
Progressive Web Apps zijn de toekomst van mobiele webervaringen, maar niet veel merken gebruiken deze momenteel. Met de bovenstaande tools bent u nu volledig in staat om een opvallende PWA te creëren en een gezaghebbende aanwezigheid te vestigen. Houd er rekening mee dat PWA-hulpmiddelen, -bronnen en -praktijken evolueren met de voortdurend evoluerende technologieën van grote online browsers.