5.3 添加到主屏幕的高级用法

添加到主屏幕功能允许用户轻轻一点便可经常回来浏览。事实上，这个浏览器的内置功能对于我们开发者来说是非常好的，但这同时也意味着大部分功能是由浏览器控制的。

有时你可能会想要覆盖默认设置并提供自己的逻辑，例如对添加到主屏幕操作栏进行取消操作或推迟显示。幸运的是，可以使用代码来控制某些行为。

5.3.1 取消提示

如果出于某种原因，你不希望显示添加到主屏幕操作栏，其实是可以完全取消该操作栏的。根据 Web 应用的类型，可能显示此提示是没有意义的，或许网站包含了敏感话题，甚至是一个短期的活动，这种行为带给用户的讨厌程度远大于帮助。

代码清单 5.7

window.addEventListener('beforeinstallprompt', function(e) {
  e.preventDefault();
  return false;
});

清单5.7中的代码会监听 beforeinstallprompt 事件并防止操作栏的默认行为触发。代码使用了标准 JavaScript 的 preventDefault() 功能来取消事件并返回 false，两处代码都是需要的，以确保操作栏不会出现。上面的代码想当简单，它可以在你可能不想显示“添加到主屏幕”操作栏的情况下使用。

5.3.2 判断使用情况

对用户来说，添加到主屏幕功能是非常有帮助的，但重要的是要确定实际情况是否真的是这样。你的用户是否对操作栏感到厌烦并当它出现的时候直接关掉？他们是否足够信任你的应用并将其添加到设备之中？

通过监听 beforeinstallprompt 事件，可以判断出用户是否决定添加你的 Web 应用到主屏幕或者直接关掉提示。

代码清单 5.8

window.addEventListener('beforeinstallprompt', function (event) {
  event.userChoice.then(function (result) {          ❶
    console.log(result.outcome);
    if (result.outcome == 'dismissed') {             ❷
      // 发送数据以进行分析
    } else {
      // 发送数据以进行分析
    }
  });
});

❶ 判断用户的选择并返回 Promise
❷ 基于用户的选择来决定如何继续

在清单5.8中，我们为 beforeinstallprompt 事件添加了监听器。这个事件有个叫做 userChoice 的对象，它返回用户决定的 Promise 。我们可以使用这个 Promise 的结果来判断用户是关掉提示还是确认提示。

此时，你可以决定将此信息发送到 Web 分析工具，以便随着时间的推移跟踪此功能的使用情况。这项技术可以用于了解用户如何与“添加到主屏幕”提示进行交互。

5.3.3 推迟提示

组合使用清单5.7和5.8中的代码，我们实际上可以推迟添加到主屏幕操作栏出现的时间。例如，如果用户访问了网站并已经达到操作栏显示的要求，但你希望用户通过点击按钮来将网站添加到主屏幕。这使得用户可以控制是否要添加你的网站，而不是浏览器决定何时显示操作栏。

清单5.9中的代码是一个带有按钮的基础网页，该按钮在单击时显示添加到主屏幕提示。

代码清单 5.9

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Progressive Times</title>
  </head>
  <body>
    <button id="btnSave" disabled>Click this to show the prompt</button>                       ❶
  </body>
  <script>
    window.addEventListener('load', function () {
      var btnSave = document.getElementById('btnSave');
      var savedPrompt;
      if ('serviceWorker' in navigator) {                                                      ❷
        navigator.serviceWorker.register('/service-worker.js').then(function (registration) {
          // 注册成功
          console.log('ServiceWorker registration successful with scope: ',
            registration.scope);
        }).catch(function (err) {
          // 注册失败 :(
          console.log('ServiceWorker registration failed: ', err);
        });
      }
      window.addEventListener('beforeinstallprompt', function (e) {
        e.preventDefault();                                                                    ❸
        btnSave.removeAttribute('disabled');                                                   ❹
        savedPrompt = e;                                                                       ❺
        return false;
      });
      btnSave.addEventListener('click', function () {                                          ❻
        if (savedPrompt !== undefined) {                                                       
          savedPrompt.prompt();                                                                ❼
          savedPrompt.userChoice.then(function (result) {                                      ❽
            if (result.outcome == 'dismissed') {
              console.log('User dismissed homescreen install');
            } else {
              console.log('User added to homescreen');
            }
            savedPrompt = null;                                                                ❾
          });
        }
      });
    });
  </script>
</html>

❶ 点击此按钮会显示提示
❷ 检查是否支持 Service Workers，如果支持则注册
❸ 为 'beforeinstallprompt' 事件添加事件监听器
❹ 此时，我们可以启用按钮
❺ 我们将事件保存在变量中，这样它可以稍后触发
❻ 为按钮的点击事件添加事件监听器
❼ 用户与我们的应用进行了积极的互动，Chrome 已经尝试提前提醒，所以让我们来看看提示
❽ 遵循用户的选择
❾ 我们不再需要提示，清理掉它

哇！清单5.9中发生了好多事。我们将其分解，以便更好地进行理解。清单5.9中代码是注册 Service Worker 的简单网页。请记住，“添加到主屏幕”功能的条件之一是该页面是通过 HTTPS 来运行激活的 Service Worker 。接下来，代码中包含一个事件监听器，当 beforeinstallprompt 事件发生时会进行触发。当事件触发时，代码会阻止操作栏的显示并将事件对象保存在名为 savedPrompt 的变量中。

现在我们将事件保存在了另外的变量中，这样我们可以允许用户当他们点击按钮时显示添加到主屏幕提示。使用清单5.8中代码，你成功地推迟了添加到主屏幕功能并让用户能够控制何时看到提示出现。

Previous5.2 添加到主屏幕 Next5.4 调试清单文件

Last updated 4 years ago