javascript - service worker 不在现场工作，而是在本地工作

Question

用于实时和本地网站的 sw.js

var version = 'v1.1.0:';

var theme_path = 'wp-content/themes/twentysixteen/';

var offlineFundamentals = ['./'];

//Add core website files to cache during serviceworker installation
var updateStaticCache = function() {
  return caches.open(version + 'fundamentals').then(function(cache) {
    return Promise.all(offlineFundamentals.map(function(value) {
      var request = new Request(value);
      var url = new URL(request.url);
      if (url.origin != location.origin) {
        request = new Request(value, {mode: 'no-cors'});
      }
      return fetch(request).then(function(response) { 
        var cachedCopy = response.clone();
        return cache.put(request, cachedCopy); 

      });
    }))
  })
};

//Clear caches with a different version number
var clearOldCaches = function() {
  return caches.keys().then(function(keys) {
      return Promise.all(
                keys
                  .filter(function (key) {
                      return key.indexOf(version) != 0;
                  })
                  .map(function (key) {
                      return caches.delete(key);
                  })
            );
    })
}

/*
  limits the cache
  If cache has more than maxItems then it removes the first item in the cache
*/
var limitCache = function(cache, maxItems) {
  cache.keys().then(function(items) {
    if (items.length > maxItems) {
      cache.delete(items[0]);
    }
  })
}


/*
  trims the cache
  If cache has more than maxItems then it removes the excess items starting from the beginning
*/
var trimCache = function (cacheName, maxItems) {
    caches.open(cacheName)
        .then(function (cache) {
            cache.keys()
                .then(function (keys) {
                    if (keys.length > maxItems) {
                        cache.delete(keys[0])
                            .then(trimCache(cacheName, maxItems));
                    }
                });
        });
};


//When the service worker is first added to a computer
self.addEventListener("install", function(event) {
  event.waitUntil(updateStaticCache()
        .then(function() { 
          return self.skipWaiting(); 
        })
      );
})

self.addEventListener("message", function(event) {
  var data = event.data;

  //Send this command whenever many files are downloaded (ex: a page load)
  if (data.command == "trimCache") {
    trimCache(version + "pages", 25);
    trimCache(version + "images", 10);
    trimCache(version + "assets", 30);
  }
});

//Service worker handles networking
self.addEventListener("fetch", function(event) {

  //Fetch from network and cache
  var fetchFromNetwork = function(response) {
    var cacheCopy = response.clone();
    if (event.request.headers.get('Accept').indexOf('text/html') != -1) {
      caches.open(version + 'pages').then(function(cache) {
        cache.put(event.request, cacheCopy).then(function() {
          limitCache(cache, 25);
        })
      });
    } else if (event.request.headers.get('Accept').indexOf('image') != -1) {
      caches.open(version + 'images').then(function(cache) {
        cache.put(event.request, cacheCopy).then(function() {
          limitCache(cache, 10); 
        });
      });
    } else {
      caches.open(version + 'assets').then(function add(cache) {
        cache.put(event.request, cacheCopy);
      });
    }

    return response;
  }

  //Fetch from network failed
  var fallback = function() {
    if (event.request.headers.get('Accept').indexOf('text/html') != -1) {
      return caches.match(event.request).then(function (response) { 
        return response || caches.match(theme_path + 'offline.html');
      })
    } 
  }

  //This service worker won't touch the admin area and preview pages
  if (event.request.url.match(/wp-admin/) || event.request.url.match(/preview=true/)) {
    return;
  }

  //This service worker won't touch non-get requests
  if (event.request.method != 'GET') {
    return;
  }

  //For HTML requests, look for file in network, then cache if network fails.
  if (event.request.headers.get('Accept').indexOf('text/html') != -1) {
          event.respondWith(fetch(event.request).then(fetchFromNetwork, fallback));
    return;
      }

  //For non-HTML requests, look for file in cache, then network if no cache exists.
  event.respondWith(
    caches.match(event.request).then(function(cached) {
      return cached || fetch(event.request).then(fetchFromNetwork, fallback);
    })
  ) 
});

//After the install event
self.addEventListener("activate", function(event) {
  event.waitUntil(clearOldCaches()
        .then(function() { 
          return self.clients.claim(); 
        })
      );
});

service worker 在本地注册

if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
            navigator.serviceWorker.register(
                'http://localhost/wordpress/sw.js',
                {scope: '/wordpress/'}
            ).then(function(registration) {
                console.log('Registered',registration);
            }).catch(function(error) {
                console.log('Registration failed:', error);
            });
        });
    }

在线服务 worker 注册

if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
            navigator.serviceWorker.register(
                '/sw.js',
                {scope: '/'}
            ).then(function(registration) {
                console.log('Registered',registration);
            }).catch(function(error) {
                console.log('Registration failed:', error);
            });
        });
    }

本地站点 url

http://localhost/wordpress/

现场网址

https://test.careertuts.com

请帮忙。我已经尝试了很多但没有成功。在本地，此代码会缓存所有 css、js、图像和 url，但在实时上，它只会为第三方调用创建缓存。

Answer 1

使用实时服务器时需要使用 HTTPS。

Chrome 和 Firefox DevTools 中有一个选项可以通过 HTTP 启用服务 worker 以进行测试。