【发布时间】：2018-11-14 12:06:08
【问题描述】：
我已经被这个问题困扰了一段时间了。我进行了深入研究，并花了很多时间研究关于 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 或您正在编辑的整个函数，这样我就不会在集成回代码时犯任何错误。
【问题讨论】：
-
如果用户的浏览器注册了Service Worker，为什么在创建Service Worker的时候不通过浏览器的用户代理呢？这样你就不必处理 SW 用户代理了。
-
“通过”浏览器的用户代理是什么意思？如何做到这一点？
-
与
postMessage()，是一种方式。
标签： javascript browser-cache service-worker