检查Angular SPA视图更改的高速缓存清单更新-Java 学习之路

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

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

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

3 回答

您可以在appcache update ready事件上添加事件侦听器 .

代码直接从HTML2-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);

回复于 2024-04-29T21:49:37+08:00

0
有点晚了但是为了防止其他人可能有这个问题use this module，您可以将其注入您的应用程序并检查应用程序清单中的任何更改视图更改并执行需要在您的应用程序中完成的操作！
```
appcache.checkUpdate().then(function() {
alert('There\'s an update available!'); });
```
回复于 2024-04-29T21:49:37+08:00

使用AngularJS时会更好 .

使用：ng-apcache

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

;

回复于 2024-04-29T21:49:37+08:00

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

3 回答

相关问题