Verkkosovelluksen käytännön opas

Progressive Web App tutuksi

PWA on verkkosovellus, joka voidaan asentaa laitteelle, avata omassa ikkunassaan ja rakentaa toimimaan myös heikolla tai puuttuvalla verkkoyhteydellä. Se on silti pohjimmiltaan verkkosivu: linkitettävä, päivitettävä ja selaimella saavutettava.

Tekijä Simo Sirén

PWA:n perusrakenne

Käyttöliittymä HTML · CSS · JavaScript

Sovelluksen tiedot Web App Manifest

Verkon välissä Service worker · välimuisti

Selain Käyttöjärjestelmä

Perusajatus

Mikä tekee verkkosivusta PWA:n?

PWA ei ole oma ohjelmointikielensä eikä yksittäinen kirjasto. Sillä tarkoitetaan verkkosovellusta, johon lisätään selaimen tarjoamia sovellusmaisia ominaisuuksia. Ominaisuudet otetaan käyttöön asteittain: jos selain ei tue jotakin toimintoa, perussivuston pitää silti toimia.

Progressive viittaa asteittaiseen parantamiseen. Kokemus mukautuu selaimen ja laitteen kykyihin sen sijaan, että sivu vaatisi jokaiselta käyttäjältä täsmälleen saman ympäristön.

Manifesti kuvailee sovelluksen

Nimi, kuvakkeet, aloitusosoite, värit ja avautumistapa kerrotaan selaimelle JSON-muotoisessa manifestitiedostossa.

Service worker hoitaa taustatyötä

Selaimesta erillinen JavaScript-prosessi voi siepata verkkopyyntöjä, käyttää välimuistia ja vastaanottaa esimerkiksi push-viestejä.

HTTPS tekee mallista turvallisen

Service worker saa paljon valtaa verkkopyyntöihin, joten se toimii tuotannossa vain suojatussa HTTPS-yhteydessä. Paikallinen localhost on kehityspoikkeus.

Asennus ei ole pakollinen käyttötapa

Sama sovellus toimii tavallisessa selaimen välilehdessä. Käyttäjä voi asentaa sen, jos selain ja käyttöjärjestelmä tarjoavat asennuksen.

Tausta

Ajatus syntyi ennen nimeä

Asennettavan verkkosovelluksen historia ei ala yhdestä julkaisusta. Se kasvoi vaiheittain selainten, mobiililaitteiden ja avoimien web-standardien kehittyessä.

2007
iPhone ja kotinäytön web-sovellukset
Ensimmäisen iPhonen yhteydessä Apple korosti selaimessa toimivia sovelluksia. Sivustoja pystyi lisäämään kotinäytölle, mutta nykyinen service worker -pohjainen offline-malli puuttui.
2014
Service worker alkoi muuttaa verkkomallia
Selain sai ohjelmoitavan kerroksen sovelluksen ja verkon väliin. Tämä mahdollisti hallitun välimuistin ja verkkoyhteydestä riippumattoman käynnistyksen.
2015
PWA sai nimensä
Suunnittelija Frances Berriman ja Chrome-insinööri Alex Russell nimesivät mallin Progressive Web Appiksi. Ajatus yhdisti webin saavutettavuuden ja linkitettävyyden asennettavan sovelluksen kokemukseen.
2018
Tuki levisi suuriin selainmoottoreihin
Service worker -tuki oli saatavilla Chromessa, Firefoxissa, Edgessä ja Safarissa. Toteutusten yksityiskohdissa oli silti eroja.
2023
iOS:n kotinäyttösovellukset saivat Web Pushin
iOS ja iPadOS 16.4 toivat standardiin perustuvat push-ilmoitukset kotinäytölle lisättyihin web-sovelluksiin sekä tuen kolmansien osapuolten selainten Lisää kotinäytölle -toiminnolle.
Nyt
PWA on käytännön vaihtoehto, ei yleisratkaisu
Asennus, offline-käyttö ja monet laiterajapinnat toimivat laajasti. Ominaisuuksien saatavuus riippuu kuitenkin edelleen selaimesta, käyttöjärjestelmästä ja sovelluksen asennustavasta.

Toiminta käytössä

PWA:n elinkaari kahdella tasolla

Käyttäjä näkee sivun, mahdollisen asennuksen ja päivitykset. Taustalla service worker käy läpi oman tarkasti määritellyn elinkaarensa.

Käyttäjän näkökulma

1
LöytäminenLinkki, haku tai jaettu osoite
2
Ensimmäinen käyttöSivu toimii heti selaimessa
3
AsennusSelain tai käyttöjärjestelmä tarjoaa asennuksen
4
PalaaminenKuvake avaa sovelluksen omaan ikkunaan
5
PäivitysUusi versio latautuu verkkoversion mukana

Service workerin näkökulma

1
RekisteröintiSivu pyytää selainta lataamaan workerin
2
InstallTarvittavat perustiedostot tallennetaan välimuistiin
3
ActivateVanhat välimuistit voidaan poistaa
4
FetchWorker päättää verkon ja välimuistin käytöstä
5
UpdateSelain havaitsee muuttuneen worker-tiedoston

Mihin se sopii?

Mahdollisuuksia, joilla on käytännön arvoa

Yksi julkaisu, monta laitetta

Sama verkkoversio palvelee puhelinta, tablettia ja työpöytää. Päivitys julkaistaan palvelimelle, eikä jokaista pientä korjausta tarvitse kierrättää sovelluskaupan tarkastuksen kautta.

Toiminta katkonaisessa verkossa

Välimuistiin voidaan tallentaa käyttöliittymä, aiemmin avattu sisältö tai kokonainen paikallinen työskentelytila. Verkon palattua muutokset voidaan synkronoida palvelimelle.

Asennettava käyttökokemus

Kuvake, erillinen ikkuna ja käyttöjärjestelmän sovellusluettelo tekevät usein käytetystä palvelusta helpommin saavutettavan ilman natiivisovelluksen pakollisuutta.

Webin jakelutapa säilyy

Sovellukseen voi tulla linkillä, eikä kokeileminen vaadi ensin kauppaa, latausta ja tilaa vievää asennuspakettia. Hakukoneet voivat indeksoida julkista sisältöä.

Laitteen ominaisuuksia harkiten

Selaimen tuesta riippuen sovellus voi käyttää ilmoituksia, kameraa, sijaintia, jakamista, leikepöytää ja tiedostoja. Oikeudet pyydetään silloin, kun käyttäjä ymmärtää niiden tarpeen.

Sopivia kohteita

Varaus- ja asiointipalvelut, uutis- ja sisältösovellukset, kenttätyön lomakkeet, tapahtumaoppaat sekä kevyet tuottavuustyökalut hyötyvät usein PWA-mallista.

Reunaehdot

Missä PWA ei korvaa natiivisovellusta?

Tekninen mahdollisuus ei vielä tarkoita, että ominaisuus toimii samalla tavalla kaikkialla. Selain on sekä PWA:n vahvuus että sen raja.

Rajapintojen tuki vaihtelee

Kaikki laiteominaisuudet eivät ole saatavilla kaikissa selaimissa. Esimerkiksi taustatoiminnot, tiedostojen käsittely ja Bluetooth-yhteydet voivat toimia eri tavoin tai puuttua kokonaan.

Asentaminen ei ole yhdenmukaista

Asennuspainikkeen paikka ja ehdot riippuvat selaimesta. iPhonessa käyttäjä lisää sovelluksen yleensä jakovalikon kautta kotinäytölle; työpöytäselainten tuki vaihtelee.

Offline vaatii tietoisen suunnitelman

Välimuisti ei itsestään ratkaise kirjautumista, muuttuvan tiedon ajantasaisuutta tai ristiriitoja. Vanhentunut tieto voi olla pahempi kuin selkeä ilmoitus verkkoyhteyden tarpeesta.

Raskas laiteintegraatio suosii usein natiivia

