服务人员:如何为每个新部署构建“新鲜”版本的网站？
服务人员:如何为每个新部署构建“新鲜”版本的网站？
提问于 2016-11-06 04:52:21
问题
我在生产中遇到了一个网站(构建的w/ 聚合物车间模板)的问题，尽管我的新部署和改进了的部署，它仍然在为旧版本的代码提供服务。
我使用Polymer $ polymer build命令沿w/ Firebase Tools $ firebase deploy命令将更改推到Firebase宿主。部署完成后，我导航到网站，只会看到未更新的更改：
- Chrome:我首先看到的是网站的旧版本，必须“硬刷新”才能出现更改。
- FireFox: --我首先看到的是网站的旧版本，必须“硬刷新”才能出现更改。
以下是拍摄前n‘之后的照片：
服务工作流程？
我想弄清楚什么是最好的工作流程。我想设置好这样，每次我进行新的部署时，整个站点都被清除干净，服务人员通过网际网重新设置自己，我将100%地确定现有用户将获得新部署的体验。
无需硬刷新或使用隐名模式。
我该不该..。
- 删除服务工作人员并在没有它的情况下部署新版本(坏主意)？
- 在Firebase控制台中创建一个“新项目”，并将自定义域重新链接起来(乏味)？
- 找到“魔术按钮”按在Firebase控制台内重置(这是否存在)？
- 编辑
sw-precache-config.js文件(不确定如何编辑)？ - 在
$ polymer build中处理此操作以配置sw-precache(不确定如何配置)？ - 一些根本不知道
¯\_(ツ)_/¯的东西？
我知道sw-precache-config.js文件中存在问题，但我不确定这是否应该修复这个问题。
module.exports = {
staticFileGlobs: [
'/index.html',
'/manifest.json',
'/bower_components/webcomponentsjs/webcomponents-lite.min.js',
'/images/*'
],
navigateFallback: '/index.html',
navigateFallbackWhitelist: [/^(?!.*\.html$|\/data\/).*/],
runtimeCaching: [
{
urlPattern: /\/data\/images\/.*/,
handler: 'cacheFirst',
options: {
cache: {
maxEntries: 200,
name: 'items-cache'
}
}
},
{
urlPattern: /\/data\/.*json/,
handler: 'fastest',
options: {
cache: {
maxEntries: 100,
name: 'data-cache'
}
}
}
]
};服务人员是一个了不起的工具，我绝对希望它在我的项目。我只需要学习如何驯服野兽。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-06 05:55:12
我不知道聚合物，但这是我通常做的服务人员的流程。
- 在客户端，我检查是否有更新，应用程序通知用户，如果他/她想更新。
- 用户接受新版本，然后客户端向skipWating发送消息到sw。 client.js:
navigator.serviceWorker.register('/serviceWorker.js').then(function(reg) {
reg.addEventListener('updatefound', function() {
reg.installing.addEventListener('statechange', function() {
if (reg.installing.state == 'installed') {
// Notify the user, there is a app new version.
// User accept
reg.installing.postMessage({msg: 'skipwaiting'});
}
});
});
});-In --如果用户接受新版本，服务工作者将侦听消息、和skipWating。
serviceWorker.js:
self.addEventListener('message', function(event) {
if (event.data.msg === 'skipwaiting') {
self.skipWaiting();
}
});客户端在服务工作人员具有更改状态后刷新应用程序。client.js:
let refreshing;
navigator.serviceWorker.addEventListener('controllerchange', function() {
if (refreshing)
return;
window.location.reload();
refreshing = true;
});也许这能给你个主意。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40446098
复制相关文章
相似问题
腾讯云开发者
