Tartalom
- A PWA-k emelkedése
- A PWA-k ma működnek
- Telepítés
- Offline és azonnali indítás
- Első osztályú tapasztalat
- App üzletek
- Platformintegráció
- Tervezés és UX kihívások
- A PWA-k éve
Ahogy néhány évvel ezelőtt az adaptív webdesign megszüntette az asztali és a mobil webhelyek közötti szakadékot, a progresszív webalkalmazás-technikák jelenleg csökkentik a szakadékot a web és az alkalmazásvilág között. Az asztali és a mobilalkalmazások közötti felhasználói tapasztalatok gyors konvergenciája miatt sokkal letisztultabb és hatékonyabb internet fejlődik - bár óhatatlanul nem anélkül, hogy az alapul szolgáló genetikai kódot jelentősen megváltoztatnák.
- Hogyan készítsünk Progresszív Webalkalmazást
Nyilvánvalóan vannak jelentős szelektív nyomások, amelyek ezt vezérlik. Először is, a natív alkalmazások létrehozása minden réshez nem feltétlenül jelenti az erőforrások hatékony felhasználását: a felhasználók több száz nagy alkalmazással pazarolják el a sávszélességet és az értékes lemezterületet, és a vállalatok rengeteg pénzt költenek csak alkalmazások létrehozásával, hogy elhagyják őket. első verzióik után. Ezen alkalmazások többségét csak a webtartalom vezérli: a webszolgáltatásokból vagy a tartalomkezelő rendszerből származó információk.
A progresszív webalkalmazás meghatározása nem konkrét. A PWA csak egy webalkalmazás, amely progresszív fejlesztéssel több új API-t és képességet használ a webplatformon, hogy alkalmazás-szerű élményt nyújtson minden platformon, azonos kódbázissal. Inkább a bevált gyakorlatok és az API használat összessége, amely kiváló alkalmazásszerű élményt nyújt a felhasználók számára, tehát nem mintha PWA-val rendelkezne, vagy nincs; inkább az, hogy a webhelye többé-kevésbé PWA.
Új webhely építésének kezdetét tervezi? Próbálja meg használni a webhelykészítőt. És győződjön meg róla, hogy megkapja a szükséges támogatást egy tisztességes webtárhely-szolgáltatással is. Vagy valami kissé másért lásd a legjobb felhőtároló útmutatót.
A PWA-k emelkedése
Míg a PWA név 2015-ben jött létre a Menekülés a lapoktól anélkül, hogy elveszítenénk a lelkünket Alex Russell, aki a Google-nál dolgozott a Chrome-csapatnál, útjuk valójában nem ott kezdődött. Korábban rendelkezünk HTML alkalmazásokkal (HTA), amelyeket a Microsoft 1999-ben hozott létre, sok más webalkalmazás-platformmal együtt a Nokia, a BlackBerry és más vállalatok részéről. Majd 2007-ben Steve Jobs bemutatta, hogy akkor mi volt az egyetlen módszer az eredeti iPhone-hoz való alkalmazások létrehozására: PWA-k, bár más néven. A Chrome onnan indult, néhány évvel később fejlesztette az API-kat, és feltalálta a PWA nevet.
Annyi korábbi sikertelen tapasztalattal, hogy webes tartalmat igyekszünk eljuttatni az alkalmazások világába, miért gondoljuk, hogy ez most működni fog? Nos, elsősorban azoktól a vállalatoktól függ, amelyek most dolgoznak és népszerűsítik a PWA-k mögött álló technológiákat, például a Microsoft, a Google, az Apple és a Mozilla, hogy csak néhányat említsünk. Ezenkívül a webplatform teljesítménye elérte azt a pontot, ahol nincs észlelt különbség, ha összehasonlítunk egy jól megtervezett PWA-t egy natív alkalmazással. Ezek a feltételek még soha nem léteztek, és ez az egyik oka annak, hogy a webes közösség úgy döntött, hogy eljött a PWA-k ideje.
A PWA-k ma működnek
Ma a PWA-k teljesen működőképesek és a következőkre telepíthetők:
- Android a legtöbb böngészővel, a Chrome pedig a legjobb élményt kínálja
- iOS a Safarival
- Chromebookok
- Windows 10 a Microsoft Store-ból
- A KaiOS-szal ellátott telefonok - a Firefox OS villája - jelenleg több millió felhasználó számára elérhető, főleg Indiában
Idén később a Chrome-on keresztül is érkezik a támogatás a macOS, a Windows és a Linux számára. Ma már kísérleti zászlóként elérhető 'Desktop PWA', ha most szeretné kipróbálni. A Windows Edge-re történő telepítés a bolt használata nélkül később is megtörténik, bár nincs meghatározva konkrét időkeret.
Ha újraolvassa a listát, láthatja, hogy a következő hónapokban minden platform támogat vagy hamarosan támogatni fogja a teljesen telepíthető PWA-kat. És mivel a PWA csak egy olyan webhely, amelynek tetején olyan funkciók vannak, amelyek csak kompatibilis böngészőkben aktiválódnak, alapfunkcióitól kezdve akár azt is mondhatjuk, hogy minden böngészővel kompatibilis.
Ezenkívül a PWA-kat jelenleg a különböző keretrendszerek CLI-jéből generálják, beleértve az Angular 6+ CLI-t, a React Create App-ot, a Polymer PWA Starter Kit-jét és az Preact CLI-t. Végül az Ionic Framework csapata felvetette a Capacitor ötletet, amely egy nyílt forráskódú Cordova-csere, amely natív PWA-kat tesz lehetővé minden alkalmazásboltban.
Telepítés
A PWA egyik kritikus szempontja az alkalmazás telepítése. Ez a folyamat két opcionális lépésben történik: az alkalmazás fájljainak letöltése és offline tárolása, valamint az ikonok telepítése az operációs rendszerben. Mivel mindkét lépés választható, kínálhat offline élményt a böngészőben, vagy ajánlhat ikont offline telepítés nélkül. De egy igazi PWA-nak mindkettőt tartalmaznia kell: a TLS-sel együtt kell szolgáltatnia HTTPS alatt, és a felhasználó eldönti, hogy a böngészőben vagy a saját telepített ikonján belül fogja-e használni.
Offline és azonnali indítás
A PWA agya a szolgáltató munkatársa, a felhasználó eszközére telepített JavaScript fájl, amely az alkalmazás fájljainak letöltéséért, gyorsítótárba történő tárolásáért és később szükség esetén későbbi kiszolgálásáért felelős. Miután a szolgáltató telepítve van, úgy működik, mint egy hálózati proxy minden erőforráshoz, amelyre a webalkalmazásnak szüksége van: dönthet úgy, hogy lekéri a hálózatról, vagy átadja a helyi gyorsítótárból, ami elérhetővé teszi az alkalmazást offline állapotban és csak pár milliszekundum akkor is, ha a felhasználónak van kapcsolata, emulálva a natív alkalmazásindítást.
A szolgáltató telepítéséhez a HTML-dokumentumának tartalmaznia kell a következőket:
if (’serviceWorker’ a navigátorban) navigator.serviceWorker.register ("sw.js");
Ez telepíti az "sw.js" fájlt a felhasználók eszközeire az aktuális tartomány aktuális mappájához - ez a fogalom hatókör néven ismert. A telepítés után a hatókörébe tartozó URL következő látogatásait az adott szolgáltató kezeli.
Tegyük fel, hogy van egy PWA fájlunk négy fájlból: index.html, app.js, app.css és logo.png. Az első dolog az, hogy ezeket a fájlokat az sw.js fájl gyorsítótárába kell telepíteni.
const források = ["index.html", "app.js", "app.css", "logo.png"]; maga. addEventListener ("install", event => {event. waitUntil (cache.open ("myPWAcache") .then (cache => cache.addAll (erőforrások));});
Ezután ahhoz, hogy a PWA mindig a gyorsítótárból kerüljön kiszolgálásra, meg kell hallgatnunk a letöltési eseményt a szolgáltató munkatársán belül, és el kell döntenünk a használni kívánt gyorsítótár-házirendről, például először a gyorsítótárról a következő részletgel.
self.addEventListener ("fetch", e => e.respondWith (cache.match (e.request). majd (res => res);
Ebben az esetben minden alkalommal, amikor a felhasználó hozzáfér a PWA-hoz (mind böngészőből, mind telepített ikonról), a motor megkapja a fájlokat a gyorsítótárból. A PWA-k előnye a natív alkalmazásokkal szemben az, hogy az eszközöknek nem kell minden fájlt újból letölteniük változás esetén, csak azt a fájlt, amely átlátszó eljárással megváltozott. Továbbá igény szerint továbbra is letölthetjük az alkalmazás egyes részeit.
De a kihívás az, hogy honnan tudja, hogy mely fájlok frissültek a szerveren, hogy lecserélhesse őket a gyorsítótárba? Ha nem szeretne alacsony szintű szolgáltatást nyújtó munkatársat írni ennek kezelésére, használhatja a nyílt forráskódú könyvtár Workboxot, amely segítséget nyújt a szervizmunkás és az erőforrás-nyilvántartás generálásában a telepített csomag frissítéséhez.
Ne feledje, hogy a PWA fájljai törlődnek, ha tárolási nyomás nehezedik az eszközre, hacsak nem igényli az állandó tárolást, ha rendelkezésre áll:
ha (a ’tároló’ a navigátorban && ’a’ megmarad ’a navigátorban.tárolás) navigator.storage.persist ();
A Chrome és a legtöbb Android böngészőben az alkalmazás nem tudja felhasználni a rendelkezésre álló hely több mint öt százalékát; iOS-en ez csak állomásonként 50 MB (közel 50 MB); az Edge-ben a teljes memória méretétől függően változik, a Windows Store-ban pedig korlátlan.
Első osztályú tapasztalat
Megvan az agyunk, és itt az ideje a szívnek: a webalkalmazás megnyilvánulása. A weboldal PWA-vá alakításának célja nem csupán annak biztosítása, hogy gyors vagy offline legyen elérhető, hanem az is, hogy lehetővé tegye számára, hogy saját ikonja legyen az operációs rendszerben, és teljesen önálló élményt kínáljon, mint bármely más telepített alkalmazás.
A jegyzék egy JSON-fájl, amely meghatározza a böngésző vagy az alkalmazásbolt által a telepítési viselkedés meghatározásához használt PWA metaadatait.
A fájl több tulajdonságot definiál a PWA metaadataként. Minden operációs rendszer elolvassa ezeket a tulajdonságokat, és mindent megtesz annak érdekében, hogy megfeleljen a kívánt élménynek. Például az Android beolvassa a „display: standalone” szót, és normál alkalmazásélményt hoz létre. A ’display: minimal-ui’ használatával látható URL-t és TLS-tanúsítványt hoz létre - ez hasznos a biztonsági szempontból érzékeny alkalmazások számára. A „display: fullscreen” funkcióval teljesen magával ragadó alkalmazásokat hoz létre állapotsor vagy látható vissza gomb nélkül. Ikonok és színek meghatározzák, hogy a splash képernyők vagy a címsorok hogyan fognak kinézni az alkalmazás ablakában.
Vannak olyan nyilvánvaló generátorok, mint például a Web App Manifest Generator vagy a PWA Builder, amelyek szintén nagy felbontású (minimum 512 pixel) átméretezést végeznek az Ön számára különböző felbontásokban.
Ha a jegyzékfájlt összekapcsolja a HTML-dokumentumban, a felhasználók a böngészőtől függően különböző technikák segítségével telepíthetik az alkalmazást, általában úgynevezik Hozzáadás a kezdőképernyőhöz, Telepítés vagy csak Hozzáadás. Ha a PWA bejárható a Bing által, a Microsoft automatikusan hozzáadja a Microsoft Store-hoz, hogy a Windows 10 felhasználói onnan telepíthessék.
Egyes operációs rendszereken a PWA képes lesz linkek rögzítésére. Ez azt jelenti, hogy miután a felhasználó telepítette az alkalmazást, a jegyzék hatókörébe tartozó bármely URL az alkalmazás határain belül nyílik meg, és nem a böngészőben, függetlenül attól, hogy a böngészőben vagy más alkalmazásokban, például a WhatsApp, a Facebook jelenik meg vagy egy e-mailt.
Ha teljesíti az itt definiált PWA követelményeket, egyes platformok környezeti jelvényeket (egy kis ikont, amely általában az URL-sávban jelzi, hogy a web telepíthető) vagy egy webalkalmazás-szalaghirdetést kínál. Ha szeretné, hozzáadhatja saját egyéni Telepítés gombját is a következő részlet segítségével:
window.addEventListener ("beforeinstallpr ompt", function (e) {e.prompt (); // megjeleníti a telepítés natív parancsát})
Ha a PWA telepítve van, akkor az „alkalmazás telepítve” esemény az ablakobjektumra kerül, így nyomon követheti az általa hallgatott statisztikákat.
App üzletek
A böngészőből történő telepítés egyik fő előnye, hogy elkerülhető az alkalmazás-áruház jóváhagyási folyamata, vagy fizetnie kell azért, hogy megjelenítő legyen. Ez nyilvánvaló előnyökkel jár, mint például azonnali közzététel, privát alkalmazások létrehozása vállalatok számára vagy olyan alkalmazások, amelyeket nem szabad elfogadni az üzletekben.
De néhány vállalat valóban a boltban akar lenni. A mai naptól az egyetlen üzlet, amely hivatalosan elfogadja a PWA-kat, a Windows Store és a kaiOS Store. Szerencsére olyan eszközökkel, mint a Capacitor (jelenleg Alpha-ban) vagy a PWA Builder, natív csomagokat hozhatunk létre és írhatunk alá más platformokra is.
Néhány PWA már megjelent a Google Play Áruházban, például a Twitter Lite és a Google Maps Go, amelyek jelenleg egyedi megvalósítás alatt állnak. A Chrome megbízható internetes tevékenységeken keresztül kínál megoldást a Chrome 68-tól. Ettől kezdve képesek leszünk létrehozni egy Android csomagot (APK) egy indítóval a PWA-ra és feltölteni a boltba. A Windows 10 rendszeren futó Microsoft Store esetében a PWA Builder webhely jelenleg segít egy APPX Windows 10 csomag létrehozásában. Internetes nézet használatával manuálisan létrehozhat egy iOS alkalmazást az App Store számára, de rendkívül óvatosan járjon el az áruház szabályainak betartásával.
Platformintegráció
A fokozatos fejlesztési technikák alkalmazásával számos funkciót használhat, beleértve a leküldéses értesítéseket, a kamera és mikrofon hozzáférését, a földrajzi helymeghatározást, az érzékelőket, a fizetéseket, a párbeszédpaneleket és az offline tárolást. Mindezek a szolgáltatások közvetlenül a böngésző biztonsági modelljén belül futnak, beleértve az engedélyezési párbeszédpaneleket is.
URI sémákon keresztül is kommunikálhatunk más alkalmazásokkal, például a Twitter, a YouTube vagy a WhatsApp megnyitásával az URL-címeikkel vagy az egyedi URI-kkal, például a whatsapp: //.
Végül, amikor natív PWA-kat hozunk létre, amelyeket a boltba teszünk közzé a Capacitor vagy a Microsoft Store használatával, képesek leszünk áthidalni a natív API-kat, amelyek lehetővé teszik majdnem minden natív kód végrehajtását. A Windows 10 integrációja magában foglalja a hardveres hozzáférést, de az operációs rendszerrel való integrációt is, olyan opciókat kínálva, mint a Pin to Start. Például a Twitter PWA segítségével bármely felhasználót rögzíthet a kezdőképernyőhöz.
Tervezés és UX kihívások
A PWA-k tervezésének egyedülálló kihívásai vannak, ezért fontos, hogy egy kis időt fordítson a lehető legtöbb kutatásra, tesztelésre és a következők figyelembevételére:
- A felhasználók alkalmazásszerű élményekre számítanak.
- A telepítési folyamat még mindig új, ezért külön erőfeszítéseket kell tennünk az alkalmazás telepítésének elmagyarázása érdekében.
- Az alkalmazás frissítése a háttérben felhasználói interakció nélkül nagyszerű, de néhány kihívást is jelent az UX számára.
- Az asztalon az adaptív webdesign új határt szab, mivel a PWA ablakok aprók lehetnek, sokkal kisebbek, mint egy mobil nézetablak. Ez azt jelenti, hogy speciális nézeteket vagy kis modulokat kell létrehoznunk ehhez a formátumhoz, amint azt ma a Chrome OS látja.
- A push értesítéseknek csak a felhasználó számára kell hozzáadott értéket adniuk, ezért tanuljon meg a megfelelő pillanatban kérdezni, és ne pazarolja a lehetőséget, hogy nem hasznos vagy érdekes üzeneteket küldjön.
- Meg kell terveznünk a webes teljesítményt és az offline hozzáférést.
A PWA-k éve
Az iOS és az asztali számítógép idei hozzáadásával a PWA-k ma mindenhol megtalálhatók. De emlékeznünk kell arra, hogy útjuk még csak most kezdődik, ezért számítson a gyakori változásokra, és ügyeljen arra, hogy mindig naprakész legyen a legújabb technikákkal és ötletekkel, hogy kiváló felhasználói élményt nyújtson, miközben a platform fejlődik.
Ezt a cikket eredetileg a háló, a világ legkeresettebb weblaptervezőknek és -fejlesztőknek szóló magazinja. Vásárolja meg a 308. számot itt vagy iratkozzon fel ide.
