PWA配置

前端项目PWA配置

应用场景及现状

PWA从Google 2015 年推出这一技术标准以来，因具有良好的跨平台兼容性、离线访问、快速加载、节省空间、更新简便以及便捷的传播性而闻名，在国外有较大的应用市场。国内因为上有APP应用的快速、高度发展，下有小程序的火热，所以PWA反而少见。

---

最近正好接手一个需要PWA配置的项目，记录过程如下：

1、项目架构简诉

该项目以Nuxt3框架为基础，所以用nuxt官方推荐的vite-pwa-nuxt来实现。（直到2024年7月，Nuxt依然没有内置PWA，官方宣传会在2024年内完成）

2、PWA参数、文件配置

按照nuxt文档简单配置这个插件的引用，更多配置请见vite-pwa-nuxt官网

关键的配置在于里面的 pwa: {
/* PWA options */
}
这里贴出我自己的配置（nuxt.config.ts文件里）：

pwa: {
   manifest: {
     name: 'DBot',
     short_name: 'DBot',
     theme_color: 'rgb(13,13,14)', // 导航栏主题色
     background_color: 'rgb(13,13,14)',
     display: 'standalone', // 桌面应用的壳中h5显示方式，全屏、独立、最小UI或浏览器（一般设置standalone这个独立应用效果）
     description: 'Welcome to DBot, Let all DEX trading under your control', // 应用描述
     icons: [
       // 必须设置一个为png图且边上有一圈透明度的图标用于苹果系统的谷歌浏览器（如180x180规格），因为苹果系统打开谷歌浏览器安装的图标不会自动给图标做剪切来规范图标大小，图标在苹果桌面会很大。
       {
         src: '/pwaImg/win/bot_logo76.png',
         sizes: '76x76',
         type: 'image/png',
       },
       {
         src: '/pwaImg/ios/180x180_maskable.png', // 专门给苹果系统中打开谷歌等浏览器时取的图标
         sizes: '180x180',
         type: 'image/png',
       },
       {
         src: '/pwaImg/win/bot_logo192.png',
         sizes: '192x192',
         type: 'image/png',
       },
       {
         src: '/pwaImg/win/bot_logo256.png',
         sizes: '256x256',
         type: 'image/png',
       },
       {
         src: '/pwaImg/win/bot_logo512.png', // 开屏动画图
         sizes: '512x512',
         type: 'image/png',
       },
     ],
   },
   devOptions: {
     enabled: true,
     type: 'module',
   },
   // 取消注册 Service Worker
   // selfDestroying: true,

   // 配置 Service Worker 缓存策略

   // generateSW自动配置模式
   strategies: 'generateSW',
   registerType: 'autoUpdate',
   workbox: {
     globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
     runtimeCaching: [
       {
         urlPattern: 'https://localweb.dbotx.com/dashboard',
         handler: 'NetworkFirst', // 网络优先 详情可见: https://juejin.cn/post/7294554207096750090
         options: {
           cacheName: 'localweb-dbotx-cache',
           cacheableResponse: { statuses: [0, 200] },
         },
       },
     ],
   },
   injectManifest: {
     globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
   },

   // injectManifest手动配置模式，需要在public/sw.ts文件中自己配置
   // strategies: 'injectManifest',
   // srcDir: 'pages',
   // filename: 'sw.ts',
   // injectManifest: {
   //   injectionPoint: undefined,
   // },
 },

3、注意事项

上诉配置在windows系统下的谷歌等浏览器上显示是没问题的，但是还需要苹果端的兼容性配置（就这苹果的兼容性配置比较奇特麻烦），在图标制作上也很讲究，例如这张图{ property: ‘og:image’, content: ‘/pwaImg/ios/180x180.png’ },边框是不能有一丁点透明的，不然苹果会自己给图片加上一圈透明边，使得图标比预计更小。而pwa里的icons里的src: ‘/pwaImg/ios/180x180_maskable.png’，这张图又必须给它添加一圈透明度边，因为苹果里打开谷歌浏览器点安装pwa后，桌面上显示图标是不会被苹果自己加白边的，这时候图标就会比系统别的应用的图标明显大一圈。

app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      // pwa在IOS端的配置
      meta: [
        { property: 'og:url', content: 'https://xxxx.com' },
        { property: 'og:site_name', content: 'Ayong' },
        { property: 'og:image', content: '/pwaImg/ios/180x180.png' }, // 指定苹果safari浏览器获取的图标
        { name: 'theme-color', content: 'rgb(13,13,14)' },
        { name: 'apple-mobile-web-app-capable', content: 'yes' },
        { name: 'apple-mobile-web-app-status-bar-style', content: 'rgb(13,13,14)' },
        { name: 'format-detection', content: 'telephone=no' },
        {
          name: 'viewport',
          content: 'width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no',
        },
      ],
      // pwa在IOS端的配置
      link: [
        { rel: 'apple-touch-icon', href: '/pwaImg/ios/180x180.png' },
        // 以下配置为苹果系统下的开屏图片，实测没生效，且大多数国外的网站PWA都没配置
        {
          rel: 'apple-touch-startup-image',
          sizes: '640x920',
          href: '/pwaImg/ios/640x920.png',
          media: 'screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)',
        },
        {
          rel: 'apple-touch-startup-image',
          sizes: '768x1004',
          href: '/pwaImg/ios/768x1004.png',
          media: 'screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)',
        },
        {
          rel: 'apple-touch-startup-image',
          sizes: '1024x748',
          href: '/pwaImg/ios/1024x748.png',
          media: 'screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)',
        },
        {
          rel: 'apple-touch-startup-image',
          sizes: '1536x2008',
          href: '/pwaImg/ios/1536x2008.png',
          media:
            'screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)',
        },
        {
          rel: 'apple-touch-startup-image',
          sizes: '2048x1496',
          href: '/pwaImg/ios/2048x1496.png',
          media:
            'screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)',
        },
      ],
    },
  },

4、后记

苹果系统下的开屏动画图片按照网上的说法得配置在Link里，rel为 ‘apple-touch-startup-image’，但是配置后多个苹果系统版本下的safari浏览器实测都没生效，且大多数国外的网站PWA都没配置，若有懂的老哥告知一下，感激不尽！