Kako omogućiti dodavanje internetske aplikacije na početni zaslon

„Dodaj na početni zaslon“ (engl. Add to Home screen) je opcija u modernim preglednicima koji su dostupni i na mobilnim uređajima i na klasičnim računalima. Opcija omogućava dodavanje prečice podržane stranice/aplikacije na početni zaslon. Ova opcija pripada kategoriji progresivnog razvoja internetskih aplikacija. Cilj je na što jednostavniji način omogućiti pristup aplikaciji (pristup jednim klikom) i omogućiti da se aplikacija koristi svojim zasebnim prozorom (sigurnost).

PODRŠKA

„Dodaj na početni zaslon“ omogućeno je u Mobile Chrome/Android Webview od verzije 31, Opera za Android od verzije 32 i Firefox za Android od verzije 58.

Od desktop verzija internetskih preglednika ovu opciju jedino podržavaju Edge i Chrome.

Detaljniji prikaz podržanih internetskih preglednika moguće je vidjeti na:

https://caniuse.com/#search=web%20app%20manifest

ŠTO JE SVE POTREBNO?

Potrebno je osigurati uspješno dohvaćanje svih .js/.css/.png i sličnih datoteka, ne smije se dogoditi error 404.
Sve datoteke koje se dohvaćaju s vanjskih izvora (http/https) trebalo bi postaviti na vlastiti server i omogućiti isporuku s nekim životnim ciklusom (cache until).
Potrebno je popuniti manifest.json, u njemu je potrebno upisati nazive slika (slike moraju biti strogo specificiranih dimenzija i strogo specificiranog formata, ne moraju biti iste, npr.: slika 24 x 24 koristi se unutar alatne trake preglednika, a ona najveća koristi se za pokretanje standalone aplikacije kroz sučelje chrome/apps).
Svim datotekama treba dodati oznaku verzije, npr.: .png?v1 ili .js?123242#$7dsfds (daje do znanja pregledniku da smije spremiti u cache memoriju).
Unutar datoteka serviceWorker.js i manifest.json postoji scope, to je područje na kojem će worker djelovati, ako napravite domenu, npr.: https://127.0.0.1:8888/test/login.html, onda se i scope mora postaviti na /test/ (najbolja praksa je da se serviceWorker.js i manifest.json nalaze u root mapi na serveru).
Kada smo izradili datoteku manifest.json, potrebno ju je uključiti u <html><head> s pomoću: <link rel="manifest" href="/manifest.json">, a serviceWorker.js dodati kao prvu skriptu na popis.

MANIFEST

Primjer datoteke manifest.json:

{
    "name": "Dodaj aplikaciju na početni zaslon",
    "short_name": "DANPZ",
    "start_url": "/test/index.php",
    "display": "fullscreen",
    "orientation": "any",
    "background_color": "#fafafa",
    "theme_color": "#fafafa",
    "description": "Dugi opis aplikacije",
    "dir": "rtl",
    "lang": "en",
    "icons": [{
        "src": "img/imagetest_24dp.png",
        "sizes": "24x24",
        "type": "image/png"
    }, {
        "src": "img/imagetest_48dp.png",
        "sizes": "48x48",
        "type": "image/png"
    }, {
        "src": "img/imagetest_72dp.png",
        "sizes": "72x72",
        "type": "image/png"
    }, {
        "src": "img/imagetest_96dp.png",
        "sizes": "96x96",
        "type": "image/png"
    }, {
        "src": "img/test_logo_3.png",
        "sizes": "144x144",
        "type": "image/png"
    }, {
        "src": "img/imagetest_168dp.png",
        "sizes": "168x168",
        "type": "image/png"
    }, {
        "src": "img/imagetest_192dp.png",
        "sizes": "192x192",
        "type": "image/png"
    }, {
        "src": "img/test_3.png",
        "sizes": "344x356",
        "type": "image/png"
    }],
    "prefer_related_applications": false,
    "scope": "/",
    "fullscreen": true
}

SERVICE WORKER

Service worker je skripta koju internetski preglednik pokreće u pozadini, odvojeno od trenutačno otvorene internetske stranice/aplikacije. Pogodna je za stvari kojima ne treba sučelje ili interakcija od strane korisnika. Skripta nema pristup DOM-u, ali može komunicirati s ostalim skriptama koje upravljaju DOM-om. Kada skripta obavi zadatak, automatski se gasi, a ako je ponovo potrebna, preglednik vrši restart.

Detaljan prikaz internetskih preglednika koji podržavaju ovu vrstu skripta moguće je pogledati na:

https://jakearchibald.github.io/isserviceworkerready/

Vrlo jednostavan serviceWorker.js koji provjerava vezu sa serverom, ako veza ne postoji, tj. nije moguće dohvatiti .html/.css/.js/.png datoteke, umjesto klasične greške prikazuje se stranica offline.html (nalazi se unutar root mape) koju možemo dizajnirati po vlastitom izboru.

Više informacija o serviceWorker.js moguće je pogledati na github service worker

PODRŠKA ZA ZASTARJELE PREGLEDNIKE

Unutar <html><head> uključiti:

Safari

Internet Explorer

(dodati i ostale rezolucije slika po potrebi)

Kategorija

Programiranje

Web aplikacije

Frontend