menu

Krylan | Krzysztof Koperkiewicz

Blog

Ilustracja posta 22

#18 Manifest.json – tworzymy web aplikację

2017-05-24 / DSP2017 / Komentarze (4) / Wyświetleń: 588

Gra "Qwins!" jest już na finiszu. Udało się! To jednak jeszcze nie koniec, ponieważ zostało parę rzeczy do zrobienia. Jedną z nich, którą już zrobiłem, było wykonanie pliku manifest.json, dzięki któremu można "utworzyć" aplikację na swoim telefonie.

Zrobienie takiego pliku jest bardzo proste – jest tylko kilka regułek/opcji, których możemy użyć, aby stworzyć naszą webową aplikację. Aby ułatwić ten proces, możemy też użyć internetowych narzędzi, które wygenerują nam ten plik, razem z ikonami aplikacji (link do takiego narzędzia znajdziecie na końcu posta). Tak wygląda przykładowy plik manifest.json:

{
  "name": "Qwins!",
  "short_name": "Qwins!",
  "theme_color": "#03a9f4",
  "background_color": "#03a9f4",
  "display": "fullscreen",
  "orientation": "portrait",
  "scope": "/qwins/",
  "start_url": "index.php",
  "icons": [
    {
      "src": "img/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}


Pierwsze wartości są bardzo oczywiste i czytelne – podajemy nazwy aplikacji (zwykłą oraz skróconą) oraz kolory (do "theme_color" dostosuje się pasek stanu w telefonie). W przypadku opcji "display" możemy określić, w jaki sposób nasza aplikacja ma się uruchamiać. W moim przypadku dałem "fullscreen", ponieważ chcę, aby aplikacja była pełnoekranowa, bez paska adresu z przeglądarki czy także paska stanu – aplikacja będzie wyglądać tak, jak natywna. Za pomocą "orientation" możemy wymusić działanie aplikacji tylko w jednej pozycji telefonu. W "Qwins!" nie da się grać przy poziomym ekranie, dlatego ja wymuszam pozycję pionową ("portrait"). Następnie mamy scope oraz start url, które określają nam, gdzie znajduje się "źródło" aplikacji i na którym pliku ma ją rozpoczynać. Na sam koniec spora tabela z ikonami w różnych rozmiarach. Aby się nie męczyć z ich eksportem, możemy użyć narzędzia, które automatycznie zrobi to za nas.

A skoro już o narzędziu mowa, to miałem podać link:
https://app-manifest.firebaseapp.com/

Jeszcze ostatnia rzecz, o której musimy pamiętać – powiedzieć przeglądarkom naszych użytkowników, że taki plik się znajduje na naszej stronie. W tym celu w znaczniku head umieszczamy:

<link rel="manifest" href="manifest.json" />


I to wszystko! Teraz, gdy nasi użytkownicy klikną "Dodaj do ekranu głównego", będą mogli umieścić skrót do strony, który będzie zachowywał się podobnie do natywnej aplikacji.


Poprzedni post
#17 Inne projekty – Steam Library Filter Tool
Następny post
#19 Podsumowanie projektu

Komentarze

Guy Diamond
2017-05-29 16:11:08

No to teraz jak ci muszę podziękować za tą stronę. Nie sądziłem, że mogę tak łatwo przenieść moją grę na telefony. W razie problemów będę cię nachodził ;)
Bardzo fajne masz prace - zazdroszczę.

Krylan
2017-05-30 08:01:05

Nie ma sprawy, można mnie nachodzić i pisać. A za komentarz dziękuję.

Co do powyższego rozwiązania to zapomniałem wspomnieć – sporym minusem jest to, że "web aplikacja" zadziała tylko na Androidzie w przeglądarce Chrome. Co prawda jest to spora część urządzeń, lecz niestety na Windows Phone czy iOS nie można w taki sposób "dodać do ekranu głównego".

Tutaj aktualne możliwości wykorzystania:
http://caniuse.com/#feat=web-app-manifest

Guy Diamond
2017-05-30 13:27:27

A testowałeś manifest od Mozilli?
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json
Może można je na przemian używać?

Krylan
2017-05-30 22:21:35

Niestety to, co podałeś, służy do czego innego, choć nazwa jest taka sama. Manifest.json z mojego posta odnosi się do web aplikacji i działa na podanych na caniuse.com przeglądarkach. Z kolei to, co Ty podałeś, także jest plikiem manifest.json, jednak używanym nie na stronach czy aplikacjach internetowych, tylko we wtyczkach przeglądarkowych. Taki plik jest w nich obowiązkowy i w nim określa się m.in. jaką nazwę posiada wtyczka/rozszerzenie, czy gdzie znajdują się jej ikony.

Pozostaje mieć nadzieję, że web app manifest znajdzie się niedługo w pozostałych przeglądarkach po Chrome i Operze. Jak na razie musimy zadowolić się takim rozwiązaniem (co prawda jest jeszcze możliwość stworzenia aplikacji w javie na podstawie strony i potem wrzucić to na Google Play czy Apple Store, ale to dosyć sporo roboty, porównując do zrobienia krótkiego pliku na stronie).

Dodaj komentarz