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

Question

当它在移动视图中打开时，我想在网站上显示“添加到主屏幕”作为弹出窗口。我用核心php，jquery来建立我的网站

Answer 1

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

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;
    });
});