如何在移动视图中将“添加到主屏幕”添加为弹出窗口

Question

我想在网站上以“添加到主屏幕”的弹出窗口形式显示在移动视图中。 我用核心的PHP，jQuery来建立我的网站

Answer 1

您需要满足Google Web基础知识中提到的条件，其中还包括用法示例。

1. 您需要将manifest.json文件添加到您的根目录，其中包括：

   • 简称或名称
   • 图标必须包含192px和512px大小的图标
   • START_URL
   • 显示必须是以下之一：全屏，独立或最小用户界面

2. 您的网站必须在https上运行。

3. 有获取服务的工作人员。

如果满足所有这些条件，则Web应该在installprompt事件之前触发，在该事件中显示一些按钮（示例中为btnAdd）或栏，然后可以显示提示。

来自Google的示例：

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});


//show prompt on click
btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});