Przycisk "Dodaj do ekranu głównego" w systemie Android nie wyświetla witryny jako aplikacji internetowej

Question

Przycisk "Dodaj do ekranu głównego" w systemie Android nie wyświetla witryny jako aplikacji internetowej

Stworzyłem przyjazną dla urządzeń mobilnych witrynę internetową z jQuery Mobile i dodałem kilka meta informacji, dzięki czemu powinna być przypięta do ekranów domowych iOS i Android i powinna być uruchomiona jako aplikacja internetowa (innymi słowy: w przeglądarce, ale bez elementów nawigacji przeglądarki).

Działa dobrze na iOS, ale nie działa na Androida 4.4.2.

Śledziłem Ten tutorial do tworzenia aplikacji internetowych zgodnych z Androidem:

Pomimo dodania wszystkich meta informacji wymienionych w samouczku, Android pokazuje przycisk "Dodaj do ekranu głównego" dla mojej strony internetowej, ale nie uruchamia witryny bez elementów nawigacyjnych przeglądarki, jak opisano w samouczku.

Co robię źle?

17

android google-chrome mobile-website homescreen

Author: samdd, 2014-01-09

Source

1 answers

score 35 · Accepted Answer

Jak widać tutaj Ta funkcja jest nadal oznaczona jako Beta. Myślę, że będziesz musiał przetestować tę funkcję z najnowszą wersją Chrome. Z Artykułu:

Obsługa dodawania do aplikacji na ekranie głównym

Chrome będzie szukał następującego znacznika meta w elemencie strony internetowej:

<meta name="mobile-web-app-capable" content="yes">

Atrybut name musi być "mobile-web-app-capable", a atrybut content musi być " yes " (rozróżnianie wielkości liter). Jeśli w atrybutie content jest jakakolwiek inna wartość aplikacja internetowa zostanie dodana jako zwykła zakładka.

Icon

Ikona używana do instalacji na ekranie głównym jest określana za pomocą największej ikony znalezionej w jednym z następujących tagów <link>:

<link rel="shortcut icon" sizes="192x192" href="nice-highres.png"> (recommended)
<link rel="shortcut icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">

Uwaga: zalecany jest format obrazu 192px. Dwa ostatnie formaty (apple-touch -*) są przestarzałe i będą obsługiwane tylko przez krótki czas.

Etykieta ikony

Element <title> aplikacji służy jako domyślna etykieta dla ikona na ekranie głównym.

Konfiguracja

Poniższy przykład przedstawia minimalną wymaganą konfigurację do obsługi uruchamiania ekranu głównego.

<!doctype html>
<html>
   <head>
     <title>Awesome app</title>
     <meta name="viewport" content="width=device-width">
     <meta name="mobile-web-app-capable" content="yes">
     <link rel="shortcut icon" sizes="192x192" href="/icon.png">
   </head>
   <body></body>
</html>

Porównanie do iOS Safari Dodaj do ekranu głównego

Chrome umożliwia również uruchamianie aplikacji internetowych w trybie aplikacji, Jeśli osadzą meta tag używając nazwy "Apple-mobile-web-app-capable". Chrome przestanie wspierać to użycie w nadchodzącym wydaniu. Chrome wyświetla obecnie ostrzeżenie o dezaktualizacji w deweloperze Konsola narzędzi rejestruje stronę z tagiem meta "Apple-mobile-web-app-capable". Ostrzeżenie wygląda następująco:

Android vs iOS

[8]} chociaż Chrome tymczasowo akceptuje użycie "apple-mobile-web-app-capable", Chrome nie oferuje zgodności z API iOS Safari, w tym: [11]}

window.navigator.standalone
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="/startup.png">

Mam nadzieję, że to pomoże.