檢查對角SPA查看緩存清單內容更新

使用緩存清單全部靜態資產保存到應用程序緩存。
使用JS將自動重新加載頁面，只要檢測到緩存清單文件中的更新。通常這意味着，如果有更新，頁面將在打開或刷新頁面後立即重新加載。
設置HTTP標頭，以便任何靜態資產都不存儲在普通瀏覽器緩存中（僅在appcache中）;這確保了自動重新加載行爲將始終顯示最新的資產。

所有這一切工作正常，但有一個警告：該瀏覽器將只檢查緩存清單更新時重新加載頁面，但由於應用程序是一個SPA，用戶可以令人信服地使用一個應用程序很長一段時間（並且在頁面內多次更改視圖），而無需重新加載應用程序的單個頁面，這引起了我的問題。有沒有我可以添加的某種JS，這樣，只要用戶在SPA中更改視圖時瀏覽器就會查找緩存清單更新，而用戶不必重新加載頁面本身。我能想到的唯一事情就是每次視圖更改時自動重新加載頁面，從而迫使瀏覽器在每次視圖更改時查找緩存清單更新，但由於它是SPA，這似乎與直覺相反。

來源

2015-04-30 Gerry

根據我的信息，如果不重新加載頁面，就無法ping通應用程序。您還有一個問題，應用程序緩存更新在第一次重新加載時不可見。由於app-cache的工作方式，它僅在第二次重新加載時纔可見。 – Vishwanath

謝謝@Vishwanath。您是對的，應用程序緩存更新在更新後的第一次加載頁面時不可見，但可以讓JS檢查updateready事件並自動重新加載頁面，而無需用戶手動刷新。 – Gerry

已添加答案... – Vishwanath

您可以在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);

來源

2015-05-05 13:07:56 Vishwanath

謝謝@Vishwanath，但這並不能完全回答我的問題。正如您發佈的代碼的第一條評論所述，這隻會在頁面加載時檢查新的緩存清單，但我正在尋找JS，它將在Angular SPA視圖更改上搜索新的緩存清單，而不需要頁面加載 - 事實上，它通常不會！ – Gerry

有點晚，但以防萬一，其他可能有這樣的質疑use this module，你可以把它注射到你的應用程序，併爲您在您的應用程序的清單上的觀點變化的任何變化，並做需要在你的應用程序做什麼！

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

來源

2016-12-02 12:27:43 limpCoder

當您使用AngularJS時，這會更好。

用途：ng-apcache

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

;

來源

2017-02-21 06:11:30 plampot

檢查對角SPA查看緩存清單內容更新

回答

相關問題