如何限制网站特定页面仅允许通过PWA访问？

要实现仅允许PWA访问特定页面的需求，核心是利用PWA运行时的独有标识（比如独立窗口模式的特征）区分常规浏览器环境。以下是几种实用方案：

1. 使用display-mode媒体查询检测独立模式 #

PWA安装后以standalone（独立窗口）模式运行时，浏览器会触发(display-mode: standalone)媒体查询。可在页面加载时验证该条件：

window.addEventListener('DOMContentLoaded', () => {
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
  
  if (!isStandalone) {
    // 非PWA环境，直接提示或跳转
    document.body.innerHTML = '<h1>此页面仅支持通过已安装的PWA访问</h1>';
    // 也可跳转至提示页：window.location.href = '/pwa-only-notice.html';
  }
});

注意：部分旧版浏览器对display-mode的支持存在差异，需结合其他方案兼容。

2. 结合iOS Safari的navigator.standalone属性 #

iOS Safari提供navigator.standalone属性，PWA以独立模式运行时该值为true。可与媒体查询结合实现跨浏览器兼容：

window.addEventListener('DOMContentLoaded', () => {
  let isPWA = false;
  
  // 检测标准display-mode
  if (window.matchMedia('(display-mode: standalone)').matches) {
    isPWA = true;
  }
  // 兼容iOS Safari
  else if (typeof navigator.standalone !== 'undefined' && navigator.standalone) {
    isPWA = true;
  }
  
  if (!isPWA) {
    document.body.innerHTML = '<h1>请通过已安装的PWA访问此页面</h1>';
  }
});

3. 配合Manifest启动参数增强验证 #

在PWA的manifest.json中，给start_url添加一个仅PWA启动时携带的参数（比如?source=pwa）：

{
  "start_url": "/restricted-page?source=pwa",
  "display": "standalone"
}

然后在页面中同时验证参数和独立模式：

window.addEventListener('DOMContentLoaded', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const hasValidParam = urlParams.get('source') === 'pwa';
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches || (navigator.standalone ?? false);
  
  if (!hasValidParam || !isStandalone) {
    document.body.innerHTML = '<h1>此页面仅支持PWA访问</h1>';
  }
});

局限性说明：所有前端检测方案无法做到100%安全（比如用户可通过开发者工具修改环境变量），但足以覆盖普通用户场景。若需更高安全性，可结合后端验证（比如PWA启动时的特定请求头或会话标识，实现复杂度较高）。

内容的提问来源于stack exchange，提问作者Prathamesh Belvalkar.