Kawałek Kodu

Być na tapecie, to pewnie nie tylko moje marzenie, ale być może i niektórych stron, które stworzyłeś Ty. Fajnie jak coś po co często sięgamy jest pod ręką i nie trzeba wykonywać kilku karkołomnych ruchów, aby dostać się do sedna. Czy strona internetowa choć nie jest natywną aplikacją mobilną może być uruchamiana bezpośrednio z ekranu głównego telefonu lub tabletu, a nie poprzez przeglądarkę?

PWA! Kapewu?

Oprócz natywnych aplikacji mobilnych mamy też aplikacje gdzie podstawą jest strona www, czyli wspomniane PWA - Progressive Web Apps. Właśnie te ostatnie potrafią osiągnąć cel, o którym w dzisiejszym wpisie. Ale nie musimy naszej strony tworzyć od początku, wystarczy ją delikatne przebudować w takim kierunku, aby przypominała kilkoma drobnym cechami webową aplikację progresywną.

Jakie to cechy?

uruchamiana jest po protokole https://,
posiada tzw. manifest (wcale nie taki krzykliwy plik, ale o sprecyzowanej zawartości),
posiada ikony w odpowiednich rozmiarach,
posiada zarejestrowany ServiceWorker z metodą fetch.

Robot(a) czeka.

Pomijam punkt 1, bo jest oczywisty. Zaczniemy od najprostszego, czyli od ServiceWorkera. Kod Workera musi być umieszczony w odrębnym pliku .js w banalnie prostej postaci:

self.addEventListener("fetch", function(event){
});

Skrypt musi istnieć w lokalizacji głównej (w głównym folderze). Nazwa pliku z SW może być dowolna.

Uruchamiając go podajemy nazwę, a kod do jego inicjalizacji wygląda następująco:

window.addEventListener("DOMContentLoaded", function() {
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker
      .register("/service-worker.js")
      .then(function(reg) {})
      .catch(function(err) {});
  }
});

Jeśli przeglądarka potrafi opiekować się SW, to rejestrujemy naszego robola podając nazwę pliku, w której umieściliśmy wcześniejszy kod. Natomiast ten kod umieszczamy już poza kodem SW (albo w skrypcie strony, albo w zewnętrznym pliku).

Odezwa do manifestu.

Manifest w naszym przypadku, to nic innego jak plik ze strukturą JSON. Jego nazwa może być również dowolna, ale zawartość już nie. Należy w niej umieścić następujące pola i wartości:

name, nazwa używana w:
- prompcie z zapytaniem o dodanie do ekranu głównego:
- na ekranie startowym aplikacji:
short_name, nazwa używana w:
- popupie dotyczącym dodawania do ekranu głównego:
- pod ikoną na pulpicie:
- widoku zadań:
- liście zainstalowanych aplikacji:
theme_color, kolor paska w widoku zadań (wyżej) oraz kolor paska powiadomień w trakcie działania aplikacji:
background_color, tło ekranu startowego aplikacji:
display, tryb uruchamiania strony; pomimo kilku wartości, dozwolona jest tylko standalone. Strona uruchamia się jako odrębne zadanie, a przeglądarka nie posiada paska URL,
icons, lista ikon o rozmiarach 48, 96 oraz 144 w formacie PNG (przezroczystość jest dozwolona). W moich testach użyteczna okazała się tylko ikona o rozmiarze 144x144 - jak widzisz została wykorzystana we wszystkich możliwych miejscach,
start_url, adres startowy, który zostanie wywołany przy uruchamianiu strony. Możliwe jest dodanie dowolnego query string, dzięki czemu można np. z pomocą Google Analitycs śledzić otwarcia strony właśnie z ekranu głównego.

Przykładowa struktura, na podstawie której powstały testy do dzisiejszego wpisu:

{
  "short_name": "Test",
  "name": "Aplikacja testowa",
  "theme_color": "#fe7e8e",
  "background_color": "#920113",
  "display": "standalone",
  "icons": [
    {
      "src": "/48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "/96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "/144.png",
      "type": "image/png",
      "sizes": "144x144"
    }
  ],
  "start_url": "/?utm_source=homescreen"
}

Manifest dołączamy do strony poprzez tag:

<link rel="manifest" href="/man.txt">

Plik manifestu w przeciwieństwie do robola może znaleźć się w podkatalogu. Oczywiście należy podać adekwatną ścieżkę.

Po zainstalowaniu naszej aplikacji naszym oczom ukaże się powiadomienie:

Ciekawostki Profesora Ciekawskiego.

Usunięcie ikony z pulpitu nie powoduje wznowienia pokazywania się popupu. Należy aplikację odinstalować.
Po dwóch/trzech rezygnacjach użytkownika z instalacji popup przestaje się pojawiać. Gdzieś obiło mi się o oczy, że po 30 dniach popup znów się ukaże naszym oczom - nie testowałem. Ustawienie flagi: chrome://flags/#bypass-app-banner-engagement-checks na wartość enable, która powinna spowodować pojawianie się popup przy każdym uruchomieniu/odświeżeniu niezainstalowanej strony, nie rozwiązuje problemu. Doszedłem do tego, że wystarczy w przeglądarce wyczyścić dane przeglądania, a dokładnie "Pliki cookie i dane stron" (ustawienie flagi w tym momencie nie ma znaczenia),
Możliwe jest dodanie kilkukrotne strony z różnych przeglądarek. Na pulpicie pojawi się wtedy kilka identycznych ikon, choć w liście aplikacji zobaczymy tylko jedną:

Odinstalowanie aplikacji powoduje usunięcie jednej z ikon, ale druga pozostaje. Możliwe jest uruchamianie strony z pozostałej ikony. Po wyczyszczeniu danych przeglądania, możliwa jest ponowna instalacja strony z przeglądarki, z której pozostała osierocona ikona. W moim przypadku po instalacji z dwóch przeglądarek, usunięciu aplikacji, pozostała jedna ikona, po czym znów mogłem zainstalować stronę z obydwu przeglądarek - w ten sposób na pulpicie pojawiły się trzy ikony,
W pliku manifestu może istnieć tylko name lub tylko short_name. W zależności od tego, która istnieje, tej wartość jest używana w zastępstwie drugiej.

Chciałbym zamanifestować, że wpis powstał na bazie testów pod przeglądarkami Chrome i SRWare Iron oraz systemem Android 6.0.1. Do przeczytania!

Przydatne linki:
Czym jest i jak wygląda plik manifest.