Anna käyttäjille nopea ja saumaton pääsy sivustollesi mobiililaitteista, vaikka he olisivat offline-tilassa. 

Progressive Web Apps (PWA) on toiminto, joka yhdistää perinteiset sivustot ja mobiilisovellukset. Lisäämällä sivuston mobiililaitteen aloitusnäyttöön kävijät voivat selata sivustoa offline-tilassa, ilman että selaimen käyttöliittymä (osoitepalkki) näkyy, tarjoten koko näytön mobiilisovellusta muistuttavan kokemuksen.

Kävijöiden ei tarvitse asentaa tai ladata mitään heidän mobiililaitteelle käyttääkseen tätä toimintoa. 
 

  PWA:n tekniset ja toiminnolliset rajoitukset

PWA-toiminnossa on lukuisia rajoituksia, joista sinun tulee olla tietoinen ennen sen määrittämistä. Saat lisätietoja osuudesta Muutama asia, joista sinun tulee olla tietoinen käyttäessäsi PWA:ta, joka on tämän artikkelin lopussa, ja ota myös huomioon tässä artikkelissa kerrotuista käyttöjärjestelmä kohtaisista rajoituksista.

 

PWA:n määrittäminen editorista

Määritä PWA editorista painamalla käyttöliittymän oikeassa yläkulmassa olevaa kolmea pistettä ja valitse Asetukset.

Screen_Shot_2018-10-10_at_12.47.28.png

Valitse Progressive Web App (PWA) vasemmalla olevasta valikosta.

Screen_Shot_2019-08-29_at_12.46.17_2.png


PWA:n suurin etu on, että kävijät voivat selata sivustoasi, vaikka heillä ei ole internet-yhteyttä. Jos merkitset kohdan Ota käyttöön sivuston tallennus välimuistiin offline-tilaa varten, sivustosi sisältö tallennetaan paikallisesti kävijän mobiililaitteen muistiin, jolloin he voivat selata sivustoasi offline-tilassa. 

Merkitsemällä kohdan Ota "Lisää aloitusnäyttöön"-vahvistus käyttöön kävijöille kävijöitä pyydetään lisäämään sivustosi heidän aloitusnäyttöön, heidän selatessa sitä mobiililaitteelta. Mobiililaitteeseen ilmestyy palkki, heidän selatessa sivustollasi, ja heitä pyydetään lisäämään se aloitusnäyttöön. Huomaa, että tätä toimintoa ei tueta iOS-laitteille tällä hetkellä.

1534838283607-Browser-banner.png

Jos kävijä vahvistaa valinnan, heidän laitteen aloitusnäyttöön lisätään kirjanmerkki muiden sovellusten lailla. 

Jos et merkitse kyseistä kohtaa, kävijöitä ei pyydetä lisäämään kirjanmerkkiä heidän selatessaan sivustollasi, mutta he voivat silti lisätä sivuston heidän aloitusnäyttöön lisäämällä kirjanmerkin manuaalisesti laitteen selaimen kautta.   

1534840707322-Screen_Shot_2018-08-21_at_10.37.41.png

 

Käynnistyskuvan mukautus

Käynnistyskuva on graafinen elementti, joka näkyy kävijän painaessa sovellusta ja poistuu näkyvistä sovelluksen latauksen ollessa valmis. Käynnistyskuvia ei tueta iOS-laitteille tällä hetkellä. Voit mukauttaa "latausnäytön" ulkoasua lisäämällä nimen (enintään 60 merkkiä välilyöntien kanssa), lisäämällä logon .png-tiedostomuodossa (vähintään 512x512 pikseliä) ja valitsemalla taustavärin. Nimi näkyy logon alla valkoisena tekstinä.

1534838175820-splash-screen.png


Sovelluksen otsikon mukautus aloitusnäytössä

Voit määrittää sivustosi otsikon ja näin määrittää, miltä se näyttää, kun se on lisätty sovelluksena käyttäjän aloitusnäyttöön. Huomaa, että otsikko voi olla enintään 12 merkkiä pitkä välilyöntien kanssa. Aloitusnäytössä näkyvä logo on sama kuin käynnistyskuva. 

1534840421470-home-screen-icon.png

 

Muutama asia, jotka on hyvä tietää käytettäessä PWA:ta

Ota huomioon seuraavat asiat määrittäessäsi PWA:ta: 

  • Sivustoosi täytyy olla lisättynä SSL-varmenne (HTTPS), jotta PWA toimii.
  • Kaikki mobiilikäyttöjärjestelmät ja selaimet eivät tue kaikkia PWA-toimintoja. Tarkista yhteensopivuus käyttöjärjestelmästä tai selaimen teknisestä dokumentaatiosta. 
  • Vain selatessa vieraillut sivuston sivut tallennetaan välimuistiin ja ovat saatavilla selatessa offline-tilassa. Jos sivusto sisältää esimerkiksi sivut Koti, Tietoja ja Ota yhteyttä, ja olet käynyt online-tilassa vain kotisivulla, Tietoja ja Ota yhteyttä sivuja ei ole tallennettu välimuistiin ja niitä ei voida selata offline-tilassa PWA:lla. Tämän sijaan mobiililaite avaa kyseiset sivut selaimessa ja käsittelee niitä tavallisina sivuina.
  • Chrome-selainta käyttävät Android-laitteet näyttävät käynnistyskuvan vain, jos on vähintään 512x512 pikseliä suuri ja lisätty .png-tiedostomuodossa.
  • PWA:n tämän hetkinen versio ei tue push-ilmoituksia käyttäjille. 
  • PWA ei toimi salasanasuojatuille sivuille.
Oliko tämä artikkeli hyödyllinen?
0/0 koki tästä olevan apua