ブラウザやタブを閉じた時にindexedDBに何か保存したい。save on exit

Webアプリでブラウザやタブを閉じた時に、今表示している内容をIndexedDBに保存したい場合ってありますよね。 ブラウザやタブが閉じる時の発火するイベントbeforeunloadを使えば上手く行きそうですが、、、。例えばこんな風に、、、

window.addEventListener('beforeunload', () => {
      saveToIndexedDB({data});
});

結論

この方法では出来ません

理由

indexedDBの保存処理は非同期のためです。 保存が終わる前に落ちてしまい保存できないです。 逆に言うとbeforeunload内は同期処理しか上手く動かないという事。

回避策

localstorageを使う。

localStorageは同期処理で保存が出来る。なので、ウィンドウが閉じた時は一旦LocalStorageに保存してから次にアプリが起動した時にindexedDBに移動させるというやり方。

// 終了時の処理
window.addEventListener('beforeunload', () => {
      localStorage.setItem('unsavedData', {key: '123',  data: 'hogehoge'});
});
// 起動時の処理
const unsavedData = localStorage.getItem('unsavedData');
if (unsavedData) {
  saveToIndexedDb(unsavedData);
  localStorage.removeItem('unsavedData');
}

気持ち悪い方法ですが、とりあえずこれで回避は出来ます。

もう一つ試した方法はServiceWorkerですが、デスクトップでブラウザを閉じると保存されず断念しました。