Angular-sovelluksen muuntaminen PWA-sovellukseksi ja julkaisu Firebasessa

1. Varmista että Angular-projektisi versio on mahdollisimman sama kuin @angular/pwa-paketin versio. Esim. versionumero 19.1.X molemmissa toimii, mutta 19.0.X ja 19.1.X eivät välttämättä sovi yhteen. Uusimman @angular/pwa -paketin asennus toimii varmasti, jos olet tehnyt projektisi uusimmalla Angularin versiolla. Vanhalle Angularin versiolle (esim. v18), on ladattava versiota vastaava pwa-paketti, esim. @angular/pwa@18.2.14

2. Anna Angular-projektisi kansiossa komento ng add @angular/pwa (perässä voi olla vanhan version numero, esim. @18.2.14). Projektiin lisätään muutamia tiedostoja ja täydennetään muutamia tiedostoja, minkä ansiosta sovellukseen tulee käyttöön PWA-tuki ja Service Worker. Huomaa että automaattisesti syntyvä PWA-tuki on toimiva, mutta se ei ole aivan täydellinen. Index.html:stä puuttuvat Applen meta-tagit ja ikonilinkki sekä ngsw-config.json-tiedostosta puuttuu dynaaminen cache. Nämä voit tarvittaessa lisätä. Jos sovellukseesi tulee dataa ulkoisista lähteistä, kuten web-API:sta, täydennä ngsw-config.json-tiedostoa tämän ohjeen mukaan lisäämällä sinne datagroups-määritys, jolloin syntyy dynaaminen cache web-API:sta tulevalle datalle.

3. Rakenna (buildaa) sovelluksesi julkaisumuotoon komennolla ng build . Buildattu sovellus syntyy kansioon dist/projektinnimi/browser.

4. Voit testata sovellusta omalla koneellasi ajamalla sitä http-server -testipalvelimella. Localhost-alkuisesta osoitteesta service worker toimii ilman HTTPS-yhteyttä.

5. Kun haluat laittaa sovelluksesi julkisesti ladattavaksi, siirrä buildattu sovelluksesi oikealle palvelimelle:

-Ohje sovelluksen Firebaseen siirtämiseksi

HUOM! Muista ajaa Firebase CLI:n komennot Angular-sovelluksesi kansiossa, esim. ang-pwakoe -kansiossa. Kun loggaudut Firebaseen, käytä komentoa firebase login --reauth, sillä jos olet valmiiksi loggautuneena, ei käyttöoikeuksia välttämättä tunnisteta. Kun kysytään mikä on public directory, valitaan se kansio missä on buildattu index.html, eli dist/projektinnimi/browser , eli tässä tapauksessa dist/ang-pwakoe/browser. Kun kysytään konfiguroidaanko sovellus SPA-sovellukseksi, vastaa Yes. Kun lopuksi kysytään, ylikirjoitetaanko sovelluksen olemassa oleva index.html uudella index.html.llä, vastaa No.