检查是否在Android的主屏幕上添加了网络应用 [英] Check if web app is added to home screen on Android

问题描述

我有一个Web应用程序，并且在Android上，我想显示一个警报，说明如何将我的应用程序添加到主屏幕. (将其添加到书签"，然后将其添加到主屏幕"或添加到主页的快捷方式").然后会在打开我的应用程序的屏幕上显示一个图标.

I have a web app and on the Android I would like to display an alert describing how to add my app to the home screen. (Add it to "Bookmarks" and then "Add it to home screen" or "Add to shortcut in Home"). Then a icon will be displayed on the screen that opens my app.

但是，当然，如果应用未添加到主屏幕，我只希望显示此内容.

But off course I only want this to show if the app is not added to the home screen.

有人知道该怎么做吗? 任何输入表示赞赏，谢谢.

Does anybody know how to do this? Any input appreciated, thanks.

推荐答案

是的，可以.

虽然从技术上讲，在Chrome浏览器选项卡中打开的页面无法直接检查主屏幕快捷方式是否存在，但是该页面的本地数据(localStorage，IndexedDB)在主屏幕实例和浏览器选项卡之间共享，因此可以使用传达主屏幕版本的存在.

While technically a page open in Chrome browser tab can't directly check whether a home screen shortcut exists, the page's local data (localStorage, IndexedDB) is shared between home screen instance and browser tabs, so this can be used to communicate the existence of the home screen version.

1. 检测应用是否从主屏幕运行
2. 如果它是从主屏幕运行的，请将此事实保存到localStorage
3. 利润！ (通过从任何标签中的localStorage读取此信息)

1. Detect if the app is running from home screen
2. If it's ran from home screen, save this fact to localStorage
3. Profit! (by reading this from localStorage in any tab)

当应用处于独立视图中时(仅当从主屏幕启动时才可能)，CSS媒体查询(display-mode: standalone)将匹配.在Javascript中，您可以使用以下方法阅读它:

When the app is in standalone view (which is possible only when launched from home screen), the CSS media query (display-mode: standalone) will match. In Javascript you can read it using:

matchMedia('(display-mode: standalone)').matches

(顺便说一句:非标准的iOS等效项是navigator.standalone，但是iOS不在主屏幕和Safari之间共享状态，因此您不走运).

(BTW: the non-standard iOS equivalent of this is navigator.standalone, but iOS doesn't share state between home screen and Safari, so you're out of luck there).

但是，我建议您不要使用自定义说明，而应满足Chrome的渐进式网络应用"标准，然后让Chrome为您进行提示.

However, instead of custom instructions I suggest meeting Chrome's criteria for "progressive web app" and let Chrome do the prompting for you.

这篇关于检查是否在Android的主屏幕上添加了网络应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！