Question

我正在尝试将pwa安装到我的移动设备上。我只能添加到主屏幕。有谁知道为什么会这样？

Answer 1

要安装PWA，您需要满足以下要求：

网络清单，其中填写了正确的字段。
要从安全（HTTPS）域提供服务的网站。
代表设备上的应用程序的图标。
向获取事件处理程序注册的服务工作者，以使应用程序脱机工作（当前仅适用于Android chrome浏览器。）

您必须像这样将清单文件包含在index.html部分中

    <link rel="manifest" href="name.webmanifest">

您的清单应包含以下字段，其中大多数是不言自明的。

{
"background_color": "purple",
  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
  "display": "fullscreen",
  "icons": [
    {
      "src": "icon/fox-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "name": "Awesome fox pictures",
  "short_name": "Foxes",
  "start_url": "/pwa-examples/a2hs/index.html"
}

现在，当浏览器找到满足所有要求的清单文件时，它将触发beforeinstallprompt，因此您必须显示A2HS对话框。

注意：

不同的浏览器具有不同的安装条件或触发beforeinstallprompt事件的条件。
从Android上的Chrome 68（于2018年7月稳定）开始，Chrome将不再显示“添加到主屏幕”横幅。如果该网站符合添加到主屏幕的条件，则Chrome将显示迷你信息栏。

对于A2HS对话框：

在文档中添加一个按钮，以允许用户进行安装

    <button class="add-button">Add to home screen</button>

提供一些样式

.add-button {
  position: absolute;
  top: 1px;
  left: 1px;
}

现在在您注册服务工作者的JS文件中，添加以下代码

let deferredPrompt;

//reference to your install button
const addBtn = document.querySelector('.add-button');

//We hide the button initially because the PWA will not be available for 
//install until it follows the A2HS criteria.
addBtn.style.display = 'none';

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 to notify the user they can add to home screen
  addBtn.style.display = 'block';

  addBtn.addEventListener('click', (e) => {
    // hide our user interface that shows our A2HS button
    addBtn.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;
      });
  });
});

Service-worker不会安装，只会添加到主屏幕

1 个答案: