# h5-pwa-template

**Repository Path**: frontend-views/h5-pwa-template

## Basic Information

- **Project Name**: h5-pwa-template
- **Description**: 这是一个使用现代前端技术栈构建的渐进式 Web 应用（PWA）模板项目，采用了 webpack 5 构建系统和 Google Workbox PWA 开发库。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-30
- **Last Updated**: 2025-09-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PWA 示例项目

这是一个使用现代前端技术栈构建的渐进式 Web 应用（PWA）模板项目，采用了清晰的目录结构、webpack 5 构建系统和 Google Workbox PWA 开发库。

## 功能特性

- 🔄 **离线缓存** - 应用可以在离线状态下正常运行，提升用户体验
- 🆙 **自动更新** - 智能检测到新版本时提示用户更新
- 📱 **安装到桌面** - 支持添加到主屏幕，获得接近原生应用的体验
- 🌐 **网络状态检测** - 实时显示和响应网络连接状态变化
- ⚡ **开发热重载** - 支持开发环境下的模块热替换，提升开发效率
- 📦 **资源优化** - 自动进行代码分割、压缩和缓存优化

## 技术栈

- **前端基础**：HTML5 + CSS3 + JavaScript (ES6+)
- **构建工具**：webpack 5 + Babel
- **包管理**：npm
- **PWA 支持**：Google Workbox
- **代码规范**：ESLint

## 项目结构

```
├── public/               # 公共资源（直接访问的文件）
│   ├── index.html        # 主页面
│   ├── offline.html      # 离线备用页面
│   ├── manifest.json     # PWA配置文件
│   ├── mock-data.json    # 模拟数据
│   └── status-ui.html    # 状态UI模板
├── src/                  # 源代码
│   ├── css/              # 样式文件
│   ├── js/               # JavaScript代码
│   │   ├── app.js        # 主应用入口
│   │   ├── install.js    # 安装相关功能
│   │   └── modules/      # 模块化功能组件
│   └── icons/            # 应用图标（192x192 和 512x512）
├── webpack.config.js     # webpack构建配置
├── workbox-config.js     # Workbox配置文件
├── config.js             # 应用配置
├── env.config.js         # 环境配置
├── package.json          # 项目配置和依赖
└── README.md             # 项目说明文档
```

## 安装和使用

1. **安装依赖**
   ```bash
   npm install
   ```

2. **构建生产版本（包含Service Worker生成）**
   ```bash
   npm run build
   ```

3. **启动开发服务器**
   ```bash
   npm run dev
   ```

4. 访问 http://localhost:8080 查看应用

## Service Worker 说明

Service Worker 通过 webpack 中的 WorkboxPlugin.InjectManifest 插件自动生成，实现了以下核心功能：

1. **预缓存策略** - 自动缓存应用的核心资源（HTML、CSS、JS、图标等），确保离线可用
2. **运行时缓存** - 动态缓存 API 请求和其他资源
3. **网络优先策略** - 优先获取最新内容，离线或网络错误时使用缓存
4. **离线页面支持** - 当用户离线访问新页面时提供离线页面
5. **后台同步** - 支持离线时的请求队列和后台同步功能

缓存配置主要在 `public/sw.js` 和 `webpack.config.js` 中的 Workbox 插件配置中管理。

## 开发流程

1. 修改源代码（src目录下的文件）
2. 开发环境下，webpack-dev-server 会自动热重载变更
3. 构建生产版本时运行 `npm run build` 更新 Service Worker 和优化资源
4. 部署时确保所有生成的文件（包括 sw.js 和 manifest.json）都被正确发布

## 配置说明

- **webpack配置**：在 `webpack.config.js` 中可调整构建参数、入口、输出、插件等
- **环境配置**：通过 `env.config.js` 可配置不同环境的参数
- **PWA配置**：`public/manifest.json` 包含应用名称、图标、颜色等基础信息

## 注意事项

- 在生产环境中，建议使用 HTTPS 协议以确保所有 PWA 功能可用
- 每次修改 Service Worker 相关代码后，需要重新构建应用以更新 Service Worker
- 应用会在检测到新版本时提示用户更新，用户确认后会刷新页面应用新内容
- 静态资源应放置在 src 目录下相应的子目录中，以便被 webpack 正确处理

## 浏览器兼容性

支持所有现代浏览器，包括：
- Chrome 60+ 
- Firefox 67+ 
- Safari 11.1+ 
- Edge 79+ 

旧版浏览器可能无法完全支持某些PWA特性，如Service Worker和Web App Manifest。
- Firefox 58+ 
- Safari 11.1+ 
- Edge 17+