En introduksjon til Progressive Web Apps
De fleste utviklere har i det minste hørt noen buzz rundt Progressive Web Apps. Disse støttes mye av tekniske selskaper som Google og blir raskt den norm for webapplikasjoner med flere enheter.
Men, hva er akkurat det forskjell mellom en typisk og a progressive web-app?
For utviklere, det er en hel verden av forskjell. Progressive Web Apps bruker moderne web-APIer til opprett innfødte appopplevelser i nettleseren. Dette betyr at utviklere kan bygge dynamiske apper med rask lasting uten å bruke hybridrammer.
I denne veiledningen vil jeg dekke grunnleggende om Progressive Web Apps, noen primære funksjoner, og hvordan du kan komme i gang med å bygge din egen.
Hva er Progressive Web Apps?
Progressive Web Apps (eller PWAs) dra nytte av nettleser-APIer å opprette innfødte appopplevelser rett i nettleseren på en hvilken som helst enhet.
Til slutt omfatter Progressive Web Apps en håndfull teknologi som utviklere kan bruke til å lage kraftige, innfødte applikasjoner. Mange kommer fra Web-APIer slik som Servicearbeider API eller Push API.
Det er ganske få krav å ringe noe en PWA, men disse er de viktigste:
- Er fullt mobil responsiv.
- Overholder progressiv forbedring.
- I stand til å installer lokalt på smarttelefoner og nettbrett.
- Kjører offline uten Internett, ved hjelp av tjenestearbeidere.
- Skiller innhold fra funksjonalitet bruker app shell.
- Builts på HTTPS for bedre sikkerhet.
- Synlig i Google-søk.
- har dynamiske app-lignende sider men hver fortsatt har sin egen nettadresse.
Hvis du er tenker på å bygge en liten web-app Du kan prøve å lage en Progressiv Web App i stedet. Dette kommer med litt av en læringskurve, men du har så mye mer kontroll over brukeropplevelsen som et resultat.
La oss dykke inn i grunnleggende for Progressive Web Apps og lære hva som gjør dem kryss.
Tjenestearbeidere
Hver eneste Progressive Web App trenger servicearbeidere. Disse er som trafikk offiserer hvem koordinerer hvor trafikken går, hvor data kommer fra, og hvordan det alt blir organisert og bufret.
Enkelt sagt, servicearbeiderne fungerer som en JavaScript-fil og kjører i bakgrunnen av din webapp. Når brukeren utfører en hendelse, det kaller servicearbeider skript å enten trekke data, lagre data eller begge deler!
Bruker Servicearbeider API er viktig å kjøre en offline-støttet PWA. Slik gjør du det overføre data mellom visninger og hvordan du kan Be om data fra en lokal database. Men dette er for det meste avanserte ting du lærer ved å jobbe med et PWA-prosjekt.
Ta en titt på Servicearbeidere Cookbook til grunnleggende utdrag og live demoer. Dette er en fantastisk måte å lære ved å studere hva andre har gjort og kloning det i dine egne apper.
Hvis du håper å bygge en Progressiv Web App start med API for servicearbeideren. Bare tinker med det og sett opp en enkel demo lokalt. Dette vil sette grunnlaget for senere bygge tilpassede applikasjonsfunksjoner og sider at alle går gjennom tjenestearbeidere.
Til nybegynnere guider og detaljerte kodestykker, Jeg anbefaler spesielt disse ressursene:
- Komme i gang med servicearbeidere
- Komme i gang med servicearbeidere
- Tjenestepersonellprøve: Tilpasset frakoblet sideeksempel
App-skallet
De fleste innfødte apps følg en app shell arkitektur hvor data og app-koden er helt skilt fra brukergrensesnittet. Applikasjonsskallet kan være bufret lokalt slik at hver side laster utrolig raskt.
Dette holder med det samme “innfødt app” føler hvor grensesnittet forblir alltid synlig men innhold / funksjonalitet belastes annerledes hver gang. Sjekk ut denne siden på Google Developers-siden for å lære litt mer om app shell modell.
De fleste apper har a veldig enkelt app shell og du bør designe arkitekturen din med enkelhet i tankene.
Vanligvis har app-skallet disse hovedelementer:
- De øverste navigeringslinjene.
- Oppdater knappen (valgfritt).
- Sidebakgrunnsbeholder.
Du finner en fin case studie her om Googles I / O Progressive Web App shell arkitektur. De tilbyr også noen tips for å bygge ditt eget skallarkitektur, cache det og trekk den automatisk for hver side.
Tenk på skallarkitekturen som alle de statiske brukergrensesnittene du vil bruke på hver enkelt side. Disse burde være skilt fra resten av koden din og bufret for enkel gjenbruk. Sjekk også ut Googles intro til emnet med masse kode utdrag for å hjelpe deg med å komme i gang.
Online og offline støtte
De fleste innfødte apps Kjør fint uten Internett. Progressive webapplikasjoner er ment å følge denne samme oppførselen.
Gjennom servicearbeidere kan du bygge lokale caches med JSON kode for hver side. På denne måten kan brukerne bla din web-app lokalt. Du kan også inkludere en manifestfil for å definere ikonene, skjermbildet og andre startinnstillinger.
Hvis du bruker API for servicearbeider, ta en titt på Cache API som er en del av samme rammeverk. Det er generelt den beste måten å lagre data lokalt og få tilgang til det fra servicearbeidere seinere.
Du kan også test noen web-app ved hjelp av fyr, et gratis verktøy for å sjekke funksjonalitet og støtte for PWA-teknologier.
PWA er alltid krever offline støtte gjennom Service Worker API, slik at de kan arbeid i lavtilkoblingsstilstander. Fyr er den beste måten å teste for offline støtte sammen med en rekke andre funksjoner.
Live eksempler
Å studere levende PWAer og se hvordan de fungerer er en fin måte å lære. Det Progressive Web App-markedet er imidlertid fortsatt fremvoksende, så mange av de beste er spredt i ulike hjørner av Internett.
Men takket være PWA klipper galleri, Jeg har curated noen fantastiske eksempler for å vise ut hva PWAer virkelig kan gjøre.
1. Valutakalkulator
Dette ganske enkelt Valutakalkulator tar valutakurser og beregner gjeldende forskjeller mellom massevis av valutaer over hele verden.
Du vil legge merke til at denne webapps er fullt responsiv, støtter berøring, og automatiske oppdateringer uten sideoppdatering.
Dette er bare noen av funksjonene du forventer i noen typisk Progressiv Web App. Dette App kan også lagres lokalt til telefonen din for å jobbe offline, selv om den kobler til en JSON-fil for å sjekke gjeldende valutakurser.
2. Engelsk aksenter
Jeg elsker bare denne nettappappen fordi den er både unik og utrolig godt designet. De Engelsk aksentkort kuraterer videoer på nettet hvor folk bærer aksenter fra bestemte regioner i USA og Storbritannia.
Ved å klikke hvor som helst på kartet, kan du lytte til hvordan folk uttaler bestemte ord i forskjellige deler av verden. Appen er lynrask og det er åpnet på GitHub for alle å sjekke ut.
Internene går videre Reagere / Redux med Fire og en API-tilkobling til Google Maps. Absolutt et godt eksempel på noe ganske enkelt for nybegynnere å studere og lære.
3. Pokedex.org
En annen ganske enkel PWA er dette Pokedex app laget av Nolan Lawson. Han publiserte også denne koden fritt på GitHub, så det er oss enda et prosjekt som er verdt å snuse rundt og studere.
Siden disse dataene kan forbli statiske, er det håndteres gjennom en lokal motor kalt PouchDB. Alle data kommer fra PokeAPI og lagrer deretter som vanlig JavaScript. Dette betyr at du kan lagre det lokalt på telefonen din som en ekte innfødt app, og den vil kjøre med eller uten Internett-tilgang. Ganske kul, ikke sant?
Hele greia er drevet av JavaScript, så det er et testament til hvor mye du kan gjøre med frontend-koden. Det bruker mye caching med Service Worker API, så Det er galt raskt og super lett å bruke.
4. Flipkart
Til slutt og mest overraskende, la oss se Flipkart nettsted. Dette er fullt e-handel butikk er faktisk en Progressiv Web App.
Det er fullt responsiv og Laster sider dynamisk. Sidens nettadresser legges til i nettleseren, slik at du kan kopiere / lime inn og dele dem som et typisk nettsted.
Dette er enkelt det mest komplekse PWA jeg noensinne har sett. Jeg er overrasket over at utviklerne var i stand til å skape en så sømløs opplevelse på nettet for alle brukere, enn si støtter lokal offline lagring, også.
Og mens jeg ikke kunne finne en repo for hele Flipkart-kildekoden, er det a Flipkart-side på GitHub med mindre kodestykker fra deres utviklerteam.
Lær mer
Progressive webapplikasjoner er utrolig populær og vil sikkert få damp som flere utviklere bytter over fra native / hybrid apps.
Det kalles en årlig toppmøte Progressive Web App Summit og de publiserer videoer på YouTube du kan se gratis. Dette er en fin måte å hente litt kunnskap uten å betale for en billett.
Men hvis du leter etter mer detaljert PWA kodende guider definitivt sjekk ut disse opplæringene:
- En nybegynners guide til Progressive Web Apps
- Bygg din første progressive webapp med React
- Bygg en Progressiv Web App med Polymer
