如何标记渐进式Web应用（PWA）需配备硬件键盘？

首先得明确：目前Web App Manifest里并没有官方字段直接标记“需要硬件键盘”，不过咱们可以通过几种间接手段，帮你筛选出适配的设备和用户，达成类似的效果：

1. 用Manifest字段引导适配场景 #

通过配置display和orientation，让你的PWA更贴合桌面/带键盘平板的使用逻辑，间接劝退无硬件键盘的移动端用户：

{
  "display": "standalone", // 让应用呈现原生桌面应用的样式
  "orientation": "landscape" // 强制横屏，更适配键盘操作场景
}

这种配置下，移动端用户即使安装了应用，也会因为操作不便（横屏+无键盘）主动放弃使用。

2. 主动检测硬件键盘并提示用户 #

利用浏览器的Keyboard API（现代Chrome等主流浏览器已支持）或者设备判断逻辑，在应用加载时直接检测是否有硬件键盘，若没有则给出明确提示：

function hasHardwareKeyboard() {
  // 优先使用官方API检测
  if ('keyboard' in navigator) {
    return navigator.keyboard.hardwareKeyboard;
  }
  // 兼容方案：默认判定桌面设备有键盘，移动端无（可根据需求调整规则）
  const isDesktop = !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  return isDesktop;
}

// 应用加载完成后执行检测
window.addEventListener('load', () => {
  if (!hasHardwareKeyboard()) {
    alert('这款应用需要硬件键盘才能正常使用，请连接键盘后再操作哦～');
    // 你也可以选择隐藏核心功能，只保留提示内容
  }
});

这个方法能直接给用户清晰的反馈，避免他们在不适配的设备上浪费时间。

3. 在安装环节过滤设备 #

在PWA触发安装提示前，先检测设备是否符合条件，不符合就不显示安装按钮或者提前告知用户：

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  
  if (hasHardwareKeyboard()) {
    // 显示安装按钮，引导符合条件的用户安装
    document.getElementById('install-btn').style.display = 'block';
  } else {
    alert('当前设备没有硬件键盘，无法获得最佳使用体验，建议在桌面或带键盘的平板上使用～');
  }
});

这样可以从源头上减少无键盘用户安装你的应用。

4. 用Viewport元标签优化适配体验 #

给页面添加限制缩放的viewport标签，让移动端用户的操作体验更不友好，间接筛选目标用户：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

不过这个方法比较被动，更适合和前面的方法配合使用。

总的来说，虽然没有官方的直接标记方式，但通过这些组合手段，基本可以实现你想要的效果——让有硬件键盘的用户顺畅使用，同时避免无键盘用户在不适配的设备上浪费精力。

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