Jatkuva taustaseuranta, tiukka Bluetooth- tai anturiyhteys, vaativa grafiikka ja syvä käyttöjärjestelmäintegraatio voivat olla luotettavampia natiivisovelluksessa.

Sovelluskauppanäkyvyys ei tule automaattisesti

Verkosta asennettava PWA ei automaattisesti näy sovelluskaupoissa. Kauppajulkaisu on mahdollinen joillakin alustoilla, mutta sillä on omat paketointi- ja hyväksymisvaatimuksensa.

Yksinkertainen valintaperuste

Valitse PWA, kun linkillä saavutettava ja usealla laitteella toimiva palvelu on tärkeämpi kuin täydellinen pääsy yhden käyttöjärjestelmän kaikkiin ominaisuuksiin. Valitse natiivi, kun laitteen syvä integraatio on tuotteen ydin. Moni palvelu käyttää myös molempia.

Rakennusohje

Näin teet verkkosivusta PWA:n

Alla on pienin järkevä toteutus ilman sovelluskehystä. Tiedostot voi liittää myös React-, Vue- tai muuhun verkkosovellukseen samalla periaatteella.

1
Varmista toimiva perussivu ja HTTPS
Tee ensin responsiivinen ja saavutettava verkkosovellus. PWA-ominaisuudet parantavat sitä; ne eivät korjaa huonoa peruskokemusta.

Lisää web app manifest

Tallenna esimerkiksi manifest.json ja viittaa siihen jokaisen sivun <head>-osassa.

manifest.json

{
  "name": "Oma sovellus",
  "short_name": "Sovellus",
  "start_url": "./",
  "scope": "./",
  "display": "standalone",
  "theme_color": "#17324d",
  "background_color": "#f4f0e8",
  "icons": [
    { "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Kirjoita service worker

Esimerkki tallentaa sovelluksen rungon asennusvaiheessa ja käyttää verkkopyynnöissä ensin verkkoa, sitten välimuistia.

sw.js

const CACHE = "oma-sovellus-v1";
const FILES = ["./", "./styles.css", "./app.js"];

self.addEventListener("install", event => {
  event.waitUntil(caches.open(CACHE).then(cache => cache.addAll(FILES)));
});

self.addEventListener("fetch", event => {
  event.respondWith(
    fetch(event.request).catch(() => caches.match(event.request))
  );
});

4
Rekisteröi worker selaimessa
Rekisteröinti tehdään sivun JavaScriptissä. Tuen tarkistus estää virheen vanhemmissa selaimissa.
app.js
```
if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker.register("./sw.js");
  });
}
```
5
Suunnittele välimuististrategia sisällön mukaan
Käyttöliittymän staattiset tiedostot voi hakea välimuistista ensin. Ajantasainen data kannattaa hakea verkosta ensin tai päivittää taustalla. Älä tallenna arkaluonteista käyttäjätietoa välimuistiin ilman harkintaa.
6
Testaa asennus, päivitys ja verkkokatko
Aja sivu localhostissa tai HTTPS-palvelimella. Tarkista selaimen kehittäjätyökaluista manifesti ja service worker, kokeile Offline-tilaa ja testaa oikealla puhelimella.

Ennen julkaisua

Tarkistuslista

Perussivu toimii ilman PWA-ominaisuuksia Sivusto tarjotaan HTTPS-yhteydellä Manifestissa on nimi, aloitusosoite, näyttötila ja 192/512 px kuvakkeet Service workerin laajuus eli scope on tarkoituksenmukainen Offline-tilassa näkyy hyödyllinen näkymä, ei selaimen virhesivu Välimuistin versiointi ja vanhojen välimuistien poisto on suunniteltu Asennus on testattu vähintään Androidilla, iOS:llä ja työpöytäselaimella Näppäimistö, ruudunlukija, zoomaus ja eri näyttökoot on huomioitu

Valinnat tallentuvat tälle laitteelle.

Lähteet ja jatkolukeminen

Selaintuki muuttuu ajan myötä. Tarkista tuotantoon vietävien ominaisuuksien ajantasainen yhteensopivuus ennen toteutusta.