时间戳

首页 > 解决方案 > 将字符串附加到 Service Worker 中的用户代理

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

问题描述

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

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

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

这是我的 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 或您正在编辑的整个函数，这样我就不会在集成回代码中犯任何错误。

标签： javascriptbrowser-cacheservice-worker

解决方案

正如我在评论中提到的，如果你使用postMessage().

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

网页.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

推荐阅读