vue3、vite、typescript项目集成PWA应用

网络混子.肥猫

已于 2024-07-23 16:15:21 修改

阅读量1k

点赞数 7

文章标签： typescript javascript 前端

于 2024-02-29 17:37:55 首次发布

本文链接：https://blog.csdn.net/qq_44724181/article/details/136374428

版权

本文介绍了如何在本地通过Vite构建PWA应用，包括配置manifest文件、工作box策略以实现离线缓存和安装提示。作者详细展示了Vite.config.ts中的配置以及在主入口处理安装事件的过程。

摘要由CSDN通过智能技术生成

需求

本地集成PWA，通过浏览器能正常访问并能安装应用程序
能成功安装且能通过桌面的图标正常打开;

参考文章

https://blog.csdn.net/weixin_43968658/article/details/132208534

注意：要使用localhost地址访问，不能使用ip地址；以下只是在我本地集成，并未在生产环境校验

安装PWA

npm install -D vite-plugin-pwa

vite.config.ts 文件配置

  plugins: [
     VitePWA({
         manifest: {
             name: 'PWA模板应用',
             short_name: 'PWA',
             id: 'cs001',
             start_url: ".",
             description: 'PWA应用模板测试',
             theme_color: '#182330',
             icons: [//添加图标， 注意路径和图像像素正确
                 {
                     src: '/pwa-512x512.png',public下
                     sizes: '512x512',//icon大小要与实际icon大小一致
                     type: 'image/png',
                     // form_factor: "handset",
                 },
             ]
         },
         registerType: 'autoUpdate',
         workbox: {
             globPatterns: ['**/*.{js,css,html,ico,png,jpg,svg}'],//缓存相关静态资源
             runtimeCaching: [// 配置自定义运行时缓存
                 mode !== 'production'
                     ? {
                         urlPattern: ({ url }) => url.origin === 'https://app-api-0.com',
                         handler: 'NetworkFirst',
                         options: {
                             cacheName: 'wisbayar-api',
                             cacheableResponse: {
                                 statuses: [200]
                             }
                         }
                     }
                     : {
                         urlPattern: ({ url }) => url.origin === 'https://app-api.id',
                         handler: 'NetworkFirst',
                         options: {
                             cacheName: 'wisbayar-api',
                             cacheableResponse: {
                                 statuses: [200]
                             }
                         }
                     },
                 {
                     urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
                     handler: 'CacheFirst',
                     options: {
                         cacheName: 'wisbayar-images',
                         expiration: {
                             // 最多30个图
                             maxEntries: 30
                         }
                     }
                 },
                 {
                     urlPattern: /.*\.js.*/,
                     handler: 'StaleWhileRevalidate',
                     options: {
                         cacheName: 'wisbayar-js',
                         expiration: {
                             maxEntries: 30, // 最多缓存30个，超过的按照LRU原则删除
                             maxAgeSeconds: 30 * 24 * 60 * 60
                         },
                         cacheableResponse: {
                             statuses: [200]
                         }
                     }
                 },
                 {
                     urlPattern: /.*\.css.*/,
                     handler: 'StaleWhileRevalidate',
                     options: {
                         cacheName: 'wisbayar-css',
                         expiration: {
                             maxEntries: 20,
                             maxAgeSeconds: 30 * 24 * 60 * 60
                         },
                         cacheableResponse: {
                             statuses: [200]
                         }
                     }
                 },
                 {
                     urlPattern: /.*\.html.*/,
                     handler: 'StaleWhileRevalidate',
                     options: {
                         cacheName: 'wisbayar-html',
                         expiration: {
                             maxEntries: 20,
                             maxAgeSeconds: 30 * 24 * 60 * 60
                         },
                         cacheableResponse: {
                             statuses: [200]
                         }
                     }
                 }
             ]
         },
         devOptions: {
             enabled: true
         }
     }),
 ],

main.ts

// 在主入口监听PWA注册事件
window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    window.deferredPrompt = e;
})

效果

以上配置成功之后，在浏览器应用 —> 清单里会有以下信息；其次路由出也有一个下载应用的icon。
在这里插入图片描述

项目中的应用场景

在这里插入图片描述

const createApp = () => {
  try {
    window.deferredPrompt.prompt()
    window.deferredPrompt.userChoice.then((choiceResult: any) => {
      console.log(choiceResult, 1111)
      if (choiceResult.outcome === 'accepted') {
       	 alert(`pwa`)
        // localStorage.setItem('addDesktop', true)
      } else {
        console.log('User dismissed the A2HS prompt')
      }
      window.deferredPrompt = null
    })
  } catch (error) {
    alert(`pwa出错了:${error}`)
  }
}