漸進式 Web 應用程式：新的 FE 系統-js教程-PHP中文網

有時連接性會成為瓶頸。

在企業環境中，我們經常將穩定的網路連線視為既定的事情。然而，現實世界的情況經常挑戰這個假設，可能會擾亂關鍵業務運作。本文詳細介紹了我們如何將傳統的線上 ERP 系統轉變為具有彈性離線解決方案的更可靠的系統。透過利用基於瀏覽器的儲存解決方案（例如 IndexedDB）、採用同步機制以及使用漸進式 Web 應用程式 (PWA)。

最初，系統遵循傳統的客戶端伺服器架構，所有業務邏輯都駐留在後端。雖然這種架構在具有可靠連接的環境中運作良好，但它也帶來了一些挑戰：

網路中斷期間交易失敗
停電期間失去銷售機會
持續載入狀態導致使用者體驗不佳
關鍵操作期間資料遺失的風險
最重要的是，由於缺乏快速的服務而失去客戶。

因此定義這一點，我們必須即興發揮，看看如何讓事情變得更好，並且在沒有連接的情況下進行，因為它最初不可用，我們使用漸進式網絡應用程序（PWA）實現了一個需要一些互聯網的離線系統，有效地移動了關鍵將業務邏輯傳輸到前端，同時保持資料完整性以及與核心ERP 系統的同步。

一些核心組件：

IndexedDB：對於離線資料儲存和緩存，我們透過 Dexie.js 函式庫使用 IndexedDB 來提供支援結構化資料儲存的強大客戶端資料庫。以下是如何使用 Dexie 設定資料庫的簡單範例

// Initialize IndexedDB using Dexie.js
import Dexie from 'dexie';

interface LocalUsers{
id:string;
name:string;
role:string;
dob:string;
phone_no:string
}

interface LocalTrx {
id: string;
syncId:string;
created_at:string;
amount:string;
isSynced:boolean;
modified:string;
}

export class ArticleDatabase extends Dexie {
  transaction!: Table<LocalTrx>;
  users!: Table<LocalUsers>;
  constructor(){
    super("articleDB")
    }

this.version(1).stores({
// define the fields you'll like to query by or find items by within the indexDB
    transactions: 'id, date, amount, isSynced',
    users: 'id, name, role'
 });
}
//create the db
export const db=new ArticleDatabase()

// Open the database
db.open().then(() => {
    console.log("Database opened successfully!");
  })
  .catch((error) => {
    console.error("Failed to open database:", error);
  });

// Adding a new transaction to IndexedDB
import db from ../db
async function addTransaction(transaction) {
try {
   const trx = await db.transactions.add(transaction)
   console.log("Trx added", trx)
} catch (err) {
    console.log("Failed creating trx", err)
}
}

登入後複製

Service Workers：它們充當應用程式和網路之間的代理，透過快取資源和攔截請求來啟用離線功能，以確保在斷開連接期間關鍵資料仍然可存取。

//serviceworkesr可以輕鬆設置，最近nextJS應用程式預設帶有vite的serviceworkes，您可以使用vite-pwa插件
後台同步：這使我們能夠在網路再次可用時同步數據，確保交易不會丟失，並且在連接恢復後自動進行更新。

系統架構流程
此架構分為三個主要階段：初始化、事務處理和同步。下面的流程圖顯示了資料如何在這些階段之間流動。

Progressive Web Apps: New FE systems

初始化階段

系統啟動時，會檢查網路連線：

如果裝置在線，它會從伺服器取得最新的主資料並更新本機IndexedDB。

如果裝置離線，它會從 IndexedDB 載入數據，確保使用者可以繼續工作而不會中斷。

交易處理

當使用者執行新交易時：

本地資料經過驗證並儲存在 IndexedDB 中。

樂觀的 UI 更新用於立即向使用者顯示結果，提供流暢且反應迅速的體驗。

同步階段

連線恢復後：

透過手動點擊同步按鈕或在一定時間範圍後將資料批次同步到伺服器。

如果同步失敗（例如，由於連線速度慢），則該交易將被加入到失敗事務清單中並稍後重試。

由於我們在前端管理一切，我們的服務對保護客戶資訊的依賴程度如何。

驗證與授權
在任何企業系統中，保護敏感使用者資訊至關重要。我們的解決方案確保：

