Bevezetés a progresszív webalkalmazásokba

A legtöbb fejlesztő legalább hallott valamit Progresszív webalkalmazások. Ezeket a technológiai cégek, mint például a Google széles körben támogatják, és hamarosan azok a cégek szabvány a több eszközhöz tartozó webes alkalmazásokhoz.

De pontosan mi az különbség egy tipikus és a haladó webes alkalmazás?

A fejlesztők számára, ez egy egész világ a különbség. A progresszív webalkalmazások modern web API-kat használnak hozzon létre natív alkalmazásélményeket a böngészőben. Ez azt jelenti, hogy a fejlesztők gyors betöltődő dinamikus alkalmazásokat építhetnek hibrid keretek használata nélkül.

Ebben az útmutatóban lefedem a A progresszív webalkalmazások alapjai, néhány elsődleges funkciót, és hogyan kezdhetjük meg saját magunk építését.

Mik azok a progresszív webalkalmazások?

Progresszív webalkalmazások (vagy PWA-k) használja ki a webböngésző API-kat natív alkalmazásélményeket hozhat létre a böngészőben bármelyik eszközön.

Végső soron a Progressive Web Apps a maroknyi technológia hogy a fejlesztők hatékony natív jellegű alkalmazásokat hozhatnak létre. Sokan származnak Web API-k mint például a Service Workers API vagy a Push API.

Vannak meglehetősen kevés követelmény valamit PWA-nak hívni, de ezek az legfontosabbak:

• Teljesen mobil válaszol.
• Megfelel fokozatos javítás.
• Képes telepítse helyileg okostelefonokon és táblagépeken.
• Nem működik Internet nélkül, szolgáltatókkal.
• Elválasztja a tartalmat a funkcionalitástól az alkalmazáshéj használata.
• Épít HTTPS-en a nagyobb biztonság érdekében.
• Felismerhető a Google keresésben.
• Van dinamikus alkalmazásszerű oldalak de mindegyik még mindig saját URL-je van.

Ha te gondolkodni egy kis webes alkalmazás létrehozására megpróbálhat egy Progresszív webalkalmazást létrehozni. Ez egy kis tanulási görbe, de annyira van a felhasználói élmény nagyobb ellenőrzése ennek eredményeként.

Merüljünk el a Progresszív Web Alkalmazások alapjaiba, és megtudjuk, mi teszi őket kullancsként.

Szolgálati munkások

Minden egyes progresszív webalkalmazás szüksége van a szolgáltatókra. Ezek mint a közlekedési tisztek aki koordinálja a forgalmat, ahol az adatok érkeznek, és hogyan mindegyik szervezett és gyorsítótárazott.

Egyszerűen fogalmazva, a szolgáltató munkás JavaScript fájlként működik és a webes alkalmazás hátterében fut. Ha a felhasználó eseményt hajt végre, hívja szolgáltatás munkavállaló szkript húzza az adatokat, mentse az adatokat vagy mindkettőt!

Használni a Service Worker API jelentése alapvető egy offline támogatott PWA futtatásához. Így van adatátvitel a nézetek között és hogyan lehet kérjen adatokat egy helyi adatbázisból. De ez többnyire fejlett cucc, amit egy PWA-projekten keresztül tanulsz.

Keress egy pillantást a Szolgáltatói szakácskönyv mert alapvető részleteket és élő demók. Ez egy fantasztikus módja annak, hogy megtanuljuk, mit tanultak mások klónozzuk ezt a saját alkalmazásaiban.

Ha azt reméli, hogy egy progresszív webalkalmazást épít a Service Worker API-val kezdődik. Csak vigyázz vele, és hozzon létre egy egyszerű demót helyben. Ez megalapozza a későbbi munkát egyedi alkalmazásfunkciók és oldalak építése hogy mindannyian szolgáltatókon keresztül futnak.

mert kezdő útmutatók és részletes kódrészletek, Kifejezetten ajánlom ezeket az erőforrásokat:

• Első lépések a szolgáltatókkal
• Kezdeni a szolgáltatókkal
• Szervizmunkás minta: Egyéni offline oldalminta

Az alkalmazás shellje

Leginkább natív alkalmazások kövesse az app shell architektúráját ahol az adatok és az alkalmazás kódja teljesen független az UI-től. Az alkalmazás shell lehet helyben tárolt így minden oldal hihetetlenül gyors.

Ez ugyanaz marad “natív alkalmazás” érzés, ahol a az interfész mindig látható marad de a a tartalom / funkcionalitás különbözőképpen töltődik be minden alkalommal. Tekintse meg ezt a webhelyet a Google Fejlesztők webhelyén, hogy egy kicsit többet megtudjon a app shell modell.

A legtöbb alkalmazásnak van egy nagyon egyszerű app shell és meg kell terveznie az építészetet az egyszerűség.

Jellemzően az alkalmazás héjának vannak ezek fő elemek:

• Top navigációs sáv linkek.
• Frissítés gomb (opcionális).
• Oldal háttér konténer.

Itt talál egy szép esettanulmányt A Google I / O Progressive Web App shell architektúrája. Néhány tippet kínálnak saját héj architektúrájának kiépítéséhez, gyorsítótárazásához és minden oldalra automatikusan húzza.

Gondolj a shell architektúrára az összes statikus felhasználói felület elem minden egyes oldalon használni fogod. Ezeknek kell lennie elkülönítve a kód többi részétől és gyorsítótárazott az egyszerű újrafelhasználáshoz. Nézze meg A Google intro a témához rengeteg kóddal részleteket, amelyek segítenek az indulásban.

