如何配置Stencil PWA以实现正常离线运行？

配置问题根因 #

1. globPatterns 仅支持本地静态资源匹配
   Stencil 内置的 Service Worker 基于 Workbox 实现，globPatterns 配置项只会扫描构建后输出到 www 目录的本地文件，你填写的第三方远程 API 地址不属于本地构建产物，不会被预缓存规则识别，这部分配置完全无效。
2. 冗余的API缓存规则干扰
   你已经改用 @capacitor/store 缓存接口数据，原配置中残留的远程API预缓存规则没有实际作用，还可能干扰Service Worker的注册逻辑。

修复方案 #

调整 stencil.config.ts 配置如下即可：

import { Config } from '@stencil/core';

export const config: Config = {
  globalScript: 'src/global/app.ts',
  globalStyle: 'src/global/app.css',
  taskQueue: 'async',
  outputTargets: [
    {
      type: 'www',
      serviceWorker: {
        globPatterns: [
          // 仅保留本地静态资源匹配规则，可按需添加webmanifest后缀
          '**/*.{js,css,json,html,ico,png,webmanifest}',
        ],
      },
    },
  ],
};

生效检查项 #

• 必须打生产环境包测试，不要在开发模式下验证离线功能，dev模式下Service Worker默认不会启用完整缓存逻辑
• 首次访问应用时需等待Service Worker完成全部静态资源的注册缓存，再断开网络测试
• 确认项目的 manifest.webmanifest 配置符合PWA要求，包含必填的 start_url、display 等字段

内容的提问来源于stack exchange，提问作者Jim Hessin