選單
GSS 技術部落格
在這個園地裡我們將從技術、專案管理、客戶對談面和大家分享我們多年的經驗,希望大家不管是喜歡或是有意見,都可以回饋給我們,讓我們有機會和大家對話並一起成長!
若有任何問題請來信:gss_crm@gss.com.tw
1 分鐘閱讀時間 (267 個字)

PWA - IndexDB Implement

SWD_20210618-053746_1

  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完後同步下來,需要工在這邊非常多。

會需要做的系統分析量會非常大,所以如果是銜接後端系統且資料共用要考慮到如何同步的問題。 

申請免費憑證給K8S使用
如何在 .net上實作具有 plugin 機制的系統
 

評論

尚無評論
已經注冊了? 這裡登入
Guest
2024/05/19, 週日

Captcha 圖像