stenciljs 学习十一 pwa 支持

stenciljs 对于pwa 的支持是自动注入的，我们只需要简单的配置，stenciljs使用workbox

配置

• 默认配置

{
  skipWaiting: true,
  clientsClaim: true,
  globPatterns: [
    '**/*.{js,css,json,html,ico,png,svg}'
  ]
};

• 修改配置

  使用 stencil.config.ts 配置

export const config: Config = {
  outputTargets: [
    {
      type: 'www',
      serviceWorker: {
        globPatterns: [
          '**/*.{js,css,json,html,ico,png}'
        ]
      }
    }
  ]
};

自定义service worker 配置

修改配置的swSrc

export const config: Config = {
  outputTargets: [
    {
      type: 'www',
      serviceWorker: {
        swSrc: 'src/sw.js'
      }
    }
  ]
};

书评

使用脚手架工具可以帮助我们生成一些默认配置，还是很方便的

参考资料

https://stenciljs.com/docs/service-workers
https://github.com/ionic-team/stencil-site