📚 Angular 离线文档指南

Angular 应用通过 Service Worker 实现离线功能，使用户在无网络环境下仍可访问关键内容。以下是核心实现方式：

🧰 1. 基础配置

• 安装依赖：

  npm install --save workbox-cli
  

• 生成 sw.js 缓存清单：

  npx workbox generate-sw --import-assets ./assets/**/*.{js,css,ico,png,jpg,svg}
  

• 在 angular.json 中启用离线支持：

  "assets": [
    "src/assets",
    "projects/your-project-name/assets",
    "dist/your-project-name"
  ]
  

🚀 2. 离线使用场景

• 🌐 离线访问：通过缓存静态资源（如 /assets/angular.png）保证页面加载
• 💾 数据缓存：使用 CacheStorage 缓存 API 响应（需配合 ngsw-config.json）
• ⚠️ 网络不稳定：通过 workbox-routing 实现网络状态智能切换

📌 3. 关键技术点

• ✅ Manifest 配置：在 ngsw-config.json 中定义缓存策略

  {
    "globPatterns": ["**/*.js", "**/*.css"],
    "ignoreURLParameters": ["^utm_"]
  }
  

• 📁 缓存目录结构：

  /offline/
    ├── index.html
    ├── angular.png
    └── manifest.json
  

• 🔄 缓存更新机制：通过 workbox-strategies 实现缓存优先 + 网络回退

📝 4. 扩展阅读

如需深入了解 Angular 的离线工作原理，点击此处查看官方文档 获取更详细的配置说明。