Progressive Web Apps: mobilių aplikacijų ateitis?

Interneto evoliucija: nuo statinių puslapių iki progresyvių aplikacijų

Prisiminkime laikus, kai internetas buvo tiesiog statinių HTML puslapių rinkinys. Tuomet atsirado dinaminės svetainės, vėliau – mobiliesiems įrenginiams pritaikytos versijos, o galiausiai – visiškos aplikacijos. Tačiau šiandien vis dažniau girdime terminą „Progressive Web Apps” (PWA) – progresyvios interneto aplikacijos, kurios žada panaikinti ribą tarp įprastų svetainių ir vietinių (native) mobiliųjų programėlių.

Progresyvios interneto aplikacijos nėra nauja technologija, greičiau – metodologijų, principų ir technologijų rinkinys, leidžiantis sukurti patirtį, kuri jungia geriausias interneto svetainių ir mobiliųjų aplikacijų savybes. PWA veikia naršyklėje, tačiau vartotojui gali atrodyti ir elgtis kaip įprasta programėlė: jos gali būti įdiegtos į įrenginį, veikti be interneto ryšio, siųsti pranešimus ir naudoti įrenginio funkcijas.

Kodėl tai svarbu? Pagalvokime apie tipinį scenarijų: vartotojas atranda naują paslaugą, apsilanko svetainėje, bet kad galėtų patogiai ja naudotis mobiliajame įrenginyje, turi atsisiųsti ir įdiegti programėlę. Šis papildomas žingsnis tampa kliūtimi – tyrimai rodo, kad virš 50% vartotojų atsisako įdiegti programėlę, kai jiems pasiūloma tai padaryti. PWA sprendžia šią problemą, nes vartotojas gali tiesiog pridėti svetainę prie savo pradžios ekrano be jokių papildomų veiksmų programėlių parduotuvėje.

Pagrindiniai PWA privalumai verslui ir vartotojams

Progresyvios interneto aplikacijos siūlo nemažai privalumų, dėl kurių jos tampa vis patrauklesnės tiek verslams, tiek vartotojams:

Mažesnės kūrimo išlaidos – nebereikia kurti atskirų aplikacijų iOS ir Android platformoms, užtenka vieno kodo, kuris veikia visur.
Greitas įdiegimas – vartotojui nereikia eiti į App Store ar Google Play, laukti atsisiuntimo ir įdiegimo.
Automatiniai atnaujinimai – atnaujinimai vyksta automatiškai, kai vartotojas apsilanko svetainėje, nereikia jokių papildomų veiksmų.
Mažesnis duomenų naudojimas – PWA paprastai užima mažiau vietos įrenginyje nei vietinės programėlės.
Veikimas be interneto – dėl „service worker” technologijos PWA gali veikti ir be interneto ryšio.
Geresnis pasiekiamumas – PWA gali būti indeksuojamos paieškos sistemose, todėl vartotojai jas lengviau atranda.

Įdomu tai, kad didžiosios kompanijos jau seniai pastebėjo PWA potencialą. Twitter sukūrė Twitter Lite – PWA versiją, kuri užima vos 1-3% vietinės programėlės dydžio, bet išlaiko visas pagrindines funkcijas. Pinterest įdiegė PWA ir pastebėjo 60% padidėjusį vartotojų įsitraukimą. Starbucks PWA leidžia klientams peržiūrėti meniu ir užsakyti gėrimus net be interneto ryšio, o tai padidino mobiliųjų užsakymų skaičių beveik dvigubai.

Technologiniai PWA pagrindai: kaip tai veikia?

Progresyvios interneto aplikacijos remiasi trimis pagrindinėmis technologijomis:

Service Workers – JavaScript kodas, veikiantis atskirame gije nuo pagrindinio naršyklės proceso, leidžiantis valdyti tinklo užklausas, kaupti duomenis ir valdyti pranešimus.
Web App Manifest – JSON failas, aprašantis aplikacijos metaduomenis: pavadinimą, ikonas, spalvas, orientaciją ir kitas savybes, kurios padeda naršyklei pateikti aplikaciją kaip vietinę programėlę.
HTTPS – saugus ryšys yra būtinas PWA veikimui, nes service workers gali veikti tik per saugų ryšį.

