Progresszív webalkalmazások 101: a mit, miért és hogyan

Mi az a progresszív webalkalmazás? Miért van szükségünk rá? Hogyan építhetünk egyet?

Láttál már valaha egy „Hozzáadás a kezdőképernyőhöz” szalaghirdetést, mint fent, egy webhely böngészése közben? Amikor rákattint a gombra, az „alkalmazás” magát a háttérben telepíti. Amikor megnyitja ezt az alkalmazást, amely most az alkalmazás fiókjában található, böngészhet ugyanazon élményben, amelyet a böngészőjében tett, de most már közvetlenül a mobiltelefonján.

Ami most van, az egy mobilalkalmazás, amelyet egy webalkalmazásról töltöttek le. Mindezt anélkül, hogy látnunk kellene egy alkalmazásbolt arcát.

Az alkalmazás megszerzése olyan egyszerű volt! De ez nem is a legjobb rész. Amikor megnyitja ezt az alkalmazást, akkor is képes böngészni a tartalmat, ha még nincs internetje. Offline hozzáféréssel rendelkezik az alkalmazáshoz! Mennyire klassz?

Amivel találkozott, az egy Progresszív Webalkalmazás (PWA). A PWA lehetővé teszi az alkalmazás telepítését maga a böngészőablakból, elérhető a telefonján, mint egy natív alkalmazás, és offline módban is működik, akárcsak egy natív alkalmazás.

De mit jelent valójában egy webalkalmazás progresszív? Vessünk egy mélyebb merülést a progresszív webalkalmazásokban, miért gondolom, hogy jobbak, mint a natív alkalmazások, és mitől különböznek a hagyományos webalkalmazásoktól.

Mi az a progresszív webalkalmazás (PWA)?

A Progresszív Webalkalmazás kifejezést Alex Russell és Frances Berriman alkotta meg. Alex szavai szerint:

A Progresszív Webalkalmazások csak olyan webhelyek, amelyek minden megfelelő vitamint bevettek.

Ez nem egy új keret vagy technológia. A bevált módszerek összessége, hogy a webalkalmazás funkció hasonlóvá váljon egy asztali vagy mobilalkalmazáshoz. Az álom az, hogy olyan egységes és zökkenőmentes élményt szerezzünk, hogy a felhasználó képtelen megkülönböztetni a Progresszív Webalkalmazást és a natív mobilalkalmazást.

A progresszív webalkalmazások felhasználói élményt nyújtanak a fokozatos fejlesztés révén. Ez lényegében azt jelenti, hogy a PWA ugyanazokat a funkciókat látja el egy új iPhone 8-on, mint egy régebbi generációs iPhone-on. Bizonyos funkciók nem biztos, hogy elérhetőek, de az alkalmazás továbbra is úgy működik és teljesít, ahogy kellene.

Miért van szükségünk egy progresszív webalkalmazásra?

Mielőtt megértenénk, miért van szükségünk progresszív webalkalmazásra, beszéljünk néhány olyan kihívásról, amelyekkel ma szembesülünk a natív és a webalkalmazásokkal.

Internet sebesség : lehet, hogy ezt nem veszi észre attól függően, hogy hol lakik, de a világ lakosságának 60% -a továbbra is használja a 2G internetet. Még az Egyesült Államokban is néhány embernek telefonos hívást kell használnia az internet eléréséhez.

Lassú webhelyterhelés: Tudja, hogy egy felhasználó mennyi ideig vár a „Bezárás X” gombra, ha egy webhely túl lassú? Három másodperc! A felhasználók 53% -a elhagy egy weboldalt, ha az túl lassú.

Nagy súrlódás: Az emberek nem akarnak natív alkalmazásokat telepíteni. Egy átlagos felhasználó 0 alkalmazást telepít egy hónap alatt.

Felhasználói elkötelezettség: A felhasználók idejük nagy részét natív alkalmazásokban töltik, de a mobilinternet-elérés majdnem háromszorosa a natív alkalmazásokénak. Ezért a felhasználók többsége nem aktívan foglalkozik. A felhasználók azonban idejük 80% -át csak az első három natív alkalmazásukra fordítják.

A PWA-k segítenek megoldani ezeket a problémákat. A progresszív webalkalmazás használatának több oka is van, de az alábbiakban bemutatjuk a legfontosabb szolgáltatásokat:

  1. F ast: A PWA-k következetesen gyors élményeket nyújtanak. Attól a pillanattól kezdve, hogy a felhasználó letölti az alkalmazást, a pillanatig, amikor kapcsolatba lépnek vele, minden nagyon gyorsan történik. Mivel az adatokat gyorsítótárba helyezheti, rendkívül gyors az alkalmazás újraindítása a hálózat elérése nélkül is.
  2. Azt ntegrated felhasználói élmény: PWAs érzi magát, és úgy viselkednek, mint natív alkalmazásokat. Ülnek a felhasználó kezdőképernyőjén, push értesítéseket küldenek, mint a natív alkalmazások, és hozzáférhetnek egy eszköz olyan funkcióihoz, mint a natív alkalmazások. Az élmény zökkenőmentes és integrált.
  3. R eliable tapasztalat: A rendszer segítségével a szolgáltatási dolgozók, tudjuk megbízhatóan festeni egy képet a felhasználó képernyőjén akkor is, ha a hálózati sikertelen.
  4. E ngaging: Mivel tudjuk értesítést küld a felhasználónak, akkor valóban vezetni a megbízás akár azáltal, hogy a felhasználó bejelentett és összekapcsolódik az alkalmazást.

Röviden: TŰZ.

Hogyan készítsünk Progresszív Webalkalmazást

A Google közzétette a Progresszív webalkalmazások tételeinek ellenőrzőlistáját. Átmegyek négy minimumkövetelményt ahhoz, hogy egy alkalmazás PWA legyen:

1. Webalkalmazás-nyilvántartás

This is just a json file that gives meta information about the web app. It has information like the icon of the app (which a user sees after installing it in their app drawer), background color of the app, name of the app, short name, and so on. We can write this manifest file ourselves or we can use tools to generate one for us.

2. Service Workers

Service Workers are event-driven workers that run in the background of an application and act as a proxy between the network and application. They are able to intercept network requests and cache information for us in the background. This can be used to load data for offline use. They are a javascript script that listens to events like fetch and install, and they perform tasks.

Here is a sample serviceworker.js

self.addEventListener('fetch', event => { //caching for offline viewing const {request} = event; const url = new URL(request.url); if(url.origin === location.origin) { event.respondWith(cacheData(request)); } else { event.respondWith(networkFirst(request)); } }); async function cacheData(request) 

3. Icon

This is used to provide an app icon when a user installs the PWA in their application drawer. A jpeg image will just be fine. The manifest tool I highlighted above helps in generating icons for multiple formats, and I found it very useful.

4. Served over HTTPS

In order to be a PWA, the web application must be served over a secure network. With services like Cloudfare and LetsEncrypt, it is really easy to get an SSL certificate. Being a secure site is not only a best practice, it also establishes your web application as a trusted site for users demonstrating trust and reliability, and avoiding middle man attacks.

Note: This is part 1 of 2 part series. In the next part, we will create a Progressive Web App from scratch with a skeleton index.html. Check out part 2 here.

Did you learn something new? Have comments? Know a DevJoke? Tweet me @shrutikapoor08

Miért keverednek össze a programozók Halloween és karácsony között?

Mert TOT 31 = DEC 25 #DevJokes #WorkChat

- Shruti Kapoor (@ shrutikapoor08) 2018. június 22