【Flutter Web】PWA應(yīng)用版本更新

問題:

PWA安裝到手機桌面之后,每次 Flutter Web 打包發(fā)布之后,第一次打開不能加載到最新的界面,關(guān)閉后,下一次打開才能加載最新的。

解決:

將下面代碼添加到 web/index.html 中 <script> 標簽里,后續(xù)通過修改 version 來更新版本

const version = 1;

const checkAppUpdate = function() {
  caches.open('sugar-cache').then(function(cache) {
    // 檢索版本號資源
    cache.match('/version').then(function(response) {
      if (response) {
        response.text().then(function(data) {
          var cachedVersion = parseInt(data, 1); // 將緩存的版本號轉(zhuǎn)換為整數(shù)
          if (version > 1 && cachedVersion < version) {
            // 緩存的版本號較舊,需要更新
            window.showToast("There is a new version");
            window.location.reload();

            // 將最新版本添加到緩存
            var versionResponse = new Response(version.toString());
            cache.put('/version', versionResponse);
          }
        });
      } else {
        // 版本號資源不存在于緩存中,需要添加到緩存
        var versionResponse = new Response(version.toString());
        cache.put('/version', versionResponse);
      }
    });
  });
}

const swRegister = function() {
  const SW = navigator.serviceWorker
  if ('serviceWorker' in navigator) {
    // "/serviceworker.js"  './service-worker.js'   flutter_service_worker.js
    SW.register('./flutter_service_worker.js').then((registration) => {
        // 捕獲到registration.installing觸發(fā)
        registration.onupdatefound = function(){
          const installingWorker = registration.installing;
          installingWorker.onstatechange = function(){
            // 發(fā)布時每次更新了新的內(nèi)容,用戶首次看到的是舊的內(nèi)容,要二次刷新的問題
            if(installingWorker.state === 'activated'){
              if(SW.controller){
                checkAppUpdate();
              }
            }
          }
        }
      },
      (err) => {
        console.log('ServiceWorker registration failed: ', err)
      }
    );
  }
}
swRegister();

參考:

https://blog.csdn.net/zmx_FZ/article/details/106206890

Service Worker 概覽 :
https://developer.chrome.com/docs/workbox/service-worker-overview?hl=zh-cn

PWA介紹:
https://web.dev/learn/pwa/service-workers?hl=zh-cn

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容