PWA可以做網頁站存離線使用,而當離線時網頁功能需要使用的資料,也可以由IndexDB來作暫存。而過往在寫後端資料庫程式時,會習慣將資料存取放一層,資料邏輯放一層來做程式設計,IndexDB也可以如此撰寫,為比較不同的是,後端程式資料庫大部分以 try…catch來作錯誤處理,而IndexDB較建議以promise的方式來進行。
以下是資料邏輯層的撰寫方式展示:
如上圖,一開始會先開啟資料庫,和撰寫後端資料庫相比有"初始連線"的意思。一個數據庫一次只能有一個版本。在首次建立資料庫時,它的初始版本編號為 0。建立資料庫之後,資料庫(和它的物件儲存)只能通過一種稱為 versionchange 的特殊型別的事務來更改。要在建立資料庫後更改它,必須開啟具有更高版本的資料庫。此操作會觸發 upgradeneeded事件。修改資料庫或物件儲存的程式碼必須位於 upgradeneeded 事件處理函式中。
資料庫的開啟可以參考:
https://developer.mozilla.org/zh-TW/docs/Web/API/IndexedDB_API/Using_IndexedDB#open
當資料庫準備妥當後,順著promise的then API接下來即為插入資料、更新資料,而最後的 catch API 則是攔截錯誤與對應適當的處理。
資料存取的參考可於以下查閱,如同API的方式使用:
https://developer.mozilla.org/zh-TW/docs/Web/API/IndexedDB_API
接著要展示的是實際上存到IndexDB的內容。如下:
可以透過開發工具,點選Application頁籤,於左方點選 IndexDB,可以看到程式所建立的資料表,以此例在點選資料表 AusViewTable,於右方可見到此資料表內的資料。每筆資料有自己的Key,資料儲存方式是JSON。
這邊要特別指出的是,IndexDB不像是一般的關聯式資料庫,可以做table join。這點在系統設計上,會麻煩許多:
1. 系統需要同步的資料非常多,如果後端資料非常複雜,但是到了PWA系統的IndexDB無法再進行SQL join, 最多只能多個條件的查詢資料。
2. 承1,IndexDB 的資料必須是 join 完成的結果集,也就是畫面要什麼資料集可能須先Server Join完後同步下來,需要工在這邊非常多。
會需要做的系統分析量會非常大,所以如果是銜接後端系統且資料共用要考慮到如何同步的問題。