google-chrome - 添加到主屏幕迷你信息栏未在某些设备上显示

Question

我正在尝试实现我的第一个 PWA 服务工作者，并且我只参考了谷歌文档。现在我的 manifest.json 已经完成，服务工作者是一个简单的代码，如下所示。

// sw.js
var CACHE_NAME = "MyFirstPWA";
var filesToCache = [
   // some css and js files to cache
];

self.addEventListener('install', function (e) {
    e.waitUntil(caches.open(CACHE_NAME).then(function (cache) {
        return cache.addAll(filesToCache);;
    }).then(function (e) {
       return self.skipWaiting();
    }));
});

self.addEventListener('activate', function (event) {
    event.waitUntil(caches.keys().then(function (cacheNames) {
        return Promise.all(cacheNames.map(function (cacheName) {
            return caches.delete(cacheName);
        }));
    }));
});

self.addEventListener('fetch', function (event) {
    event.respondWith(caches.match(event.request).then(function (response) {
        return response || fetch(event.request);
    }).catch(function (e) {
        console.log(e);
    }));
});

// Manifest.json
{
  "name": "MyFirstPWA",
  "short_name": "MyFirstPWA",
  "icons": [
    {
      "src": "/images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/?utm_source=pwa&utm_medium=pwa",
  "orientation": "portrait",
  "display": "standalone",
  "theme_color": "#0054a6",
  "background_color": "#ffffff",
  "scope": "/",
  "splash_pages": null
}

谷歌迷你信息栏功能的工作状态如下。

我想知道我是否遗漏了什么或实施错误？请建议。

标签： google-chromeservice-workerprogressive-web-appsmanifest.json