Praktiškai tai reiškia, kad programuotojas sukuria įprastą interneto aplikaciją, prideda service worker skriptą, kuris tvarko duomenų saugojimą ir sinchronizavimą, sukuria manifest failą su aplikacijos aprašymu, ir įdiegia HTTPS. Šių komponentų dėka naršyklė gali pasiūlyti vartotojui įdiegti svetainę į įrenginį kaip programėlę.

Štai paprastas service worker pavyzdys, kuris kaupia pagrindinius aplikacijos failus:

// service-worker.js
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('app-v1').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js',
        '/images/logo.png'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

O štai kaip atrodo tipinis Web App Manifest:

{
  "name": "Mano PWA Aplikacija",
  "short_name": "PWA App",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2196F3"
}

PWA ir vietinės programėlės: palyginimas

Nors PWA turi daug privalumų, jos vis dar negali visko, ką gali vietinės programėlės. Štai palyginimas, kuris padės suprasti, kada verta rinktis PWA, o kada – vietinę programėlę:

Aspektas	PWA	Vietinė programėlė
Kūrimo kaina	Mažesnė (vienas kodas visoms platformoms)	Didesnė (atskiras kodas iOS ir Android)
Įdiegimo procesas	Greitas, be programėlių parduotuvės	Reikia atsisiųsti iš programėlių parduotuvės
Prieiga prie įrenginio funkcijų	Ribota, bet nuolat plečiama	Pilna prieiga
Veikimas be interneto	Galimas, bet su apribojimais	Pilnas funkcionalumas
Atnaujinimai	Automatiniai	Reikia vartotojo patvirtinimo
Paieškos sistemų optimizacija	Taip	Ne

Realybėje pasirinkimas tarp PWA ir vietinės programėlės priklauso nuo projekto specifikos. Jei jūsų aplikacija reikalauja gilios integracijos su įrenginio funkcijomis (pvz., sudėtingos žaidimų grafikos, išplėstinės realybės), vietinė programėlė gali būti geresnis pasirinkimas. Tačiau jei norite greitai pasiekti platesnę auditoriją su mažesnėmis investicijomis, PWA gali būti puikus sprendimas.

Kaip pradėti kurti PWA: praktinis vadovas

Jei nusprendėte išbandyti PWA kūrimą, štai keletas žingsnių, nuo kurių verta pradėti:

Įsitikinkite, kad jūsų svetainė veikia per HTTPS – tai būtina sąlyga PWA veikimui. Daugelis hostingo paslaugų teikėjų dabar siūlo nemokamus SSL sertifikatus.
Sukurkite Web App Manifest – tai JSON failas, kuris aprašo jūsų aplikaciją. Jį reikia įtraukti į HTML head sekciją:

<link rel="manifest" href="/manifest.json">

Pridėkite Service Worker – tai JavaScript failas, kuris tvarko duomenų kaupimą ir sinchronizavimą. Jį reikia užregistruoti jūsų aplikacijos kode:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('Service Worker užregistruotas sėkmingai');
    }).catch(function(error) {
      console.log('Service Worker registracija nepavyko: ', error);
    });
  });
}

Optimizuokite aplikaciją greitam veikimui – PWA turėtų užsikrauti greitai net lėtame ryšyje. Naudokite įrankius kaip Google Lighthouse, kad įvertintumėte savo aplikacijos greitį ir gautumėte rekomendacijas.
Testuokite skirtingose naršyklėse ir įrenginiuose – įsitikinkite, kad jūsų PWA gerai veikia visuose tikslinių vartotojų įrenginiuose.

Naudingi įrankiai PWA kūrėjams:

Lighthouse – Chrome įrankis, kuris analizuoja svetainę ir pateikia rekomendacijas, kaip ją pagerinti, įskaitant PWA aspektus.
Workbox – Google biblioteka, kuri supaprastina service workers kūrimą.
PWA Builder – Microsoft įrankis, padedantis konvertuoti esamas svetaines į PWA.

PWA Lietuvoje: tendencijos ir galimybės

Nors pasaulyje PWA jau tapo įprasta praktika, Lietuvoje ši technologija dar tik pradeda įsitvirtinti. Tačiau matome, kad vis daugiau lietuviškų verslų domisi šiuo sprendimu, ypač el. komercijos ir paslaugų sektoriuose.

Lietuvos rinkoje PWA gali būti ypač naudinga mažoms ir vidutinėms įmonėms, kurios nori turėti mobilią aplikaciją, bet neturi resursų kurti ir palaikyti atskiras iOS ir Android versijas. Taip pat PWA gali būti puikus sprendimas startuoliams, norintiems greitai patikrinti savo idėją rinkoje su minimaliomis investicijomis.

Įdomu tai, kad Lietuvos vartotojai, kaip rodo tyrimai, vis dažniau naudojasi mobiliaisiais įrenginiais naršymui internete – net 70% interneto srauto ateina iš mobiliųjų įrenginių. Tačiau tik nedidelė dalis vartotojų linkusi atsisiųsti naujas programėles – vidutinis lietuvis per mėnesį atsisiunčia mažiau nei vieną naują programėlę. Tai rodo, kad PWA gali būti puikus būdas pasiekti lietuvių auditoriją, apeinant programėlių parduotuvių barjerą.

Keletas sėkmingų PWA pavyzdžių Lietuvoje jau yra – nuo naujienų portalų iki maisto pristatymo paslaugų. Šios kompanijos praneša apie padidėjusį vartotojų įsitraukimą ir konversijas po PWA įdiegimo.

Žvilgsnis į ateitį: ar PWA pakeis vietines programėles?

Technologijų pasaulyje dažnai kalbama apie „X pakeis Y” scenarijus, tačiau realybė paprastai būna niuansuotesnė. Taip ir su PWA – jos greičiausiai nepakeis visiškai vietinių programėlių, bet užims svarbią nišą mobiliųjų sprendimų ekosistemoje.

Galime prognozuoti, kad ateityje matysime tokias tendencijas:

PWA taps standartiniu pasirinkimu daugeliui verslų, ypač tiems, kuriems nereikia gilios integracijos su įrenginio funkcijomis.
Naršyklių palaikymas PWA funkcijoms toliau gerės, mažindamas atotrūkį tarp PWA ir vietinių programėlių.
Hibridiniai sprendimai, kaip PWA, pakuojamos į vietines programėles, taps populiaresni.
Programėlių parduotuvės (App Store, Google Play) pradės labiau integruotis su PWA ekosistema.

Jau dabar matome, kad Google aktyviai skatina PWA plėtrą, o Microsoft leidžia publikuoti PWA savo Microsoft Store. Apple kol kas yra labiau konservatyvi šiuo klausimu, tačiau ir iOS naršyklėje Safari PWA palaikymas nuolat gerėja.

Skaitmeninės transformacijos katalizatorius

Progresyvios interneto aplikacijos nėra tiesiog dar viena technologinė naujovė – jos keičia patį būdą, kaip galvojame apie mobilias patirtis. Jos suteikia galimybę verslams pasiekti vartotojus ten, kur jie yra, be papildomų barjerų, kuriuos sukuria programėlių parduotuvės ir diegimo procesai.

Galbūt svarbiausia PWA vertė – jų demokratizuojantis poveikis. Mažos įmonės dabar gali konkuruoti su didžiaisiais rinkos žaidėjais mobiliosios patirties srityje, nes PWA kūrimas reikalauja mažiau resursų ir techninės patirties nei pilnavertės vietinės programėlės kūrimas.

Jei dar nesate išbandę PWA savo verslui, dabar puikus metas tai padaryti. Pradėkite nuo nedidelio projekto, įvertinkite rezultatus ir plėskite sėkmės atveju. Nepamirškite, kad technologija yra tik įrankis – svarbiausia išlieka vertė, kurią teikiate savo vartotojams. PWA gali padėti šią vertę pristatyti sklandžiau, greičiau ir plačiau.

Taigi, ar PWA yra mobilių aplikacijų ateitis? Galbūt ne vienintelė ateitis, bet neabejotinai svarbi jos dalis. Ir jei norite, kad jūsų verslas būtų pasiruošęs šiai ateičiai, laikas pradėti domėtis PWA jau šiandien.