Question

我正在尝试使PWA在iOS / Android OS的两种联机/脱机模式下均能正常工作，到目前为止，我已经准备好服务工作者并在android上工作，服务离线页面正确，但是在IOS上根本无法使用，我可以将PWA添加到主屏幕，并且可以使用我拥有的所有IndexedDB方法，但是一旦我脱机，它告诉我Safari没有互联网连接，我认为的安装方法可能存在问题我的服务人员，但是我不知道如何在iphone上检查它，因为我是在Linux上进行开发的，这是我的服务人员代码，可以在android上正常运行，但在IOS上无法运行。

(function() {
'use strict';
  var filesToCache = [
    '/app/inicio',
    '/app/mapa',
    '/app/visita',
    '/app/sincronizacion',
    '/static/base/bs4/js/jquery-3.1.1.min.js',
    '/static/base/bs4/css/heineken-bs.min.css',
    '/static/base/bs4/js/bootstrap.min.js',
    '/static/base/bs/js/bootstrap-switch.min.js',
    '/static/base/fontawesome-5.3.1/js/all.min.js', 
    '/static/base/js/chainedfk.js',
    '/static/base/multiselect/js/jquery.multi-select.js',
    '/static/base/js/common.js',
    '/static/base/js/jquery.numeric.min.js',
    '/static/base/bs4/js/popper.min.js',
    '/static/base/bs/css/bootstrap-switch.min.css',
    '/static/base/imgs/favicon/favicon.ico',
    '/static/base/imgs/favicon/ms-icon-144x144.png',
    '/static/base/leaflet-1.3.4/leaflet.css',
    '/static/base/leaflet-1.3.4/leaflet.js',
    '/static/base/bs4/css/map-styles.css',
    '/static/base/leaflet-usermarker-master/src/leaflet.usermarker.js',
    '/static/base/leaflet-usermarker-master/src/leaflet.usermarker.css',
    '/static/base/Leaflet.markercluster-master/dist/leaflet.markercluster-src.js',
    '/static/base/Leaflet.markercluster-master/dist/MarkerCluster.css',
    '/static/base/leaflet-draw/src/leaflet.draw.css',
    '/static/base/leaflet-draw/src/Leaflet.draw.js',
    '/static/base/drag/jquery.sortable.min.js',
    '/static/base/date-time/js/moment-locale.min.js',
    '/static/base/date-time/js/bootstrap-datetimepicker.min.js',
    '/static/base/date-time/css/bootstrap-datetimepicker.min.css',
    '/static/base/select-picker/css/select-picker.css',
    '/static/base/select-picker/js/select-picker.min.js',
    '/static/base/js/turf.min.js',
    '/static/base/js/util_v1.js',
    '/static/base/js/util_db_v1.js',
    '/static/base/localForage/localforage.min.js',
    '/static/base/localForage/localforage-getitems.js',
    '/static/base/localForage/localforage-setitems.js',
    '/static/base/localForage/localforage-startswith.js',
    '/static/base/js/progressbar.js',
    '/static/base/js/util_db_v1.js',
    '/static/base/js/moment.min.js',
    '/static/base/imgs/puntos/rojo.png',
    '/static/base/imgs/puntos/verde.png',
    '/static/base/imgs/puntos/amarillo.png',
    '/static/base/imgs/puntos/azul.png',
    '/static/base/leaflet.offline/dist/bundle.js',
    '/static/base/imgs/favicon/favicon-16x16.png',
    '/static/base/imgs/favicon/favicon-32x32.png',
    '/static/base/imgs/favicon/favicon-96x96.png',
    '/static/base/imgs/favicon/apple-icon-57x57.png',
    '/static/base/imgs/favicon/apple-icon-60x60.png',
    '/static/base/imgs/favicon/apple-icon-72x72.png',
    '/static/base/imgs/favicon/apple-icon-76x76.png',
    '/static/base/imgs/favicon/apple-icon-114x114.png',
    '/static/base/imgs/favicon/apple-icon-120x120.png',
    '/static/base/imgs/favicon/apple-icon-144x144.png',
    '/static/base/imgs/favicon/apple-icon-152x152.png',
    '/static/base/imgs/favicon/apple-icon-180x180.png',
    '/static/base/imgs/favicon/android-icon-192x192.png',
  ];
  var staticCacheName = 'pages-cache-v5';
  self.addEventListener('install', function(event) {
    event.waitUntil(
      caches.open(staticCacheName)
      .then(function(cache) {
        return cache.addAll(filesToCache);
      })
    );
  });
  self.addEventListener('fetch', function(event) {
    if (event.request.url.match( '^.*(\/app\/).*$' ) || event.request.url.match( '^.*(\/app/inicio\/).*$' ) || event.request.url.match( '^.*(\/app/sincronizacion\/).*$' ) || event.request.url.match( '^.*(\/app/mapa\/).*$' ) || event.request.url.match( '^.*(\/app/visita\/).*$' ) || event.request.url.match( '^.*(\/static\/).*$' )){
        event.respondWith(
        caches.match(event.request).then(function(response) {
          if (response) {
            return response;
          }
          return fetch(event.request).then(function(response) {
            if (response.status === 404) {
              return caches.match('internet-error.html');
            }
            return caches.open(staticCacheName).then(function(cache) {
              if (event.request.url.indexOf('test') < 0) {
                cache.put(event.request.url, response.clone());
              }
              return response;
            });
          });
        }).catch(function(error) {
          //console.log('Error, ', error);
          return caches.match('internet-error.html');
        })
      );
    }else{
      false
    }
  });
  self.addEventListener('activate', function(event) {
    console.log('Activando service worker...');
    var cacheWhitelist = [staticCacheName];
    event.waitUntil(
      caches.keys().then(function(cacheNames) {
        return Promise.all(
          cacheNames.map(function(cacheName) {
            if (cacheWhitelist.indexOf(cacheName) === -1) {
              console.log("Eliminando"+cacheName);
              return caches.delete(cacheName);
            }
          })
        );
      })
    );
  });
})();

这是在index.html上激活此类服务工作者的脚本

{% if browser_mobile %}
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register("{% url 'sw.js' %}")
      .then(function(registration){
        console.log('Registré el Service Worker: Paso a redirección',registration.scope);
        if (window.matchMedia('(display-mode: standalone)').matches) {
          var url = "{% url 'autentificacion:inicio' %}";
          window.location = url
        }else{
          console.log("This is NOT! running as standalone.");
        }
      })
      .catch(function(err){
        console.log('Falló la instalación del Service Worker: ', err);
      });
    });
  }
{% else %}

该服务人员有问题吗？有没有办法调试IOS服务工作程序安装？类似于chrome-dev工具？

服务工作者无法在IOS 12的离线模式下工作

0 个答案: