PWA: предупреждение Chrome «У работника службы нет обработчика« выборки »» - PullRequest
Новая
       53

PWA: предупреждение Chrome «У работника службы нет обработчика« выборки »»

0 голосов
/ 19 декабря 2018

В настоящее время я безуспешно пытаюсь установить мой 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.Он полностью работает на рабочем столе.

Что это значит?На рабочем столе я никогда не получал это предупреждение, только при использовании портативного устройства / эмулятора.

1 Ответ

0 голосов
/ 28 декабря 2018

Функция извлечения используется для извлечения файла манифеста JSon.Попробуйте прочитать документы Google еще раз.Для добавления PWA в Mobile вам нужен файл манифеста, который выбирается с помощью сервис-работника с помощью функции 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);
});

, чтобы узнать больше о получении и манифесте Попробуйте это .

...