Online és offline támogatás

Leginkább natív alkalmazások Internet nélkül is futhat. A progresszív webalkalmazásoknak ezt a viselkedést kell követniük.

A szolgáltatást végző munkavállalók segítségével helyi gyorsítótárak létrehozása minden oldal JSON kódjával. Így lehet a felhasználók böngészhet a webes alkalmazásban. Lehet, hogy te is tartalmazzon egy manifesztfájlt az ikonok, a fröccsöntő képernyő és más indítási beállítások meghatározásához.

Ha a Service Worker alkalmazást használja, akkor az API-t nézze meg Gyorsítótár API ami ugyanazon keret része. Ez általában a legjobb módja helyben tárolja az adatokat és szolgáltatóktól majd később.

Te is tesztelje a webes alkalmazásokat használva Világítótorony, ingyenes eszköz a PWA technológiák megfelelőségének és támogatásának ellenőrzésére.

PWA-k mindig kapcsolat nélküli támogatásra van szükség a Service Worker API-n keresztül, így lehet alacsony csatlakozású állapotokban. A világítótorony a legjobb módja az offline támogatás tesztelésének, számos egyéb funkcióval együtt.

Élő példák

Az élő PWA-k tanulmányozása és a munkájuk látása nagyszerű módja a tanulásnak. A Progressive Web App piac azonban még mindig felmerül, annyira a legjobbak közül szétszórva az internet különböző sarkaiba.

De, köszönhetően a PWA sziklák galériája, Néhány csodálatos példát tanítottam, hogy megmutassam, milyen valójában a PWA-k.

1. Pénzváltó

Ez meglehetősen egyszerű valutaváltó átváltja az árfolyamokat és kiszámítja az áramot különbségek világviszonylatban.

Ezt a webes alkalmazást észre fogja venni teljesen érzékeny, támogatja az érintést, és automatikus frissítéseket oldal frissítése nélkül.

Ez csak néhány olyan funkció, amit bármi elvár tipikus Progresszív Web App. Ez az alkalmazás helyileg is menthető a telefonhoz, hogy offline állapotban dolgozzon, bár csatlakozik egy JSON fájlhoz az aktuális árfolyamok ellenőrzéséhez.

2. Angol ékezetek

Én egyszerűen imádom ezt a webalkalmazást, mert egyedülálló és hihetetlenül jól megtervezett. A Angol ékezetek térképe online videókat készít ahol az emberek az Egyesült Államok és az Egyesült Királyság egyes régiói ékezetét hordozzák.

A térkép bármely pontjára kattintva meghallgathatja, hogy az emberek hogyan mondanak bizonyos szavakat a világ különböző részein. Az alkalmazás villámgyors, és ez az nyílt forráskódú a GitHub-on bárki megnézheti.

A belső részek futnak Reagálni / Redux val vel Firebase és egy API-kapcsolat a Google Térképhez. Határozottan jó példa arra, hogy a kezdőknek elég egyszerű tanulni és tanulni.

3. Pokedex.org

Ez egy másik meglehetősen egyszerű PWA Pokedex alkalmazás készítette: Nolan Lawson. A kódot is szabadon közzétette a GitHubon, úgyhogy ez egy újabb projekt érdemes körülnézni és tanulni.

Mivel ezek az adatok statikusak maradhatnak helyi motoron keresztül kell kezelni hívott PouchDB. Minden adat a PokeAPI-ból származik, majd egyszerű JavaScript-ként ment. Ez azt jelenti, hogy képes mentse el helyileg a telefonjára mint egy igazi natív alkalmazás, és internet-hozzáféréssel vagy anélkül fog futni. Elég hűvös, igaz?

Az egész powered by JavaScript, így bizonyíték arra, hogy mennyit tehetsz a frontend kóddal. Használja sok gyorsítótár a Service Worker API-val, így őrült gyors és szuper könnyű használni.

4. Flipkart

Végül, és leginkább meglepő módon nézzük meg a Flipkart honlapja. Ez teljes Az e-kereskedelmi üzlet valójában egy progresszív webes alkalmazás.

ez teljesen érzékeny és dinamikusan betölti az oldalakat. Az oldal URL-címei a böngészőhöz vannak csatolva, így másolhatja / beillesztheti és megoszthatja őket, mint egy tipikus webhely.

Ez könnyen a legösszetettebb PWA, amit valaha láttam. Meglepődtem, hogy a fejlesztők képesek voltak ilyen zökkenőmentes élményt teremteni a weben minden felhasználó számára, nem is beszélve a helyi offline tárolás támogatása, is.

És bár nem találtam repo-t a teljes Flipkart forráskódhoz, van egy Flipkart oldal a GitHubon val vel kisebb kódrészletek a fejlesztői csapat.

További információ

A progresszív webalkalmazások hihetetlenül népszerű, és minden bizonnyal gőz lesz mivel egyre több fejlesztő vált át a natív / hibrid alkalmazásokból.

Van egy éves csúcstalálkozó Progresszív webalkalmazás-csúcstalálkozó és a YouTube-on közzétett videókat ingyen nézhetik. Ez egy nagyszerű módja vegyen fel egy kis tudást anélkül, hogy fizetné a jegyet.

De ha részletesebbeket keresel PWA kódoló útmutatók feltétlenül nézd meg ezeket a bemutatókat:

• Kezdő útmutató a progresszív webalkalmazásokhoz
• Készítsd el az első progresszív webalkalmazást a React segítségével
• Progresszív webalkalmazás kiépítése polimerrel