以往的 Web 应用只能通过浏览器打开，用户必须先输入 URL 才能访问。但是现在，随着 PWA 技术的普及，Web 应用可以像原生应用一样添加到设备桌面，并且可以离线使用，有了更好的用户体验。
在本文中，我们将介绍如何让用户将 PWA 应用添加到桌面。具体来说，本文的内容包括以下几个方面：
- 什么是 PWA 应用
- 如何让用户添加 PWA 应用到桌面
- 示例代码
什么是 PWA 应用
PWA，即 Progressive Web App，是一种 Web 应用的形态，可以像原生应用一样添加到设备桌面，并且可以离线使用。PWA 通过使用现代 Web 浏览器提供的 API 和功能，提供其它 Web 应用无法匹配的用户体验。
常见的 PWA 应用有 Twitter Lite，Flipboard 等。PWA 应用的特点包括：
- 可以添加到设备的主屏幕
- 可以离线访问
- 快速加载
- 可以推送通知
- 可以在桌面上打开
- 使用 HTTPS 协议
- 响应式设计
如何让用户添加 PWA 应用到桌面
要让用户将 PWA 应用添加到桌面，我们需要使用 Web App Manifest 文件和 Service Worker。下面我们一步一步来介绍。
创建 Manifest 文件
Web App Manifest 是一个 JSON 文件，可以描述应用的名称、图标以及其它用于设备桌面显示的信息。我们来看看一个简单的示例：
-- -------------------- ---- ------- - ------- --- ----- ------------- ------ ------------ ---- -------- - - ------ ------------------------ ------- ------------ -------- ------- -- - ------ ------------------------ ------- ------------ -------- ------- - -- ---------- ------------ -展开代码
这个示例中，我们定义了应用的名称、短名称、启动 URL，以及两个图标。最后一个属性 display，定义了应用的显示方式。这里我们使用 standalone，表示应用可以在设备桌面上打开，而不是在浏览器中。
注册 Service Worker
Service Worker 是一个 JavaScript 文件，可以缓存网页资源，使之在离线时也可以使用。在上面的 Manifest 文件中，我们定义了一个 start_url，这个 URL 将被用于启动应用。我们可以在这个 URL 对应的页面中注册 Service Worker。
-- -------------------- ---- ------- -- ---------------- -- ---------- - ------------------------------- -- -- - ----------------------------------------- ------------------ -- - -------------------- ------ ----------- -- -------------- -- ------------ -- - -------------------- ------ ------------ ------- -- ------- --- --- -展开代码
添加提示用户添加到桌面的代码
当用户打开 PWA 应用时，我们需要判断是否可以将应用添加到设备桌面上。如果可以，就在界面上显示添加提示。
-- -------------------- ---- ------- --- --------------- ---------------------------------------------- --- -- - -- ------- ------ -- --- ------- ---- ------------- ------- --- ------ ------------------- -- ----- --- ----- -- -- --- -- --------- ------ -------------- - -- -- ------ -- ------ --- ---- ---- --- --- -- ---- ------ -------------------- - -------- --- -------------------------------- -- -- - -- ---- --- ------ ------------------------ -- ---- --- --- ---- -- ------- -- --- ------ ------------------------- -------------------- -- - -- --------------------- --- ----------- - ----------------- -------- --- ---- --------- - ---- - ----------------- --------- --- ---- --------- - -------------- - ----- --- ---展开代码
在这段代码中，当浏览器检测到可以将应用添加到桌面时，会触发 beforeinstallprompt 事件。我们在这个事件中缓存携带的提示信息（deferredPrompt），并且在页面中添加一个“添加到桌面”的按钮。当用户点击这个按钮时，我们可以使用 deferredPrompt 来弹出提示框，询问用户是否添加到桌面。
示例代码
完整的 PWA 应用可以参考这个示例：https://github.com/mdn/pwa-examples/tree/master/a2hs
本文所使用的示例代码部分来源于 MDN Web Docs。如果您想进一步学习 PWA，可以参考它们的 PWA 相关文章 https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c8c296e46428fe9ef82785
