如何检测 PWA 是否已安装？

推荐答案

if (window.matchMedia('(display-mode: standalone)').matches) {
    console.log('PWA 已安装');
} else {
    console.log('PWA 未安装');
}

本题详细解读

1. 使用 window.matchMedia 检测 display-mode

在 PWA 中，display-mode 是一个 CSS 媒体查询特性，用于检测应用的显示模式。当 PWA 以独立模式（standalone）运行时，display-mode 的值为 standalone。通过 window.matchMedia 方法，我们可以检测当前页面的显示模式。

2. display-mode: standalone 的含义

• standalone: 表示 PWA 已安装并以独立应用的形式运行，通常意味着用户已经从浏览器中将应用添加到主屏幕。
• browser: 表示 PWA 仍在浏览器标签页中运行，未安装为独立应用。

3. 代码解析

if (window.matchMedia('(display-mode: standalone)').matches) {
    console.log('PWA 已安装');
} else {
    console.log('PWA 未安装');
}

• window.matchMedia('(display-mode: standalone)')：创建一个媒体查询对象，用于检测当前页面的显示模式是否为 standalone。
• .matches：返回一个布尔值，表示当前页面是否匹配该媒体查询。如果匹配，则返回 true，表示 PWA 已安装；否则返回 false，表示 PWA 未安装。

4. 适用场景

• 检测 PWA 是否已安装：在用户访问 PWA 时，可以通过此方法判断用户是否已经将应用添加到主屏幕。
• 提供不同的用户体验：根据 PWA 是否已安装，可以调整应用的界面或功能，例如显示“添加到主屏幕”的提示。

5. 注意事项

• 浏览器兼容性：window.matchMedia 和 display-mode 在现代浏览器中支持良好，但在一些旧版浏览器中可能不支持。
• PWA 的 manifest.json 配置：确保 manifest.json 文件中正确配置了 display 属性，例如 "display": "standalone"，以确保 PWA 能够以独立模式运行。