文档中心

探索 DWeb 框架的无限可能,构建下一代高性能 Web 应用

pwa - 渐进式 Web 应用

pwa 插件将应用转换为渐进式 Web 应用(PWA),支持离线访问。

基本使用

Code
import { pwa } from '@dreamer/dweb';

plugins: [
  pwa({
    manifest: {
      name: 'My App',
      shortName: 'App',
    },
  }),
],

配置选项

必需参数

  • manifest - PWA Manifest 配置对象,包含:
  • - name - 应用名称(必需)
  • - short_name - 应用简短名称
  • - description - 应用描述
  • - theme_color - 应用主题色
  • - background_color - 应用背景色
  • - display - 显示模式('fullscreen' | 'standalone' | 'minimal-ui' | 'browser')
  • - start_url - 起始 URL
  • - scope - 作用域
  • - orientation - 方向('any' | 'natural' | 'landscape' | 'portrait' 等)
  • - icons - 图标列表数组
  • - shortcuts - 快捷方式数组
  • - related_applications - 相关应用数组
  • - prefer_related_applications - 是否首选相关应用
  • - lang - 语言
  • - dir - 目录('ltr' | 'rtl' | 'auto')

可选参数

  • serviceWorker - Service Worker 配置对象或 false(禁用),包含:
  • - swPath - Service Worker 文件路径
  • - scope - Service Worker 作用域
  • - cacheStrategy - 缓存策略('cache-first' | 'network-first' | 'stale-while-revalidate' | 'network-only' | 'cache-only')
  • - precache - 要缓存的资源数组
  • - runtimeCache - 运行时缓存规则数组
  • - offlinePage - 离线页面路径
  • manifestOutputPath - manifest.json 输出路径(相对于输出目录)
  • swOutputPath - Service Worker 输出路径(相对于输出目录)
  • injectLinks - 是否在 HTML 中自动注入 manifest 和 Service Worker 链接(默认 true)