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

时间:2019-03-05 13:38:02

标签: google-chrome service-worker progressive-web-apps manifest.json

我正在尝试实现我的第一个PWA服务工作者,并且我只引用了Google文档。到目前为止,我的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的迷你信息栏功能的工作状态如下。

Person vs Device working of mini-info bar

我想知道我是否缺少某些东西或执行错误? 请提出建议。

0 个答案:

没有答案