A progresszív webalkalmazás ( eng. progressive web app, PWA) egy olyan webfejlesztési technológia, amely vizuálisan és funkcionálisan átalakítja a webhelyet alkalmazássá (mobilalkalmazás a böngészőben).
A statisztikák azt mutatják, hogy a felhasználók 66%-a havonta egyetlen alkalmazást sem tölt le (a comScore adatok 2014-ből – átlagosan három hónap). Idejük nagy részét - körülbelül 85%-át - a felhasználó öt kedvenc alkalmazással tölti. Általában ezek azonnali üzenetküldők, közösségi hálózatok, videotárhely.
Ugyanakkor a mobilböngésző nagyrészt nem is az internet-hozzáférés elsődleges formája. A comScore szerint az okostelefonok és táblagépek felhasználói 2017-ben idejük 87%-át alkalmazásokban töltötték, míg a böngészőben ez az arány 13%.
A PWA egy hibrid megoldás, és lehetővé teszi az alkalmazás mobilböngészővel történő megnyitását. Ugyanakkor a natív alkalmazás funkcionalitása teljes mértékben megmarad:
A PWA technológiát a Microsoft hozta létre 2000-ben ( HTA ), majd az Apple 2007-ben elkészítette a HTML alkalmazások saját verzióját. Kezdetben az eredeti iPhone alkalmazásokat a webes platformon fejlesztették ki, és a Safariban, a macOS és iOS böngészőben voltak elérhetők. A technológia azonban a rossz felhasználói élmény (rossz felhasználói élmény) miatt nem járt sikerrel, és egy évvel később megjelent az App Store az operációs rendszer második verziójában. Ezzel egy időben megkezdődött a natív alkalmazások aktív fejlesztése, elodázva a PWA technológia fejlesztését.
Néhány évvel később más platformok klónozták az ötletet, például a Nokia N9 MeeGo böngészője.
A PWA technológia nagy népszerűségre tett szert 2015-ben a Google Chrome böngésző képességeinek bővítése, valamint a Service Worker és a Web App Manifest népszerűsítése miatt. Ugyanebben az időben a tervező, Francis Berriman (Frances Berriman) és a Google Chrome mérnöke, Alex Russell (Alex Russell) megalkotta a PWA kifejezést.
2018 márciusában jelentős változások történtek a webes szabványok bevezetésében. Az iOS 11.3-as frissítésével az Apple Service Worker támogatást adott a Safari mobil verziójához. Ezzel egy időben támogatást adtunk a Safarihoz a macOS-hez.
Viszont alig egy hónappal az Apple után, 2018 áprilisában a Microsoft Service Worker támogatást adott Microsoft Edge böngészőjéhez. Ezenkívül a Windows 10 bevezette a PWA-k Microsoft Store-on keresztüli terjesztésének lehetőségét.
2020 áprilisában a PWA-val végzett offline munkavégzés iOS, Android, Windows, Linux, macOS és Chrome OS operációs rendszert biztosít a Chrome, Safari, Firefox, Edge és Samsung Internet böngészőkben.
Az egyik lehetőség egy kész ingyenes nyílt forráskódú keretrendszer használata . Az Ionic és a Vue Storefront kiemelkedik közülük.
Az Ionic egy keretrendszer, amely szabványos elemekből és fizetős bővítményekből álló beépített könyvtárral rendelkezik. Az SDK -t képviseli . Az Angular 2 , Sass és Apache Cordova tetejére épülő JavaScript és CSS összetevők készleteit tartalmazza .
A Vue Storefront egy ingyenes és nyílt forráskódú PWA keretrendszer egy online áruház számára. Vue.js -ben írva . Rugalmas beállításokkal és alkalmazkodóképességgel rendelkezik, ami meglehetősen sokoldalú megoldást jelent a Pimcore/CoreShop, BigCommerce, PrestaShop, Shopware vagy például a Magento API -n keresztüli integrációjához .
Ezenkívül a PWA megvalósításának egyik univerzális megoldása a Quasar keretrendszer.
A keretrendszer használata mellett a PWA technológiát is integrálhatja bővítmények segítségével. Minden CMS -nek saját szabványos bővítménye van. Ebben az esetben először ellenőriznie kell, hogy a webhely megfelel-e a követelményeknek:
A service worker egy JavaScript-fájl, amely a háttérben önálló szolgáltatásként fut. Nem kapcsolódik a DOM -hoz vagy a weboldalakhoz, egy másik szálon fut, és a postMessage API segítségével éri el a DOM-ot.
A felhasználó szemszögéből a Service Worker lehetővé teszi olyan műveletek végrehajtását, mint például a push értesítések küldése és a tartalom előzetes betöltése offline megtekintéshez.
Az alkalmazáshéj egy virtuális shell. A natív alkalmazások shelljéhez hasonlóan az induláskor betöltődik, majd dinamikus információk töltődnek be rá a hálózatról.
A Web App Manifest egy JSON -szövegfájlban nyújt információkat az alkalmazásról . Szükséges, hogy a webes alkalmazás a natív alkalmazáshoz hasonló módon legyen betöltve és vizuálisan megjelenítve a felhasználó számára.
A következő elemeket tartalmazhatja: background_color, kategóriák, leírás, dir, display, iarc_rating_id, icons, lang, name, hatókör, screenshots, serviceworker, short_name, start_url, theme_color stb. Ezek mindegyike felelős a felhasználó által megadott információkért. általában a telepítés után látja: név, háttérszín, ikon létrehozása az okostelefon képernyőjén stb.
A Push Notifications egy push értesítések küldésére szolgáló technológia .
Ezenkívül a PWA megköveteli, hogy az összes webhely-erőforrást HTTPS -en keresztül továbbítsák .
A PWA egyesíti a natív alkalmazás tulajdonságait és a böngésző funkcióit, aminek megvannak a maga előnyei:
A PWA technológia nem univerzális, és számos hátránya van:
Az online áruházak aktívan használják a PWA-t.
A világ e-kereskedelmi kiskereskedelmi értékesítésének több mint 60%-a online csatornákon keresztül történik. 2021-re ez a mutató várhatóan 73%-ra nő (a Statista szerint ).
A PWA lehetőséget biztosít az e-kereskedelem offline használatára, és növeli a konverziót a munkamenet-folytonosság miatt.
A PWA segítségével a felhasználó kezelheti a push értesítéseket, egy kattintással beléphet a "Saját fiókba", bankkártyával vagy Apple Pay és Google Pay rendszerekkel fizethet a vásárlásokért.
A megvalósítás egyszerűsége attól függ, hogy az online áruház használ-e nyílt forráskódú platformot. A SaaS-megoldások egyéni PWA-fejlesztést igényelnek a szállítótól.
A PWA megvalósításához elérhető egyik platform a Magento CMS. A PWA technológia nem is olyan régen terjedt el, azonban a PWA és a Magento integrálása terén már van tapasztalat.
A felgyorsított megvalósításhoz általában egy beépített megoldást használnak - a PWA Studio-t. Ugyanakkor még nem valósították meg benne az SSR (server-side rendering) technológiát, amely lehetővé tenné, hogy a kereső kérésre kész oldalt adjon ki. Ebben az esetben a Vue Storefront használata lehetséges. Egy keresőrobot számára a Vue Storefront oldala ugyanúgy néz ki, mint egy normál webhely – ez fontos a SEO szempontjából.
A mikrovállalkozások számára az induló SWEETY egy teljesen ingyenes platformot biztosított, ahol mindenki létrehozhatja saját PWA SPA oldalát. A React segítségével készült építő beépített funkciókkal rendelkezik a céloldal és az e-kereskedelem létrehozásához. A konstruktorban kapott projekt később telepíthető saját tárhelyére.
A Starbucks lánc a szokásos mobilalkalmazáson kívül egy PWA-t is kifejlesztett a megrendelések gyűjtésére. Szinte ugyanazzal a felülettel a PWA mérete 99,84%-kal kisebb volt, így népszerűbb lett a felhasználók körében. Ennek eredményeként a mobilinternetes rendelések száma megduplázódott, és majdnem megegyezik az asztali rendelések számával.[ mi? ] .
A PWA létrehozása az AliExpress számára is sikert hozott. Az új felhasználók konverziós aránya 104%-kal nőtt. A PWA funkció szintén segített nekik kétszer annyi oldallekérést generálni munkamenetenként. A munkamenet ideje átlagosan 74%-kal nőtt az összes böngészőben (a developers.google.com szerint ).
A PWA-kat olyan jól ismert cégek is használják, mint a Twitter , a Nikkei , a Lancôme , a Forbes és mások.
A PWA fejlesztésre szakosodott orosz cégek közül az INDIFICA , a GetGain , az SDBG .
A PWA-k az évek során számos adatvédelmi aggályhoz kapcsolódtak. Ennek eredményeként az Apple blokkolt több PWA-funkciót a Safariban.
Más böngészők, például a Chrome és a Firefox azonban továbbra is aktívan támogatták a PWA fejlesztését. A Mozilla nemrégiben kiadta a Firefox 85-öt, amely megszüntette egy fontos asztali PWA funkció támogatását.