Question

我正在尝试使用CDN网络托管我的服务工作者，这允许跨源CORPs。然后我开始了解关于fetch API以访问跨Origin Resources。这里是我在Index.HTML上使用的代码，用于注册服务工作者

div {
            border: 1px solid black;
        }

        .div1 {
            height: 600px;
            width: 600px;
            position : relative;
        }

        .div2 {
            height: 300px;
            width: 300px;
            position : absolute;
            right : 0;
        }

        .div3 {
            height: 150px;
            width: 150px;
            position : absolute;
            bottom : 0;
        }

如何使用带有提取API的跨域跨服务工作者

Answer 1

你只是让服务工作者通过https工作的错误是不利的，不将其包含在你的html文件中，而是包含在另一个js文件中。

这可以称之为sw.js文件。将其包含在您的html或另一个js文件中。

var deferredPrompt;

if (!window.Promise) {
  window.Promise = Promise;
}

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('sw.js')
    .then(function () {
      console.log('Service worker registered!');
    })
    .catch(function(err) {
      console.log(err);
    });
}

window.addEventListener('beforeinstallprompt', function(event) {
  console.log('beforeinstallprompt fired');
  event.prompt();
  deferredPrompt = event;
  return false;
});

尝试此

self.addEventListener('fetch', function (event) {

  var url = 'https://httpbin.org/get'; //add your URL here 
  if (event.request.url.indexOf(url) > -1) {
    event.respondWith(
      caches.open(CACHE_DYNAMIC_NAME)
        .then(function (cache) {
          return fetch(event.request)
            .then(function (res) {
              // trimCache(CACHE_DYNAMIC_NAME, 3);
              cache.put(event.request, res.clone());
              return res;
            });
        })
    );
  } else if (isInArray(event.request.url, STATIC_FILES)) {
    event.respondWith(
      caches.match(event.request)
    );
  } else {
    event.respondWith(
      caches.match(event.request)
        .then(function (response) {
          if (response) {
            return response;
          } else {
            return fetch(event.request)
              .then(function (res) {
                return caches.open(CACHE_DYNAMIC_NAME)
                  .then(function (cache) {
                    // trimCache(CACHE_DYNAMIC_NAME, 3);
                    cache.put(event.request.url, res.clone());
                    return res;
                  })
              })
              .then(function (err) {
                return caches.open(CACHE_STATIC_NAME)
                  .then(function (cache) {
                    if (event.request.headers.get('accept').includes('text/html')) {
                      return cache.match('offline.html');
                    }
                  });
              });
          }
        })
    );
  }
});



self.addEventListener('install', function (event) {
  console.log('[Service Worker] Installing Service Worker ...', event);
  event.waitUntil(
    caches.open(CACHE_STATIC_NAME)
      .then(function (cache) {
        console.log('[Service Worker] Precaching App Shell');
        cache.addAll(STATIC_FILES);
      })
  )
});

我们可以从跨域注册服务工作者吗？

1 个答案: