PWA 渐进式应用

逍遥图库支持 PWA（Progressive Web App），提供媲美原生应用的体验。

什么是 PWA

PWA 是一种现代 Web 应用技术，具有以下特点：

• 可安装 - 添加到桌面/主屏幕
• 离线访问 - 无网络也能使用
• 推送通知 - 实时消息推送
• 快速加载 - 资源缓存优化

功能特性

应用安装

将网站安装为独立应用，像原生 App 一样使用。

安装方法

桌面（Chrome）

1. 访问网站
2. 点击地址栏右侧的安装图标
3. 确认安装

手机（Android）

1. 访问网站
2. 点击「添加到主屏幕」提示
3. 或点击浏览器菜单 →「添加到主屏幕」

手机（iOS）

1. 使用 Safari 访问网站
2. 点击分享按钮
3. 选择「添加到主屏幕」

离线访问

即使没有网络，也可以访问已缓存的内容。

缓存策略

离线页面

当完全离线时，显示友好的离线提示页面。

推送通知

接收实时消息推送（需要用户授权）。

通知类型

• 评论通知
• 点赞通知
• 收藏通知
• 系统公告

开启推送

1. 浏览器会询问是否允许通知
2. 点击「允许」
3. 在设置中可以关闭

技术实现

Service Worker

Service Worker 是 PWA 的核心，处理离线缓存和推送。

// service-worker.js
const CACHE_NAME = 'zeaya-v1';
const urlsToCache = [
    '/',
    '/static/css/layout.css',
    '/static/js/app.js',
    '/offline.html'
];

// 安装时缓存资源
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(urlsToCache))
    );
});

// 请求拦截
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => response || fetch(event.request))
    );
});

Web App Manifest

定义应用的元数据。

// manifest.json
{
    "name": "逍遥图库",
    "short_name": "图库",
    "description": "现代化图库管理系统",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#1890ff",
    "icons": [
        {
            "src": "/static/img/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/static/img/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

图标要求

PWA 需要以下尺寸的图标：

配置说明

启用 PWA

PWA 功能默认启用，确保以下文件存在：

• /manifest.json - 应用清单
• /service-worker.js - Service Worker
• /offline.html - 离线页面
• /static/img/icons/ - 图标文件

自定义配置

编辑 manifest.json 修改应用信息：

{
    "name": "您的应用名称",
    "short_name": "简称",
    "theme_color": "#您的主题色",
    "background_color": "#背景色"
}

更新缓存

当发布新版本时，需要更新 Service Worker 的缓存版本：

const CACHE_NAME = 'zeaya-v2'; // 更新版本号

最佳实践

性能优化

1. 预缓存关键资源 - 首屏所需的 CSS、JS
2. 延迟加载非关键资源 - 图片懒加载
3. 使用合适的缓存策略 - 根据资源类型选择

用户体验

1. 提供离线提示 - 告知用户当前离线
2. 同步数据 - 联网后同步离线操作
3. 更新提示 - 有新版本时提示用户

推送通知

1. 不要滥用 - 只发送重要通知
2. 允许退订 - 让用户可以关闭
3. 个性化 - 根据用户偏好推送

Lighthouse 评分

使用 Chrome 的 Lighthouse 工具检测 PWA 评分。

检测方法

1. 打开 Chrome 开发者工具（F12）
2. 选择「Lighthouse」标签
3. 勾选「Progressive Web App」
4. 点击「Generate report」

评分标准

• ✅ 可安装
• ✅ 有 Service Worker
• ✅ 离线可用
• ✅ HTTPS
• ✅ 响应式设计
• ✅ 自定义启动画面
• ✅ 地址栏颜色设置

目标评分

逍遥图库的 PWA 评分目标：> 90 分

常见问题

1. 安装按钮没有出现

原因：

• 不是 HTTPS 环境
• manifest.json 配置错误
• 缺少必需的图标

解决：

• 使用 HTTPS
• 检查 manifest.json 格式
• 添加所需尺寸的图标

2. 离线访问不工作

原因：

• Service Worker 未注册
• 缓存资源失败

解决：

• 检查控制台错误
• 确认 Service Worker 状态
• 清除缓存重试

3. 推送通知收不到

原因：

• 用户未授权
• 浏览器不支持
• 服务器配置问题

解决：

• 检查通知权限设置
• 使用支持的浏览器
• 检查推送服务配置

浏览器支持

下一步

• 主题切换 - 主题功能
• 键盘快捷键 - 快捷键支持
• 性能优化 - 进一步优化