基於 JWT 的身份驗證 用於安全使用者會話。

角色為基礎的存取控制確保只有授權使用者才能執行特定操作。

安全令牌儲存 使用基於瀏覽器的機制（例如 localStorage）進行處理，以提高安全性。

為了降低使用本地儲存的代幣的風險，我們：

登出時觸發安全刪除使用者令牌。

確保當會話結束或使用者從系統登出時從 IndexedDB 中刪除敏感資料。注意：如果事務未同步，我們會向登入使用者顯示該訊息，並強制他們在登出之前同步。

資料完整性與衝突解決

在客戶端和伺服器之間同步資料會帶來潛在的資料完整性問題，特別是在多個裝置或使用者離線變更相同資料的情況下。要解決這個問題：

我們在同步之前驗證所有交易詳細資訊（例如數量、金額），以確保不存在差異。

我們為每筆交易分配唯一的 ID，以防止同步過程中出現重複。

衝突解決策略用於處理離線時在多個裝置上進行資料變更的情況。例如，我們使用時間戳法。

//我們嘗試確保首先考慮離線，因為它是系統的重要部分。

// Initialize IndexedDB using Dexie.js
import Dexie from 'dexie';

interface LocalUsers{
id:string;
name:string;
role:string;
dob:string;
phone_no:string
}

interface LocalTrx {
id: string;
syncId:string;
created_at:string;
amount:string;
isSynced:boolean;
modified:string;
}

export class ArticleDatabase extends Dexie {
  transaction!: Table<LocalTrx>;
  users!: Table<LocalUsers>;
  constructor(){
    super("articleDB")
    }

this.version(1).stores({
// define the fields you'll like to query by or find items by within the indexDB
    transactions: 'id, date, amount, isSynced',
    users: 'id, name, role'
 });
}
//create the db
export const db=new ArticleDatabase()

// Open the database
db.open().then(() => {
    console.log("Database opened successfully!");
  })
  .catch((error) => {
    console.error("Failed to open database:", error);
  });

// Adding a new transaction to IndexedDB
import db from ../db
async function addTransaction(transaction) {
try {
   const trx = await db.transactions.add(transaction)
   console.log("Trx added", trx)
} catch (err) {
    console.log("Failed creating trx", err)
}
}

登入後複製

網路安全
鑑於連接恢復後資料將透過網路傳輸，我們確保：

速率限制是為了防止濫用並確保過多的請求不會因 429 回應而使伺服器不堪重負，這就是我們最初使用批量更新的原因。

使用 SSL/TLS 在傳輸過程中對資料進行加密。

令牌過期和安全性令牌管理，確保陳舊或過期的令牌自動從客戶端儲存中刪除。

PWA 和 IndexedDB 的替代方案

雖然 IndexedDB 是 PWA 中客戶端資料儲存的可靠選擇，但根據應用程式的複雜性和要求，還有其他選項可用：

透過 WebAssembly (WASM) 的 SQLite： 有些開發人員選擇透過 WASM 使用 SQLite 進行更高階的資料管理，特別是在處理更大的資料集或複雜的查詢時。然而，透過 WASM 整合 SQLite 會帶來額外的複雜性，例如效能問題和瀏覽器相容性（例如 sqlite 如何使 Notion 更快）。

Web 儲存 API（localStorage/sessionStorage）： 對於不需要複雜查詢或大型資料集的簡單應用程序，Web 儲存 API 可能是可行的替代方案。它更容易實現，但在儲存容量和查詢能力方面有限制。

展望未來：PWA 的未來趨勢

隨著網路技術的不斷發展，此類應用程式的可能性也在不斷發展。新興趨勢包括：

WebAssembly 和 SQLite
邊緣運算
進階同步協定：CRDT（無衝突複製資料類型）和 DeltaSync 等新興協定

我自己迫不及待地想探索這些技術將如何改變離線和分散式應用程式的格局。隨著功能強大的機器和筆記型電腦的快速發展，我們有機會利用這種增強的運算能力為使用者提供更複雜、更有效率的軟體。同時，我們絕不能忘記迎合行動裝置和功能較弱的裝置的重要性，確保我們的解決方案可在所有平台上存取和最佳化。潛力是巨大的，我很高興能夠繼續突破 PWA 的可能性界限。