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

Posted 2023-02-19

【中文标题】检查 Angular SPA 视图更改的缓存清单更新

【英文标题】：Checking for Cache Manifest Updates on Angular SPA View Changes

【发布时间】：2015-07-10 12:12:29

【问题描述】：

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

使用缓存清单将所有静态资产保存到应用程序缓存。 每当检测到缓存清单文件中的更新时，使用将自动重新加载页面的 JS。通常这意味着，如果有更新，页面将在打开或刷新页面后不久重新加载。 设置 HTTP 标头，使静态资产不存储在普通浏览器缓存中（仅在 appcache 中）；这可确保自动重新加载行为始终显示最新的资产。

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

【问题讨论】：

根据我的信息，如果不重新加载页面，就无法 ping app-cahe。您还有一个问题，应用缓存更新在第一次重新加载时将不可见。由于应用缓存的工作方式，它仅在第二次重新加载时可见。

谢谢@Vishwanath。没错，更新后第一次加载页面时不会看到应用缓存更新，但可以让 JS 检查 updateready 事件并自动重新加载页面，而无需用户手动刷新。跨度>

【参考方案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);

【讨论】：

谢谢@Vishwanath，但这并不能完全回答我的问题。如您发布的代码的第一条评论中所述，这仅在页面加载时检查新的缓存清单，但我正在寻找将在 Angular SPA 视图更改时搜索新缓存清单的 JS，这不需要页面加载-- 事实上，它通常不会！

【参考方案2】：

有点晚了，但万一其他人可能有这个问题use this module，您可以将其注入您的应用程序并检查您的应用程序清单中的视图更改是否有任何更改，并在您的应用程序中执行需要执行的操作！

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

【参考方案3】：

当你使用 AngularJS 时这会更好。

使用：ng-apcache

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

;