Progressiv webapplikation ( eng. progressive web app, PWA) er en teknologi inden for webudvikling, der visuelt og funktionelt omdanner et websted til en applikation (en mobilapplikation i en browser).
Statistikker viser, at 66 % af brugerne ikke downloader en enkelt applikation om måneden (comScore-data fra 2014 - i gennemsnit tre måneder). Det meste af deres tid - cirka 85% - bruger brugeren på fem yndlingsapplikationer. Som regel er disse instant messengers, sociale netværk, videohosting.
Samtidig er mobilbrowseren stort set heller ikke en prioriteret form for adgang til internettet. Ifølge comScore brugte smartphone- og tabletbrugere 87 % af deres tid på apps i 2017, sammenlignet med 13 % i browseren.
PWA er en hybridløsning og giver dig mulighed for at åbne applikationen ved hjælp af en mobilbrowser. Samtidig er funktionaliteten af den native applikation fuldt bevaret:
PWA-teknologien blev skabt af Microsoft i 2000 ( HTA ), derefter skabte Apple sin egen version af HTML-applikationer i 2007. Oprindeligt blev applikationer til den originale iPhone udviklet på webplatformen og var tilgængelige i Safari, en browser til macOS og iOS. Teknologien lykkedes dog ikke på grund af dårlig brugeroplevelse (dårlig brugeroplevelse), og et år senere dukkede App Store op i den anden version af styresystemet. Samtidig begyndte den aktive udvikling af native applikationer, og udsatte udviklingen af PWA-teknologi.
Et par år senere klonede andre platforme ideen, såsom MeeGo-browseren på Nokia N9.
PWA-teknologi vandt stor popularitet i 2015 på grund af udvidelsen af funktionerne i Google Chrome-browseren og promoveringen af Service Worker og Web App Manifest. Samtidig opfandt designer Francis Berriman (Frances Berriman) og Google Chrome-ingeniør Alex Russell (Alex Russell) udtrykket PWA.
I marts 2018 var der væsentlige ændringer i implementeringen af webstandarder. Med iOS 11.3-opdateringen tilføjede Apple Service Worker-support til mobilversionen af Safari. Samtidig blev der tilføjet support til Safari til macOS.
Til gengæld, blot en måned efter Apple, i april 2018, tilføjede Microsoft Service Worker-support til sin Microsoft Edge-browser. Derudover introducerede Windows 10 muligheden for at distribuere PWA'er gennem Microsoft Store.
For april 2020 kan offline arbejde med PWA give iOS, Android, Windows, Linux, macOS og Chrome OS i browsere Chrome, Safari, Firefox, Edge og Samsung Internet.
En mulighed er at bruge en færdiglavet gratis open source-ramme . Ionic og Vue Storefront skiller sig ud blandt dem.
Ionic er en ramme med et indbygget bibliotek af standardelementer og betalte udvidelser. Repræsenterer SDK . Det inkluderer sæt JavaScript- og CSS- komponenter bygget oven på Angular 2 , Sass og Apache Cordova .
Vue Storefront er en gratis og open source PWA-ramme til en onlinebutik. Skrevet i Vue.js. Den har fleksible indstillinger og tilpasningsmuligheder, hvilket gør den til en ret alsidig løsning til integration med Pimcore/CoreShop, BigCommerce, PrestaShop, Shopware eller for eksempel Magento via API'et .
En af de universelle løsninger til implementering af PWA er også Quasar-rammen.
Ud over at bruge et framework, kan du integrere PWA-teknologi ved hjælp af plugins. Hvert CMS har sit eget standard plugin. I dette tilfælde skal du først kontrollere, at webstedet opfylder kravene:
En service worker er en JavaScript-fil, der kører i baggrunden som en selvstændig tjeneste. Det er ikke knyttet til DOM eller websider, kører på en anden tråd og får adgang til DOM ved hjælp af postMessage API.
Fra brugerens perspektiv giver Service Worker dig mulighed for at udføre handlinger såsom at sende push-meddelelser og forudindlæse indhold til offline visning.
Application shell er en virtuel shell. Ligesom skallen på en indbygget applikation indlæses den, når den starter, og derefter indlæses dynamisk information på den fra netværket.
Web-app-manifestet giver oplysninger om applikationen i en JSON -tekstfil . Det er nødvendigt, at webapplikationen indlæses og vises visuelt for brugeren på samme måde som en indbygget applikation.
Det kan indeholde følgende elementer: baggrundsfarve, kategorier, beskrivelse, dir, display, iarc_rating_id, ikoner, lang, navn, omfang, skærmbilleder, serviceworker, kort_navn, start_url, temafarve osv. Alle er ansvarlige for de oplysninger, som brugeren ser normalt efter installationen: navn, baggrundsfarve, oprettelse af et ikon på smartphoneskærmen osv.
Push-meddelelser er en teknologi til at sende push-beskeder .
Derudover kræver PWA, at alle webstedsressourcer overføres via HTTPS .
PWA kombinerer egenskaberne af en indbygget applikation og funktionerne i en browser, hvilket har sine fordele:
PWA-teknologi er ikke universel og har en række ulemper:
Onlinebutikker bruger aktivt PWA.
Mere end 60 % af verdens e-handelsdetailsalg sker via online-kanaler. I 2021 forventes denne indikator at vokse til 73% (ifølge Statista ).
PWA giver mulighed for at arbejde med e-handel offline og øge konverteringen på grund af sessionskontinuitet.
Med PWA kan brugeren administrere push-notifikationer, indtaste "Min konto" med et enkelt klik, betale for køb med bankkort eller Apple Pay- og Google Pay-systemer.
Nem implementering afhænger af, om netbutikken bruger en open source-platform. SaaS-løsninger kræver tilpasset PWA-udvikling fra leverandøren.
En af de tilgængelige platforme til PWA-implementering er Magento CMS. PWA-teknologien er blevet udbredt for ikke så længe siden, men der er allerede opnået erfaringer med at integrere PWA med Magento.
Som regel bruges en indbygget løsning til accelereret implementering - PWA Studio. SSR-teknologi (server-side rendering) er dog endnu ikke implementeret i den, hvilket ville gøre det muligt for søgemaskinen at udstede en færdiglavet side efter anmodning. I dette tilfælde er det muligt at bruge Vue Storefront. For en søgerobot ser en side på Vue Storefront ud som et almindeligt websted – det er vigtigt for SEO.
For mikrovirksomheder leverede start-up SWEETY en helt gratis platform, hvor alle kan oprette deres eget PWA SPA - sted. Bygget med React har denne bygherre indbyggede funktioner til oprettelse af en landingsside og e-handel. Projektet modtaget i konstruktøren kan senere installeres på din egen hosting.
Starbucks-kæden har udviklet en PWA til indsamling af ordrer ud over den sædvanlige mobilapplikation. Med næsten den samme grænseflade var størrelsen af PWA 99,84% mindre, hvilket gjorde den mere populær blandt brugerne. Som følge heraf er antallet af ordrer via det mobile internet fordoblet og næsten lig med antallet af ordrer via desktoppen.[ hvad? ] .
Skabelsen af PWA har også bragt succes for AliExpress. Konverteringsraten for nye brugere steg med 104 %. PWA-funktionaliteten hjalp dem også med at generere dobbelt så mange sidebesøg pr. session. Sessionstiden steg i gennemsnit med 74 % på tværs af alle browsere (ifølge developers.google.com ).
PWA'er bruges også af velkendte virksomheder som Twitter , Nikkei , Lancôme , Forbes og andre.
Blandt de russiske virksomheder med speciale i PWA-udvikling er INDIFICA , GetGain , SDBG .
PWA'er har været forbundet med adskillige privatlivsproblemer gennem årene. Dette har resulteret i, at Apple blokerer flere PWA-funktioner i Safari.
Andre browsere som Chrome og Firefox fortsatte dog aktivt med at understøtte PWA-udvikling. Mozilla udgav for nylig Firefox 85, som droppede understøttelse af en vigtig desktop PWA-funktion.