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

問題:

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

解決:

將下面代碼添加到 web/index.html 中 <script> 標(biāo)簽里瓢省,后續(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)系作者
  • 序言:七十年代末馒胆,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子凝果,更是在濱河造成了極大的恐慌祝迂,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件型雳,死亡現(xiàn)場離奇詭異,居然都是意外死亡山害,警方通過查閱死者的電腦和手機纠俭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進店門浪慌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人权纤,你說我怎么就攤上這事钓简⌒谙耄” “怎么了?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵古掏,是天一觀的道長坐榆。 經(jīng)常有香客問我冗茸,道長,這世上最難降的妖魔是什么夏漱? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任豪诲,我火速辦了婚禮挂绰,結(jié)果婚禮上屎篱,老公的妹妹穿的比我還像新娘。我一直安慰自己葵蒂,他們只是感情好交播,可當(dāng)我...
    茶點故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著践付,像睡著了一般秦士。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上永高,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天隧土,我揣著相機與錄音,去河邊找鬼命爬。 笑死曹傀,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的饲宛。 我是一名探鬼主播皆愉,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼艇抠!你這毒婦竟也來了幕庐?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤练链,失蹤者是張志新(化名)和其女友劉穎翔脱,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體媒鼓,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡届吁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了绿鸣。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片疚沐。...
    茶點故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖潮模,靈堂內(nèi)的尸體忽然破棺而出亮蛔,到底是詐尸還是另有隱情,我是刑警寧澤擎厢,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布究流,位于F島的核電站辣吃,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏芬探。R本人自食惡果不足惜神得,卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望偷仿。 院中可真熱鬧哩簿,春花似錦、人聲如沸酝静。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽别智。三九已至宗苍,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間亿遂,已是汗流浹背浓若。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蛇数,地道東北人挪钓。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓碌上,卻偏偏與公主長得像,于是被迫代替她去往敵國和親浦徊。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,722評論 2 345

推薦閱讀更多精彩內(nèi)容