如何阻止电脑浏览器访问已开发的PWA应用？

针对你的需求，这里有几种可行的方法来限制仅移动设备能访问你的PWA应用（版本21.2）：

1. 前端用户代理（UA）检测 #

通过解析浏览器的用户代理字符串，识别桌面设备并拦截访问。这种方法实现简单，适用于大多数常规场景：

// 在应用入口页面的脚本中添加
const isDesktop = /Windows|Macintosh|Linux/.test(navigator.userAgent) && !/Android|iPhone|iPad|iPod/.test(navigator.userAgent);

if (isDesktop) {
  // 显示提示或重定向到说明页面
  document.body.innerHTML = '<div style="text-align:center; margin-top:50px;">此应用仅支持移动设备访问，请使用手机或平板打开。</div>';
  // 或者直接阻止应用初始化
  throw new Error('Desktop access not allowed');
}

注意：用户代理可以被手动篡改，但普通用户很少这么做，足够应对大多数情况。

2. 结合触摸支持与屏幕尺寸检测 #

通过设备的触摸支持和屏幕宽度双重判断，减少误判：

const isMobileDevice = navigator.maxTouchPoints > 0 || window.innerWidth <= 768;

if (!isMobileDevice) {
  // 执行拦截逻辑
  document.body.style.display = 'none';
  alert('此应用仅支持移动设备访问');
}

配合CSS媒体查询增强效果：

@media (min-width: 769px) and (pointer: fine) {
  body {
    display: none !important;
  }
}

缺点：部分带触摸的桌面设备可能被误判为移动设备，建议结合UA检测使用。

3. 后端层面拦截（更彻底） #

如果你的应用有后端服务或使用反向代理（如Nginx），可以在服务器端直接拦截桌面设备的请求，这比前端检测更难绕过：

Nginx配置示例： #

server {
  # 其他配置...
  
  # 匹配桌面设备UA，同时排除移动设备
  if ($http_user_agent ~* "(Windows NT|Mac OS X|X11)" && !$http_user_agent ~* "(Android|iPhone|iPad|iPod)") {
    return 403; # 返回禁止访问
    # 或者重定向到提示页面：return 302 /desktop-not-allowed.html;
  }
}

Node.js（Express）示例： #

app.use((req, res, next) => {
  const userAgent = req.headers['user-agent'];
  const isDesktop = /Windows|Macintosh|Linux/.test(userAgent) && !/Android|iPhone|iPad|iPod/.test(userAgent);
  
  if (isDesktop) {
    return res.status(403).send('此应用仅支持移动设备访问');
  }
  next();
});

4. PWA安装状态校验（可选） #

如果你希望仅允许已安装的移动PWA访问，而非移动浏览器的网页版，可以检测PWA的安装状态：

// 检测是否为已安装的PWA
const isStandalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone;

// 结合移动设备检测
const isMobile = /Android|iPhone|iPad|iPod/.test(navigator.userAgent);

if (!isStandalone && !isMobile) {
  // 拦截非移动设备且未安装的访问
  document.body.innerHTML = '<div>请在移动设备上安装此应用后使用。</div>';
}

内容的提问来源于stack exchange，提问作者SnakeSheet