Progressiv webbapplikation ( eng. progressive webbapp, PWA) är en teknik inom webbutveckling som visuellt och funktionellt omvandlar en webbplats till en applikation (en mobilapplikation i en webbläsare).
Statistik visar att 66 % av användarna inte laddar ner en enda applikation per månad (comScore-data från 2014 – i genomsnitt tre månader). Det mesta av sin tid - cirka 85 % - spenderar användaren i fem favoritapplikationer. Som regel är dessa snabbmeddelanden, sociala nätverk, videovärdar.
Samtidigt är den mobila webbläsaren i stort sett inte heller en prioriterad form av tillgång till Internet. Enligt comScore spenderade smartphone- och surfplattor 87 % av sin tid på appar under 2017, jämfört med 13 % i webbläsaren.
PWA är en hybridlösning och låter dig öppna applikationen med en mobil webbläsare. Samtidigt är funktionaliteten för den inbyggda applikationen helt bevarad:
PWA-tekniken skapades av Microsoft 2000 ( HTA ), sedan skapade Apple sin egen version av HTML-applikationer 2007. Till en början utvecklades applikationer för den ursprungliga iPhonen på webbplattformen och var tillgängliga i Safari, en webbläsare för macOS och iOS. Tekniken var dock inte framgångsrik på grund av dålig användarupplevelse (dålig användarupplevelse), och ett år senare dök App Store upp i den andra versionen av operativsystemet. Samtidigt började den aktiva utvecklingen av inhemska applikationer, vilket skjuter upp utvecklingen av PWA-teknik.
Några år senare klonade andra plattformar idén, som MeeGo-webbläsaren på Nokia N9.
PWA-tekniken fick stor popularitet 2015 på grund av utökningen av funktionerna i webbläsaren Google Chrome och marknadsföringen av Service Worker och Web App Manifest. Samtidigt myntade designern Francis Berriman (Frances Berriman) och Google Chrome-ingenjören Alex Russell (Alex Russell) begreppet PWA.
I mars 2018 skedde betydande förändringar i implementeringen av webbstandarder. Med iOS 11.3-uppdateringen lade Apple till Service Worker-support till mobilversionen av Safari. Samtidigt lades stöd till Safari för macOS.
I sin tur, bara en månad efter Apple, i april 2018, lade Microsoft till Service Worker-stöd till sin Microsoft Edge-webbläsare. Dessutom introducerade Windows 10 möjligheten att distribuera PWA:er via Microsoft Store.
För april 2020 kan offlinearbete med PWA tillhandahålla iOS, Android, Windows, Linux, macOS och Chrome OS i webbläsarna Chrome, Safari, Firefox, Edge och Samsung Internet.
Ett alternativ är att använda ett färdigt gratis ramverk med öppen källkod . Ionic och Vue Storefront sticker ut bland dem.
Ionic är ett ramverk med ett inbyggt bibliotek med standardelement och betalda tillägg. Representerar SDK . Den innehåller uppsättningar av JavaScript- och CSS- komponenter byggda ovanpå Angular 2 , Sass och Apache Cordova .
Vue Storefront är ett gratis PWA-ramverk med öppen källkod för en onlinebutik. Skrivet i Vue.js. Den har flexibla inställningar och anpassningsförmåga, vilket gör den till en ganska mångsidig lösning för att integrera med Pimcore/CoreShop, BigCommerce, PrestaShop, Shopware eller till exempel Magento via API:et .
En av de universella lösningarna för att implementera PWA är också Quasar-ramverket.
Förutom att använda ett ramverk kan du integrera PWA-teknik med plugins. Varje CMS har sin egen standardplugin. I det här fallet måste du först kontrollera att webbplatsen uppfyller kraven:
En service worker är en JavaScript-fil som körs i bakgrunden som en fristående tjänst. Den är inte associerad med DOM eller webbsidor, körs på en annan tråd och får åtkomst till DOM med hjälp av postMessage API.
Ur användarens perspektiv låter Service Worker dig utföra åtgärder som att skicka push-meddelanden och förinläsa innehåll för offlinevisning.
Application shell är ett virtuellt skal. Liksom skalet för en inbyggd applikation laddas den när den startar, och sedan laddas dynamisk information in i den från nätverket.
Webappmanifestet ger information om programmet i en JSON -textfil. Det är nödvändigt att webbapplikationen laddas och visas visuellt för användaren på ett liknande sätt som en inbyggd applikation.
Den kan innehålla följande element: bakgrundsfärg, kategorier, beskrivning, dir, display, iarc_rating_id, icons, lang, namn, omfattning, skärmdumpar, serviceworker, short_name, start_url, theme_color, etc. Alla är ansvariga för den information som användaren ser vanligtvis efter installationen: namn, bakgrundsfärg, skapa en ikon på smartphoneskärmen, etc.
Push-meddelanden är en teknik för att skicka push-meddelanden .
Dessutom kräver PWA att alla webbplatsresurser överförs över HTTPS .
PWA kombinerar egenskaperna hos en inbyggd applikation och funktionerna i en webbläsare, vilket har sina fördelar:
PWA-tekniken är inte universell och har ett antal nackdelar:
Onlinebutiker använder aktivt PWA.
Mer än 60 % av världens e-handelsförsäljning sker via onlinekanaler. Till 2021 förväntas denna indikator växa till 73 % (enligt Statista ).
PWA ger en möjlighet att arbeta med e-handel offline och öka konverteringen tack vare sessionskontinuitet.
Med PWA kan användaren hantera push-notiser, ange "Mitt konto" med ett klick, betala för köp med bankkort eller Apple Pay- och Google Pay-system.
Enkel implementering beror på om onlinebutiken använder en öppen källkodsplattform. SaaS-lösningar kräver anpassad PWA-utveckling från leverantören.
En av de tillgängliga plattformarna för PWA-implementering är Magento CMS. PWA-tekniken har blivit utbredd för inte så länge sedan, men erfarenheter har redan vunnits med att integrera PWA med Magento.
Som regel, för accelererad implementering, används en inbyggd lösning - PWA Studio. SSR-teknik (server-side rendering) har dock ännu inte implementerats i den, vilket skulle tillåta sökmotorn att utfärda en färdig sida på begäran. I det här fallet är det möjligt att använda Vue Storefront. För en sökrobot ser en sida på Vue Storefront ut på samma sätt som en vanlig sajt – detta är viktigt för SEO.
För mikroföretag gav nystartade SWEETY en helt gratis plattform där alla kan skapa sin egen PWA SPA - sida. Byggd med React , har denna byggare inbyggda funktioner för att skapa en målsida och e-handel. Projektet som tas emot i konstruktören kan senare installeras på din egen hosting.
Starbucks-kedjan har utvecklat en PWA för att samla in beställningar utöver den vanliga mobilapplikationen. Med nästan samma gränssnitt var storleken på PWA 99,84 % mindre, vilket gjorde den mer populär bland användare. Som ett resultat har antalet beställningar via mobilt internet fördubblats och nästan lika med antalet beställningar via skrivbordet.[ vad? ] .
Skapandet av PWA har gett framgång även för AliExpress. Konverteringsfrekvensen för nya användare ökade med 104 %. PWA-funktionen hjälpte dem också att generera dubbelt så många sidbesök per session. Sessionstiden ökade med i genomsnitt 74 % i alla webbläsare (enligt developers.google.com ).
PWA:er används också av välkända företag som Twitter , Nikkei , Lancôme , Forbes och andra.
Bland de ryska företagen som specialiserar sig på PWA-utveckling finns INDIFICA , GetGain , SDBG .
PWA har associerats med flera integritetsproblem under åren. Detta har resulterat i att Apple blockerat flera PWA-funktioner i Safari.
Andra webbläsare som Chrome och Firefox fortsatte dock att aktivt stödja PWA-utveckling. Mozilla släppte nyligen Firefox 85, som släppte stödet för en viktig PWA-funktion för skrivbordet.