Question

我已将此代码加载到我的移动网站的index.html中：

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/theme/website_mobile/sw.js').then(function(reg) {

if(reg.installing) {
  console.log('Service worker installing');
} else if(reg.waiting) {
  console.log('Service worker installed');
} else if(reg.active) {
  console.log('Service worker active');
}

}).catch(function(error) {
// registration failed
console.log('Registration failed with ' + error);
});
}

在sw.js中，我添加了以下代码：

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/',
        '/theme/website_mobile/js',
        '/theme/website_mobile/css',
        '/theme/website_mobile/js.js',
        '/theme/website_mobile/css.css',
        '/js/614cd8e.js',
        '/css/f1407bb.css',
        '/js/93779bc.js',
        '/js/d228ec7.js',
        '/theme/website_mobile/img/slider-home/slider1.jpg',
        '/theme/website_mobile/img/slider-home/slider2.jpg',
        '/theme/website_mobile/img/slider-home/slider3.jpg',
        '/theme/website_mobile/img/slider-home/slider4.jpg',
        '/theme/website_mobile/img/logo-website.png',
        '/theme/website_mobile/img/picto-menu-close.png',
        '/theme/website_mobile/img/picto-close.png',
        '/var/website/storage/images/media/website-medias/website-materials/5163440-1-eng-GB/website-materials_article_list_main_website_enm.jpg',
        '/theme/website_mobile/fonts/website-montserrat/Montserrat-Light.woff2',
        '/theme/website_mobile/fonts/website-montserrat/Montserrat-Regular.woff2',
        '/theme/website_mobile/fonts/website-montserrat/Montserrat-ExtraBold.woff2',
        '/theme/website_mobile/fonts/website-avenir/Fonts/065a6b14-b2cc-446e-9428-271c570df0d9.woff2',
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request).then(function(response) {
    // caches.match() always resolves
    // but in case of success response will have value
    if (response !== undefined) {
      return response;
    } else {
      return fetch(event.request).then(function (response) {
        // response may be used only once
        // we need to save clone to put one copy in cache
        // and serve second one
        let responseClone = response.clone();

        caches.open('v1').then(function (cache) {
          cache.put(event.request, responseClone);
        });
        return response;
      }).catch(function (e) {
        return caches.match('/');
      });
    }
  }));
});

sw.js已激活，我在控制台上没有任何错误，但如果我将网络脱机，则无法正常工作。

我认为这是一个范围问题，但我不知道如何让它发挥作用。

我的第一个脚本在index.html中，我的sw.js位于文件夹/theme/website_mobile/sw.js中，我的网站从服务器上的多个位置加载一些资源。

有没有办法让它在不移动我的sw.js的情况下工作？

Answer 1

不，我猜不是。范围定义了您的SW可以缓存的内容，以及它活动的位置！

单个服务工作者可以控制许多页面。每次一页在您的范围内加载，安装服务工作者该页面并对其进行操作。

来自mozilla

因此，您的服务将在 https://yourdoma.in/theme/website_mobile/

下面的网页上激活

服务工作者范围问题

1 个答案: