Question

我已经使用jQuery Mobile创建了一个适合移动设备的网站并添加了一些元信息，以便它应该固定在iOS和Android主屏幕上，并且应该作为Web应用程序启动（换句话说：在浏览器中，但没有浏览器导航元素。）

它适用于iOS，但它不适用于Android 4.4.2。

我按照this教程创建了Android兼容的网络应用程序：

尽管添加了教程中列出的所有元信息，Android确实会显示＆＃34;添加到主屏幕＆＃34;我的网站按钮，但如果没有浏览器导航元素，它就不会启动网站。

我做错了什么？

Answer 1

如您所见[{3}}，此功能仍标记为Beta。我猜您需要使用最新版本的Chrome测试此功能。来自文章：

支持添加到主屏幕应用

Chrome会在网页元素中查找以下元标记：

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

name属性必须是“mobile-web-app-capable”，content属性必须为“yes”（不区分大小写）。如果内容属性中有任何其他值，则会将Web应用程序添加为常规书签。

图标

用于安装到主屏幕的图标是使用以下<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">

警告：建议使用192px图像格式。最后两种格式（apple-touch- *）已弃用，并且只会在短时间内得到支持。

图标标签

应用程序的<title>元素用作主屏幕上图标的默认标签。

配置

以下示例是支持主屏幕启动体验所需的最低配置。

<!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>

与iOS Safari的比较添加到主屏幕

如果他们使用“apple-mobile-web-app-capable”名称嵌入元标记，Chrome也将允许网络应用以“应用模式”启动。 Chrome将在即将发布的版本中停止支持此用法。 Chrome当前检测到只包含“具有Apple-mobile-web-app-capable”元标记的网页时，Chrome会在开发人员工具的控制台日志中显示弃用警告。警告显示如下：

Android vs iOS

虽然Chrome暂时接受"apple-mobile-web-app-capable"的使用，但Chrome不提供与iOS Safari API的兼容性，包括：

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

我希望它有所帮助。

Answer 2

guide表示从Chrome 68开始，预计应用程序开发人员将按钮添加到他们的应用程序中。并且只有在满足PWA criteria的情况下，它才有效。然后，您应该能够使用以下代码来获取应用的回调，您可以在其中向用户显示一个按钮来启动vh提示符。

根据指南，添加此侦听器。

Add to home screen

然后...。用户需要单击该按钮，然后您可以运行此代码。

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

我相当容易地将其转换为react组件，下面的代码是从我的Redux项目中删减的，因此它不能复制/粘贴，但应该给出大致的想法。

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

参考： https://developers.google.com/web/fundamentals/app-install-banners/

Android中的“添加到主屏幕”按钮不会将网站显示为Web App

2 个答案:

支持添加到主屏幕应用

图标

图标标签

配置

与iOS Safari的比较添加到主屏幕