javascript - Chrome 无法安装 Progressive Web App

Question

我用 html 和 javascript 构建了一个单位转换器。我的最后一个问题是使应用程序可安装。但是 chrome 中的按钮没有出现。但是 Service Worker 正在运行，正如我在 chrom 开发工具中看到的那样。我正在使用 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');
                });
          })
  );
});

我的注册器-sw.js:

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

Answer 1

这里没有足够的信息来提供正确的答案。我建议你使用 Chrome 工具来检查它。在“Audits”中有一个 Progressive Web App 检查(也称为 Lighthouse)。如果你运行它，它应该会告诉你你的应用程序是否有任何问题。如果您可以使用结果编辑您的问题，我们中的一个人也许能够提供更好的答案。