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.
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ę.