渐进式Web App无法安装在Chrome中

时间:2019-05-09 16:55:12

标签: javascript html json progressive-web-apps

我用html和javascript构建一个单位转换器。我的最后一个问题是使该应用程序可安装。但是chrome中的按钮不会出现。但是正如我在chrom开发工具中看到的那样,Service Worker正在运行。我正在使用Ubuntu 18.04,VS Code扩展Live Server和最新的Chrome浏览器。我还尝试了Firefox和智能手机。两者都不起作用。

这是我的serviceworker.js:

const cacheName = 'Einheitenrechner';
const staticAssets = [
    '/',
    '/index.html',
    '/scripts/app.js',
    '/style/app.css',
    '/manifest.json'
];

self.addEventListener('install',function(event){
    event.waitUntil(
    caches.open(cacheName)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(staticAssets);
      })
  );
});

self.addEventListener('activate',function(event){
    event.waitUntil(
        caches.keys().then((keyList) => {
          return Promise.all(keyList.map((key) => {
            if (key !== cacheName) {
              console.log('[ServiceWorker] Removing old cache', key);
              return caches.delete(key);
            }
          }));
        })
    );;
    self.clients.claim();
});



self.addEventListener('fetch', async e =>{
    // CODELAB: Add fetch event handler here.
    if (evt.request.mode !== 'navigate') {
    // Not a page navigation, bail.
        return;
    }
    evt.respondWith(
      fetch(evt.request)
          .catch(() => {
            return caches.open(cacheName)
                .then((cache) => {
                  return cache.match('index.html');
                });
          })
  );
});

我的register-sw.js:

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('scripts/serviceworker.js')
          .then((reg) => {
            console.log('Service worker registered.', reg);
          });
    });
  }

1 个答案:

答案 0 :(得分:0)

这里没有足够的信息来提供正确的答案。建议您使用Chrome工具进行检查。在“审核”中,进行了渐进式Web应用程序检查(也称为Lighthouse)。如果运行此程序,它将告诉您应用程序是否有问题。如果您可以根据结果编辑问题,我们中的一个也许可以提供更好的答案。