如何实现仅在Android系统设备上显示应用下载引导弹窗

第一步：Android设备识别 #

通过JS读取浏览器userAgent字段判断是否为Android设备，代码如下：

function checkIsAndroid() {
  const userAgent = navigator.userAgent.toLowerCase();
  return userAgent.indexOf('android') > -1;
}

第二步：编写弹窗基础结构与样式 #

先在HTML里加弹窗的DOM，默认隐藏：

<!-- 安卓下载引导弹窗 默认隐藏 -->
<div id="androidDownloadModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 9999; align-items: center; justify-content: center;">
  <div style="background: #fff; border-radius: 12px; padding: 24px; width: 90%; max-width: 320px;">
    <h3>下载Sleepyheads安卓客户端</h3>
    <p>安卓设备访问可下载客户端，获得更流畅的使用体验</p>
    <div style="margin-top: 20px; display: flex; gap: 12px; justify-content: flex-end;">
      <button id="closeModalBtn" style="padding: 8px 16px; border: 1px solid #eee; border-radius: 6px; background: #fff; cursor: pointer;">取消</button>
      <button id="downloadBtn" style="padding: 8px 16px; border: none; border-radius: 6px; background: #1677ff; color: #fff; cursor: pointer;">立即下载</button>
    </div>
  </div>
</div>

你也可以把样式单独写到CSS文件里，这里用内联样式是方便快速测试。

第三步：绑定交互逻辑 #

页面加载完成后执行判断，符合条件就弹出弹窗，同时可以加localStorage逻辑避免重复弹窗骚扰用户：

window.addEventListener('load', () => {
  // 先判断用户之前有没有关闭过弹窗，这里设置关闭后7天内不再弹出
  const hasClosedModal = localStorage.getItem('sleepyheads_closed_modal');
  if (hasClosedModal && Date.now() - Number(hasClosedModal) < 7 * 24 * 60 * 60 * 1000) {
    return;
  }
  // 判断是否为安卓设备
  if (checkIsAndroid()) {
    const modal = document.getElementById('androidDownloadModal');
    const closeBtn = document.getElementById('closeModalBtn');
    const downloadBtn = document.getElementById('downloadBtn');
    // 显示弹窗
    modal.style.display = 'flex';
    // 关闭按钮逻辑
    closeBtn.addEventListener('click', () => {
      modal.style.display = 'none';
      localStorage.setItem('sleepyheads_closed_modal', Date.now().toString());
    });
    // 下载按钮逻辑，替换成你自己的APK下载地址即可
    downloadBtn.addEventListener('click', () => {
      window.location.href = '你的APK文件下载地址';
      modal.style.display = 'none';
      localStorage.setItem('sleepyheads_closed_modal', Date.now().toString());
    });
  }
});

可选优化点 #

• 可以调整弹窗触发时机，比如用户停留页面3秒后再弹出，降低用户反感
• 如果你的站点已经适配了PWA，也可以结合原生的APP安装提示API使用，体验更统一
• 如果使用Vue、React等前端框架，可将弹窗封装为独立组件，逻辑对应框架语法调整即可

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