检查Angular SPA视图更改的缓存清单更新

Question

我有一个离线友好的Angular SPA设置如下：

• 使用缓存清单将所有静态资产保存到应用程序缓存
• 使用JS，只要检测到缓存清单文件中的更新，就会自动重新加载页面。通常这意味着，如果有更新，页面将在打开或刷新页面后不久重新加载
• 设置HTTP头，以便没有任何静态资产存储在正常的浏览器缓存中(仅存储在appcache中)；这样可以确保自动重新加载行为始终显示最新的资产

所有这些都很好，但有一点需要注意：浏览器只会在重新加载页面时检查缓存清单更新，但由于该应用程序是SPA，用户可能会长时间使用该应用程序(并多次更改页面内的视图)，而无需重新加载应用程序的单个页面，这就引出了我的问题。我是否可以添加某种JS，以便每当用户在SPA中更改视图时，浏览器都会查找缓存清单更新，而无需重新加载页面本身。我唯一能想到的就是每次视图更改时自动重新加载页面，从而迫使浏览器在每次视图更改后查找缓存清单更新，但这似乎违反了直觉，因为这是一个SPA。

Answer 1

您可以在appcache更新就绪事件上添加事件侦听器。

代码直接从HTML5 Rocks的AppCache指南中复制。

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);

Answer 2

稍晚，但为了防止其他人使用此模块时有此问题，您可以将其注入您的应用程序，并在应用程序的视图更改清单中检查任何更改，然后在应用程序中执行需要执行的操作！

appcache.checkUpdate().then(function() {
alert('There's an update available!'); });

Answer 3

使用AngularJS时效果会更好。

使用：ng apcache

angular.module('myApp')
.controller('indexCtrl', ['appcache',
function(appcache){
appcache.checkUpdate()
.then(
function(value){
$window.location.reload();
}
);
);
}
]);