Question

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

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

所有这一切都运行正常，除了一个警告：浏览器只会在重新加载页面时检查缓存清单更新，但由于应用程序是SPA，用户可能会长时间使用该应用程序（并且可以多次更改页面中的视图而无需重新加载应用程序的单个页面，这让我想到了我的问题。我是否可以添加某种JS，以便只要用户更改SPA中的视图而浏览器就会查找缓存清单更新，而无需用户重新加载页面本身。我唯一能想到的是每次视图更改时自动重新加载页面，从而迫使浏览器在每次视图更改时查找缓存清单更新，但这似乎是违反直觉的，因为它是SPA。

Answer 1

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

直接从HTML5-Rocks的AppCache guide复制代码。

// 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

有点晚了但是为了防止其他人提出这个问题use this module，您可以将其注入您的应用并检查您的应用在视图更改中的任何更改并执行需要的操作在您的应用中完成！

   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();
            }
        );
        );
    }
]);

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

3 个答案: