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

有时连接性会成为瓶颈。

在企业环境中，我们经常将稳定的互联网连接视为既定的事情。然而，现实世界的情况经常挑战这一假设，可能会扰乱关键业务运营。本文详细介绍了我们如何将传统的在线 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插件
后台同步：这使我们能够在网络再次可用时同步数据，确保交易不会丢失，并且在连接恢复后自动进行更新。

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

*初始化阶段*

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

如果设备在线，它会从服务器获取最新的主数据并更新本地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 的可能性界限。

注意：下一步是什么

我们会处理好事情的。使用 Djuix.io 作为后端，使用 React / Angular 作为前端，我们将实现一个适当的基本流程。请继续关注更多更新，我们将继续增强构建出色应用程序的方法。

无论如何，我希望你喜欢这个并学到一些新东西。我当然做到了。我也很想听听您的想法和经历。

到那时。

以上是渐进式 Web 应用程序：新的 FE 系统的详细内容。更多信息请关注PHP中文网其他相关文章！