渐进式网络应用程序（PWA）的一个重要方面是它可以由浏览器推荐在设备上安装。安装完成后，PWA 对用户来说就像特定平台的应用程序一样，成为设备的一个永久性功能，用户可以像启动其他任何应用程序一样直接从操作系统启动它。
我们可以总结如下：
– 支持的浏览器向用户推荐 PWA 在设备上安装。
– PWA 可以像特定平台的应用程序一样安装，并且可以自定义安装过程。
– 安装后，PWA 会在设备上获得一个应用图标，与特定平台的应用程序并列。
– 安装后，PWA 可以作为独立应用程序启动，而不是在浏览器中作为网站。
我们将在本指南中讨论这些特性。不过，首先，我们将讨论网络应用程序要被推荐安装必须满足的要求。
可安装性
要让支持的浏览器推荐网络应用程序进行安装，它需要满足一些技术要求。我们可以将这些视为网络应用程序成为 PWA 的最低要求。
注意：虽然服务工作者不是 PWA 可安装的要求，但许多 PWA 使用服务工作者来提供离线体验。更多信息请查看 CycleTracker：服务工作者教程。
网络应用程序清单
网络应用程序清单是一个 JSON 文件，它告诉浏览器 PWA 在设备上应该如何显示和运行。要使网络应用程序成为 PWA，它必须是可安装的，而要可安装，它必须包含一个清单。
清单通过在应用程序的 HTML 中使用 <link> 元素来包含：
html
复制到剪贴板
<!doctype html><html lang=”en”><head><link rel=”manifest” href=”manifest.json” /><!–… –></head><body></body></html>
如果 PWA 有多个页面，每个页面都必须以这种方式引用清单。
清单包含一个 JSON 对象，其中包含一组成员，每个成员定义了 PWA 外观或行为的某个方面。这是一个相当简单的清单，只包含两个成员：”name” 和 “icons”
json
复制到剪贴板
{“name”: “My PWA”,”icons”: [{“src”: “icons/512.png”,”type”: “image/png”,”sizes”: “512×512”}]}
必需的清单成员
基于 Chromium 的浏览器，包括 Google Chrome、Samsung Internet 和 Microsoft Edge，要求清单包括以下成员：
– name 或 short_name
– icons 必须包含 192px 和 512px 的图标
– start_url
– display 和/或 display_override
– prefer-related-application 必须为 false 或不存在
有关每个成员的完整描述，请查看网络应用程序清单参考文档。
需要 HTTPS、localhost 或环回地址
要使 PWA 可安装，它必须使用 https 协议提供服务，或者从本地开发环境使用 localhost 或 127.0.0.1（可以带或不带端口号）。
这比安全上下文的要求更严格，安全上下文认为从 URL 加载的资源是安全的。
从应用商店安装
用户希望在其平台的应用商店中找到应用程序，例如 Google Play 商店或 Apple App 商店。
如果您的应用程序满足可安装的先决条件，您可以对其进行打包并通过应用商店分发。每个应用商店的流程都是特定的：
– 如何将 PWA 发布到 Google Play 商店
– 如何将 PWA 发布到 Microsoft 商店
– 如何将 PWA 发布到 Meta Quest 商店
PWABuilder 是一个工具，用于简化为各种应用商店打包和发布 PWA 的过程。它支持 Google Play 商店、Microsoft 商店、Meta Quest 商店和 iOS App 商店。
如果您将应用程序添加到应用商店，用户可以从那里安装它，就像特定平台的应用程序一样。
从网络安装
当支持的浏览器确定网络应用程序满足前面描述的可安装标准时，它将向用户推荐该应用程序进行安装。用户将有机会安装该应用程序。这意味着您可以将 PWA 作为网站分发，使其可以通过网络搜索被发现，也可以在应用商店中分发，以便用户在那里找到它。
这是 PWA 如何为您提供两全其美的一个很好的例子。这也是渐进增强如何与 PWA 配合工作的一个好例子：如果用户在网络上遇到您的 PWA，使用无法安装它的浏览器，他们可以像使用普通网站一样使用它。
从网络安装 PWA 的用户界面因浏览器和平台而异。例如，当用户导航到页面时，浏览器可能会在 URL 栏中包含一个“安装”图标：
当用户选择该图标时，浏览器会显示一个提示，询问他们是否要安装 PWA，如果他们接受，PWA 就会被安装。
提示会显示 PWA 的名称和图标，这些是从名称和图标清单成员中获取的。
浏览器支持
来自网络的 PWA 安装推荐支持因浏览器和平台而异。
在桌面端：
– Chromium 浏览器支持在所有支持的桌面操作系统上安装具有清单文件的 PWA。
– Firefox 和 Safari 不支持使用清单文件安装 PWA。
在移动端：
– 在 Android 上，Firefox、Chrome、Edge、Opera 和 Samsung Internet Browser 都支持安装 PWA。
– 在 iOS 16.3 及更早版本中，PWA 只能通过 Safari 安装。
– 在 iOS 16.4 及更高版本中，PWA 可以从 Safari、Chrome、Edge、Firefox 和 Orion 的共享菜单中安装。
将网站安装为应用程序
桌面版的 Chrome 和 Android、桌面版的 Safari 和桌面版的 Edge 还支持用户将任何网站安装为应用程序，无论它是否具有清单文件，也不考虑清单文件的可安装性标准。使用清单文件的好处是，当访问该网站时，浏览器会积极推荐安装该网站，开发人员可以自定义安装行为。
触发安装提示
PWA 可以为用户提供自己的页面内用户界面来打开安装提示，而不是依赖浏览器默认提供的用户界面。这使 PWA 能够为用户提供一些上下文和安装 PWA 的理由，并有助于使安装用户流程更容易被发现。
此技术依赖于 beforeinstallprompt 事件，一旦浏览器确定 PWA 可安装，该事件就会在全局 Window 对象上触发。此事件具有 prompt() 方法来显示安装提示。因此，PWA 可以：
– 添加自己的“安装”按钮
– 监听 beforeinstallprompt 事件
– 通过调用 preventDefault() 取消事件的默认行为
– 在自己的“安装”按钮的事件处理程序中，调用 prompt()。
这在 iOS 上不受支持。
自定义安装提示
默认情况下，安装提示包含 PWA 的名称和图标。如果您为 description 和 screenshots 清单成员提供值，那么仅在 Android 上，这些值将显示在安装提示中，为用户提供额外的上下文和安装 PWA 的动机。
下面的屏幕截图显示了在 Android 上运行的 Google Chrome 中 PWAmp 演示的安装提示
启动应用程序
一旦安装了 PWA，它的图标将与用户安装的其他任何应用程序一起显示在设备上，点击该图标即可启动应用程序。
您可以使用 display 清单成员来控制显示模式：即 PWA 启动时的显示方式。特别是：
– “standalone”表示 PWA 应该看起来和感觉像特定平台的应用程序，没有浏览器用户界面元素
– “browser”表示 PWA 应该作为新的浏览器标签页或窗口打开，就像普通网站一样。
如果浏览器不支持给定的显示模式，将根据预定义的顺序回退到支持的显示模式。display_override 使您能够重新定义回退顺序。
发表评论