当前位置：首页 > news >正文

渐进式 Web 应用程序：新的 FE 系统

news 来源：原创 2025/5/24 9:52:28

在企业环境中，我们通常认为稳定的互联网连接是理所当然的。然而，现实世界的条件经常挑战这一假设，可能会中断关键业务运营。本文详细介绍了我们如何将传统的纯在线 ERP 系统转变为具有弹性、支持离线的解决方案的更可靠的系统。通过利用基于浏览器的存储解决方案（如 IndexedDB）、采用同步机制以及使用渐进式 Web 应用程序（PWA）。

最初，该系统遵循传统的客户端服务器架构，其中所有业务逻辑都驻留在后端。虽然此体系结构在具有可靠连接的环境中运行良好，但它也带来了一些挑战：

网络中断期间的事务失败
停电期间失去销售机会
持续加载状态下的用户体验不佳
关键操作期间的数据丢失风险
最重要的是，由于缺乏快速服务而失去了客户。

因此，为了定义这一点，我们必须即兴发挥，看看如何让事情变得更好，并且由于最初不可用而没有连接性，我们使用渐进式 Web 应用程序（PWA）实施了一个离线系统，需要一些互联网，有效地将关键业务逻辑移动到前端，同时保持数据完整性和与核心 ERP 系统的同步。

一些核心组件：

IndexedDB 的 API 示例：对于离线数据存储和缓存，我们通过 Dexie.js 库使用 IndexedDB 来提供支持结构化数据存储的强大客户端数据库。下面是如何使用 Dexie 设置数据库的简单示例

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>// 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 indexDBtransactions: '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)
}
}
</code></span></span>

服务工作者：它们充当应用程序和网络之间的代理，通过缓存资源和拦截请求来启用离线功能，以确保关键数据在断开连接期间仍可访问。

//service workesr can be setup easily, recently by default nextJS apps do come with service workes with vite, you can use the vite-pwa plugin
后台同步：这使我们能够在网络再次可用时同步数据，确保交易不会丢失，并在连接恢复后自动进行更新。

系统架构流程
架构分为三个主要阶段：初始化、事务处理和同步。下面的流程图显示了数据在这些阶段之间的流动方式。

工作流程、初始化 trasanction 和 sync 概述

初始化阶段

当系统启动时，它会检查网络连接：

如果设备在线，它会从服务器获取最新的主数据并更新本地 IndexedDB。

如果设备处于离线状态，它会从 IndexedDB 加载数据，确保用户可以继续工作而不会中断。

事务处理

当用户执行新交易时：

本地数据经过验证并存储在 IndexedDB 中。

乐观 UI 更新用于立即向用户显示结果，从而提供流畅的响应式体验。

同步阶段

恢复连接后：

数据通过手动单击 sync 按钮或在某个特定时间范围后与服务器批量同步。

如果同步失败（例如，由于连接速度慢），则事务将添加到失败事务列表中，并在稍后重试。

由于我们在前端管理所有内容，因此我们的服务对保护客户信息有多么依赖。

认证和授权
在任何企业系统中，保护敏感用户信息都至关重要。我们的解决方案可确保：

基于 JWT 的身份验证用于安全用户会话。

基于角色的访问控制确保只有授权用户才能执行特定操作。

安全令牌存储使用基于浏览器的机制（如 localStorage）进行处理，以提高安全性。

为了降低使用本地存储的令牌的风险，我们：

在注销时触发用户令牌的安全删除。

确保在会话结束或用户退出系统时从 IndexedDB 中删除敏感数据。注意：如果事务未同步，我们会向已登录用户显示该交易，并强制他们在注销之前进行同步。

数据完整性和冲突解决

在客户端和服务器之间同步数据会带来潜在的数据完整性问题，尤其是在多个设备或用户离线更改同一数据时。要解决此问题，请执行以下操作：

在同步之前，我们会验证所有交易详情（例如数量、金额），以确保没有差异。

我们为每个事务分配唯一的 ID，以防止同步期间出现重复。

冲突解决策略用于处理离线时在多个设备上进行数据更改的情况。例如，我们使用时间戳方法。

我们尽量确保首先考虑 offline，因为它是系统的重要部分。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>async function resolveConflict(localTransaction, serverTransaction) {// Compare timestamps determine which transaction should prevailif (new Date(localTransaction.timestamp) > new Date(serverTransaction.timestamp)) {// Local transaction winsawait syncTransactionWithServer(localTransaction);} else {// Server transaction winsawait updateLocalTransaction(serverTransaction);}
}async function updateLocalTransaction(transaction) {// Update the local transaction in IndexedDB to reflect the server's stateawait db.transactions.put(transaction);
}
</code></span></span>

网络安全
鉴于连接恢复后，数据将通过网络传输，我们确保：

速率限制以防止滥用并确保过多的请求不会因 429 响应而使服务器不堪重负，因此我们最初使用批量更新。

在传输过程中使用 SSL/TLS 对数据进行加密。

令牌过期和安全令牌管理，确保从客户端存储中自动删除过时或过期的令牌。

PWA 和 IndexedDB 的替代品

虽然 IndexedDB 是 PWA 中客户端数据存储的可靠选择，但根据应用程序的复杂性和要求，还有其他选项可用：

通过 WebAssembly 的 SQLite （WASM）：一些开发人员选择通过 WASM 使用 SQLite 进行更高级的数据管理，尤其是在处理更大的数据集或复杂查询时。但是，通过 WASM 集成 SQLite 会带来额外的复杂性，例如性能问题和浏览器兼容性（例如 sqlite 如何使 Notion 更快）。

Web 存储 API （localStorage/sessionStorage）：对于不需要复杂查询或大型数据集的更简单的应用程序，Web 存储 API 可能是一个可行的替代方案。它更容易实现，但在存储容量和查询功能方面存在限制。

展望未来：PWA 的未来趋势

随着 Web 技术的不断发展，此类应用程序的可能性也在不断增加。新兴趋势包括：

WebAssembly 和 SQLite
边缘计算
高级同步协议：CRDT（无冲突复制数据类型）和 DeltaSync 等新兴协议

我自己也迫不及待地想探索这些技术将如何改变离线和分布式应用程序的格局。随着功能强大的机器和笔记本电脑的快速发展，我们有机会利用这种增强的计算能力为用户提供更复杂、更高效的软件。同时，我们不能忘记迎合移动设备和功能较差设备的重要性，确保我们的解决方案在所有平台上都可以访问和优化。潜力是巨大的，我很高兴能继续突破 PWA 的可能性界限。

一些核心组件：

*初始化阶段 *

事务处理

*同步阶段 *

PWA 和 IndexedDB 的替代品

展望未来：PWA 的未来趋势

相关文章：

初始化阶段

同步阶段