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"}

ServiceWorker：

//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

获取功能用于获取JSon清单文件。尝试再次阅读Google文档。要在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的更多信息。

PWA：Chrome警告“服务人员没有“提取”处理程序”

1 个答案: