javascript - 将字符串附加到 Service Worker 中的用户代理

Question

我一直被这个问题困扰了一段时间。我进行了深入研究，并花了很多时间研究关于 SO 的类似问题 - 但没有成功。

一些背景知识。我有一个网站和一个 Android 应用程序，它可以有效地以不同的形式呈现网站，并具有不同的显示等......该应用程序知道从传入请求中执行此操作 - 因为用户有一个特定的字符串附加到用户代理(我们只是说字符串是“MobileAppRequest”)。在用户代理中检测到这个字符串后，服务器知道返回一个不同的 html 文件。这允许用户仍然通过他们的浏览器访问该网站并使用网络版本以及从他们的 Android 应用程序中获得应用程序体验。

现在，在使用 service worker 时，它默认为用户的标准用户代理，而不包括来自应用程序的附加字符串。然后这会在应用程序中返回网络版本，这会把它搞得一团糟。我需要知道如何设置自定义 header ，或者实际上，将字符串附加到服务 worker 中的用户代理。它说当我尝试直接更改 header 时 header 是不可变的，但我知道解决此问题的方法是发出新请求作为响应。

这是我的 SW.js

var CACHE_STATIC_NAME = 'static-v10';
var CACHE_DYNAMIC_NAME = 'dynamic-v2';

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/media/next.png',
          '/static/media/previous.png'
        ]);
      })
  )
});

self.addEventListener('activate', function (event) {
  console.log('[Service Worker] Activating Service Worker ....', event);
  event.waitUntil(
    caches.keys()
      .then(function (keyList) {
        return Promise.all(keyList.map(function (key) {
          if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) {
            console.log('[Service Worker] Removing old cache.', key);
            return caches.delete(key);
          }
        }));
      })
  );
  return self.clients.claim();
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request)
      .then(function(res) {
        return caches.open(CACHE_DYNAMIC_NAME)
                .then(function(cache) {
                  cache.put(event.request.url, res.clone());
                  return res;
                })
      })
      .catch(function(err) {
        return caches.match(event.request);
      })
  );
});

如果答案包含完整的 sw.js 或您正在编辑的整个函数，我将不胜感激，这样我就不会在重新集成到代码中时犯任何错误。

Answer 1

正如我在评论中提到的，如果您使用 postMessage()，您可以将任何您想要的数据传递给 Service Worker。

以下是使用您的脚本的示例。

webpage.html

<script>
  // creates ServiceWorker
  var worker = new Worker('SW.js');
  // sends the browser's userAgent to the ServiceWorker
  worker.postMessage(window.navigator.userAgent);
</script>

SW.js

var CACHE_STATIC_NAME = 'static-v10';
var CACHE_DYNAMIC_NAME = 'dynamic-v2';
// defines a global variable that will hold the UserAgent
var UA = '';

// listens to incoming postMessage()
self.addEventListener("message", function(event) {
  // update the UA variable with the event.data, which is the browser's UserAgent
  UA = event.data;
  console.log('ServiceWorker now has UA variable defined as ', UA);
}, false);

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/media/next.png',
          '/static/media/previous.png'
        ]);
      })
  )
});

self.addEventListener('activate', function (event) {
  console.log('[Service Worker] Activating Service Worker ....', event);
  event.waitUntil(
    caches.keys()
      .then(function (keyList) {
        return Promise.all(keyList.map(function (key) {
          if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) {
            console.log('[Service Worker] Removing old cache.', key);
            return caches.delete(key);
          }
        }));
      })
  );
  return self.clients.claim();
});

self.addEventListener('fetch', function(event) {
  // var myHeader = new Headers(event.request.headers);
  // myHeader.append('CUSTOMHEADER', 'CUSTOMVALUE');
  // you can now make a request using the passed UA
  event.respondWith(
    fetch(event.request, {credentials: 'same-origin', mode: 'cors', redirect: 'follow', userAgent: UA}).then(function(res) {
        return caches.open(CACHE_DYNAMIC_NAME)
                .then(function(cache) {
                  cache.put(event.request.url, res.clone());
                  return res;
                })
      })
      .catch(function(err) {
        return caches.match(event.request);
      })
  );
});

虽然浏览 SO 非常适合示例，但有时当您的选项有限时，最好引用文档。

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers