手机端网页消息提醒无震动/声音问题求助

各位大佬好，我最近遇到个头疼的问题，想请大家帮忙出出主意。我做了个提醒程序，核心功能是把桌面应用里的记录消息和提醒推送到手机端——PC上用网页访问，手机则打开专门的phone.html页面。但现在的问题是，手机收到新消息时完全没有震动或声音提示，根本没法及时察觉到消息过来。

下面是我用到的代码片段，麻烦大家帮忙看看哪里出了问题：

HTML结构 #

<header>Easy Yazılım Hatırlatıcı</header>
<nav>
  <button class="tab active" data-id="mesaj">Mesaj</button>
  <button class="tab" data-id="alacak">Alacaklar</button>
  <button class="tab" data-id="borc">Borçlar</button>
  <button class="tab" data-id="stok">Stok</button>
</nav>
<div id="mesaj" class="pane active">
  <div id="icerik">Yükleniyor…</div>
</div>
<div id="alacak" class="pane"><iframe src="alacaklar.txt" style="width:100%;height:70vh;border:none"></iframe></div>
<div id="borc" class="pane"><iframe src="borclar.txt" style="width:100%;height:70vh;border:none"></iframe></div>
<div id="stok" class="pane"><iframe src="stok.txt" style="width:100%;height:70vh;border:none"></iframe></div>

CSS样式 #

body { margin: 0; font-family: sans-serif; background: #f3f3f3 }
header { background: #007bff; color: #fff; text-align: center; padding: 1rem; font-size: 1.3rem }
nav { display: flex; background: #ddd }
nav button { flex: 1; padding: 1rem; border: none; background: #eee; font-weight: 700 }
nav button.active { background: #ccc }
.pane { display: none; padding: 1rem }
.pane.active { display: block }
#icerik { background: #fff; padding: 1rem; border-radius: 8px; box-shadow: 0 0 5px #aaa; font-size: 1.1rem }

JavaScript逻辑 #

/* ▼ 切换标签页 */
document.querySelectorAll('.tab').forEach(btn => {
  btn.onclick = e => {
    document.querySelectorAll('.tab').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.pane').forEach(p => p.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById(btn.dataset.id).classList.add('active');
  };
});

let lastMsg = "";
function kontrolEt() {
  fetch("mesaj.txt?" + Date.now())
    .then(r => r.text()).then(t => {
      t = t.trim();
      if (t && t !== lastMsg) {
        document.getElementById('icerik').textContent = t;
        lastMsg = t;
        /* ► Android震动尝试 */
        if (typeof AndroidVibrator !== "undefined") {
          AndroidVibrator.vibrate();
        }
      }
    });
}
setInterval(kontrolEt, 5000);
kontrolEt();

目前我在JS里尝试用AndroidVibrator.vibrate()来触发震动，但完全没效果。我自己琢磨了几个可能的原因，但不确定怎么验证和修复：

• 是不是AndroidVibrator这个对象只有在特定的WebView环境里才存在？普通手机浏览器根本不支持这个？
• 如果是用WebView打包的APP，是不是需要在AndroidManifest里添加震动权限（android.permission.VIBRATE）？
• 代码里完全没做声音提醒的逻辑，普通网页里怎么实现收到新消息时播放提示音？
• 会不会是浏览器的限制？比如必须用户先和页面交互（比如点击过），才能触发震动或播放声音？

有没有大佬能帮我分析下问题所在，或者给点具体的修复建议？不管是普通浏览器环境下的解决方案，还是WebView打包的配置方法，都欢迎分享！

内容来源于stack exchange