添加到主屏幕

Question

我试着去理解，这是肯定的，我没有丰富的知识，但我想完成这一点。总之，我在manifest.json中创建了manifest.json和service-worker.js

{
  "short_name": "xyx",
  "name": " ccccc ",
  "theme_color": "#4A90E2",
  "background_color": "#F7F8F9",
  "display": "standalone",
  "icons": [
    {
      "src": "/images/icons/icon-32.png",
      "type": "image/png",
      "sizes": "32x32"
    },
      {
      "src": "/images/icons/icon-64.png",
      "type": "image/png",
      "sizes": "64x64"
    },
    {
      "src": "/images/icons/icon-96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "/images/icons/icon-128.png",
      "type": "image/png",
      "sizes": "128x128"
    },
    {
      "src": "/images/icons/icon-168.png",
      "type": "image/png",
      "sizes": "168x168"
    },
    {
      "src": "/images/icons/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons/icon-256.png",
      "type": "image/png",
      "sizes": "256x256"
    },
     {
      "src": "/images/icons/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?utm_source=launcher"
}

在service-worker.js中，我将

if ('serviceWorker' in navigator) {  
window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

我还需要做什么或添加什么才能使添加到主屏幕显示在我的手机上?？

Answer 1

我建议您通常将其重命名为manifest.webmanifest its。

您是否也像这样将其链接到您的应用程序？：

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

然后检查它是否适用：

​

​

如果一切都正确，请检查是否出现了install按钮。

此网站为：https://nuxtjs.org/

​

​