PWA：Chrome 警告“Service Worker 没有 'fetch' 处理程序”

Question

我目前未能成功安装我的 PWA。我已经注册了一个 SertviceWorker 并链接了一个清单，并且我正在监听 beforeInstallPromt 事件。

我的 ServiceWorker 正在监听任何 fetch 事件。

我的问题是，创建的 beforeInstall 横幅仅显示在 Chrome 桌面上，但在移动设备上，我在“清单”部分的 Chrome 检查选项卡“应用程序”中收到警告：

Installability
Service worker does not have the 'fetch' handler

您可以查看https://dev.testapp.ga/的消息

window.addEventListener('beforeinstallprompt', (e) => {
// Stash the event so it can be triggered later.
deferredPrompt = e;
mtShowInstallButton();
});

manifest.json

{"name":"TestApp","short_name":"TestApp","start_url":"https://testapp.ga/loginCheck","icons":[{"src":"https://testapp.ga/assets/icons/launcher-ldpi.png","sizes":"36x36","density":0.75},{"src":"https://testapp.ga/assets/icons/launcher-mdpi.png","sizes":"48x48","density":1},{"src":"https://testapp.ga/assets/icons/launcher-hdpi.png","sizes":"72x72","density":1.5},{"src":"https://testapp.ga/assets/icons/launcher-xhdpi.png","sizes":"96x96","density":2},{"src":"https://testapp.ga/assets/icons/launcher-xxhdpi.png","sizes":"144x144","density":3},{"src":"https://testapp.ga/assets/icons/launcher-xxxhdpi.png","sizes":"192x192","density":4},{"src":"https://testapp.ga/assets/icons/launcher-web.png","sizes":"512x512","density":10}],"display":"standalone","background_color":"#ffffff","theme_color":"#0288d1","orientation":"any"}

服务工作者：

//This array should NEVER contain any file which doesn't exist. Otherwise no single file can be cached.
var preCache=[
  '/favicon.png',
  '/favicon.ico',
  '/assets/Bears/bear-standard.png',
  '/assets/jsInclude/mathjax.js',
  '/material.js',
  '/main.js',
  'functions.js',
  '/material.css',
  '/materialcolors.css',
  '/user.css',
  '/translations.json',
  '/roboto.css',
  '/sw.js',
  '/'
];
//Please specify the version off your App. For every new version, any files are being refreched.
var appVersion="v0.2.1";
//Please specify all files which sould never be cached
var noCache=[
  '/api/'
];

//On installation of app, all files from preCache are being stored automatically.
self.addEventListener('install', function(event) {
  event.waitUntil(
      caches.open(appVersion+'-offline').then(function(cache) {
          return cache.addAll(preCache).then(function(){
            console.log('mtSW: Given files were successfully pre-cached')
          });
      })
  );
});

function shouldCache(url) {
    //Checking if url is market as noCache
    var isNoCache=noCache.includes(url.substr(8).substr(url.substr(8).indexOf("/")))||noCache.includes((url.substr(8).substr(url.substr(8).indexOf("/"))).substr(0,(url.substr(8).substr(url.substr(8).indexOf("/"))).indexOf("?")));
    //Checking of hostname of request != current hostname
    var isOtherHost=url.substr(8).substr(0,url.substr(8).indexOf("/"))!=location.hostname&&url.substr(7).substr(0,url.substr(7).indexOf("/"))!=location.hostname;
    return((url.substr(0,4)=="http"||url.substr(0,3)=="ftp") && isNoCache==false && isOtherHost==false);
}
//If any fetch fails, it will look for the request in the cache and serve it from there first
self.addEventListener('fetch', function(event) {
  //Trying to answer with "online" version if fails, using cache.
  event.respondWith(
    fetch(event.request).then(function (response) {
      if(shouldCache(response.url)) {
        console.log('mtSW: Adding file to cache: '+response.url);
        caches.open(appVersion+'-offline').then(function(cache) {
        cache.add(new Request(response.url));
    });
      }
      return(response);
    }).catch(function(error) {
      console.log( 'mtSW: Error fetching. Serving content from cache: ' + error );

      //Check to see if you have it in the cache
      //Return response
      //If not in the cache, then return error page
      return caches.open(appVersion+'-offline').then(function (cache) {
        return cache.match(event.request).then(function (matching) {
          var report =  !matching || matching.status == 404?Promise.reject('no-match'): matching;
          return report
        });
      });
    })
  );
})

我检查了mtShowInstallButton 函数。它完全可以在桌面上运行。

这是什么意思？在桌面上，我从来没有收到过这个警告，只是在使用手持设备/模拟器时。

Answer 1

Fetch 函数用于获取 JSon 清单文件。再次尝试阅读谷歌文档。 要在 Mobile 中添加 PWA，您需要获取清单文件，该文件是使用 service-worker 使用 fetch 函数获取的。

代码如下：

    fetch('examples/example.json')
.then(function(response) {
  // Do stuff with the response
})
.catch(function(error) {
  console.log('Looks like there was a problem: \n', error);
});

有关获取和清单的更多信息try this。