Aplicația web progresivă ( eng. progressive web app, PWA) este o tehnologie în dezvoltarea web care transformă vizual și funcțional un site într-o aplicație (o aplicație mobilă într-un browser).
Statisticile arată că 66% dintre utilizatori nu descarcă o singură aplicație pe lună (date comScore din 2014 - o medie de trei luni). Majoritatea timpului lor - aproximativ 85% - utilizatorul îl petrece în cinci aplicații preferate. De regulă, acestea sunt mesagerie instant, rețele sociale, găzduiri video.
În același timp, browserul mobil nu este în mare măsură o formă prioritară de acces la Internet. Potrivit comScore , utilizatorii de smartphone-uri și tablete și-au petrecut 87% din timp pe aplicații în 2017, comparativ cu 13% în browser.
PWA este o soluție hibridă și vă permite să deschideți aplicația folosind un browser mobil. În același timp, funcționalitatea aplicației native este pe deplin păstrată:
Tehnologia PWA a fost creată de Microsoft în 2000 ( HTA ), apoi Apple și-a creat propria versiune a aplicațiilor HTML în 2007. Inițial, aplicațiile pentru iPhone-ul original au fost dezvoltate pe platforma web și au fost disponibile în Safari, un browser pentru macOS și iOS. Cu toate acestea, tehnologia nu a avut succes din cauza experienței slabe a utilizatorului (experiență slabă a utilizatorului), iar un an mai târziu, App Store a apărut în a doua versiune a sistemului de operare. În același timp, a început dezvoltarea activă a aplicațiilor native, amânând dezvoltarea tehnologiei PWA.
Câțiva ani mai târziu, alte platforme au clonat ideea, cum ar fi browserul MeeGo de pe Nokia N9.
Tehnologia PWA a câștigat o mare popularitate în 2015 datorită extinderii capabilităților browserului Google Chrome și promovării Service Worker și Web App Manifest. În același timp, designerul Francis Berriman (Frances Berriman) și inginerul Google Chrome Alex Russell (Alex Russell) au inventat termenul PWA.
În martie 2018, au avut loc schimbări semnificative în implementarea standardelor web. Odată cu actualizarea iOS 11.3, Apple a adăugat suport pentru Service Worker la versiunea mobilă a Safari. În același timp, a fost adăugat suport la Safari pentru macOS.
La rândul său, la doar o lună după Apple, în aprilie 2018, Microsoft a adăugat suport pentru Service Worker în browserul său Microsoft Edge. În plus, Windows 10 a introdus capacitatea de a distribui PWA-uri prin Microsoft Store.
Pentru aprilie 2020, lucrul offline cu PWA poate oferi iOS, Android, Windows, Linux, macOS și Chrome OS în browserele Chrome, Safari, Firefox, Edge și Samsung Internet.
O opțiune este să utilizați un cadru open source gata făcut . Ionic și Vue Storefront se remarcă printre ele.
Ionic este un cadru cu o bibliotecă încorporată de elemente standard și extensii plătite. Reprezintă SDK -ul . Include seturi de componente JavaScript și CSS construite pe Angular 2 , Sass și Apache Cordova .
Vue Storefront este un cadru PWA gratuit și open source pentru un magazin online. Scris în Vue.js. Are setări flexibile și adaptabilitate, ceea ce o face o soluție destul de versatilă pentru integrarea cu Pimcore/CoreShop, BigCommerce, PrestaShop, Shopware sau, de exemplu, Magento prin intermediul API-ului .
De asemenea, una dintre soluțiile universale pentru implementarea PWA este cadrul Quasar.
Pe lângă utilizarea unui cadru, puteți integra tehnologia PWA folosind pluginuri. Fiecare CMS are propriul plugin standard. În acest caz, trebuie mai întâi să verificați dacă site-ul îndeplinește cerințele:
Un service worker este un fișier JavaScript care rulează în fundal ca un serviciu independent. Nu este asociat cu DOM sau pagini web, rulează pe un fir diferit și accesează DOM folosind API-ul postMessage.
Din perspectiva utilizatorului, Service Worker vă permite să efectuați acțiuni precum trimiterea de notificări push și preîncărcarea conținutului pentru vizualizare offline.
Application shell este un shell virtual. La fel ca shell-ul unei aplicații native, este încărcat atunci când pornește, iar apoi informațiile dinamice sunt încărcate pe ea din rețea.
Manifestul aplicației web oferă informații despre aplicație într-un fișier text JSON . Este necesar ca aplicația web să fie încărcată și afișată vizual utilizatorului într-un mod similar cu o aplicație nativă.
Poate conține următoarele elemente: background_color, categories, description, dir, display, iarc_rating_id, icons, lang, name, scope, screenshots, serviceworker, short_name, start_url, theme_color, etc. Toți sunt responsabili pentru informațiile pe care utilizatorul le oferă vede de obicei după instalare: nume, culoare de fundal, crearea unei pictograme pe ecranul smartphone-ului etc.
Notificări push este o tehnologie pentru trimiterea notificărilor push .
În plus, PWA necesită ca toate resursele site-ului să fie transferate prin HTTPS .
PWA combină proprietățile unei aplicații native și funcțiile unui browser, ceea ce are avantajele sale:
Tehnologia PWA nu este universală și are o serie de dezavantaje:
Magazinele online folosesc activ PWA.
Peste 60% din vânzările cu amănuntul din comerțul electronic din lume se realizează prin canale online. Până în 2021, se așteaptă ca acest indicator să crească la 73% (conform Statista ).
PWA oferă o oportunitate de a lucra offline cu e-Commerce și de a crește conversia datorită continuității sesiunii.
Cu PWA, utilizatorul poate gestiona notificările push, introduce „Contul meu” cu un singur clic, poate plăti achizițiile cu carduri bancare sau sistemele Apple Pay și Google Pay.
Ușurința de implementare depinde dacă magazinul online folosește o platformă open source. Soluțiile SaaS necesită dezvoltare personalizată PWA de la furnizor.
Una dintre platformele disponibile pentru implementarea PWA este Magento CMS. Tehnologia PWA a devenit larg răspândită nu cu mult timp în urmă, cu toate acestea, a fost deja acumulată experiență în integrarea PWA cu Magento.
De regulă, pentru implementarea accelerată, se utilizează o soluție încorporată - PWA Studio. Cu toate acestea, tehnologia SSR (server-side rendering) nu a fost încă implementată în ea, ceea ce ar permite motorului de căutare să emită o pagină gata făcută la cerere. În acest caz, este posibilă utilizarea Vue Storefront. Pentru un robot de căutare, o pagină de pe Vue Storefront arată la fel ca un site obișnuit - acest lucru este important pentru SEO.
Pentru micro-afaceri, start-up-ul SWEETY a oferit o platformă complet gratuită unde toată lumea își poate crea propriul site PWA SPA . Creat cu React , acest constructor are funcții încorporate pentru crearea unei pagini de destinație și comerț electronic. Proiectul primit în constructor poate fi instalat ulterior pe propria găzduire.
Lanțul Starbucks a dezvoltat un PWA pentru colectarea comenzilor pe lângă aplicația mobilă obișnuită. Cu aproape aceeași interfață, dimensiunea PWA a fost cu 99,84% mai mică, ceea ce l-a făcut mai popular în rândul utilizatorilor. Ca urmare, numărul de comenzi prin internetul mobil s-a dublat și aproape a egalat numărul de comenzi prin intermediul desktopului.[ ce? ] .
Crearea PWA a adus succes și pentru AliExpress. Rata de conversie pentru utilizatorii noi a crescut cu 104%. De asemenea, funcționalitatea PWA i-a ajutat să genereze de două ori mai multe accesări de pagină pe sesiune. Durata sesiunii a crescut cu o medie de 74% în toate browserele (conform developers.google.com ).
PWA-urile sunt, de asemenea, folosite de companii binecunoscute precum Twitter , Nikkei , Lancôme , Forbes și altele.
Printre companiile rusești specializate în dezvoltarea PWA se numără INDIFICA , GetGain , SDBG .
PWA au fost asociate cu mai multe preocupări legate de confidențialitate de-a lungul anilor. Acest lucru a dus la blocarea Apple a mai multor funcții PWA în Safari.
Cu toate acestea, alte browsere, cum ar fi Chrome și Firefox, au continuat să susțină în mod activ dezvoltarea PWA. Mozilla a lansat recent Firefox 85, care a renunțat la suportul pentru o funcție importantă PWA pentru desktop.