vite pwa项目使用

pwa介绍：

PWA(Progressive Web App):就是一种网页应用，可以离线使用，变成独立应用安装到系统中。

渐进式网页应用

是一种基于网页的应用，但它和传统的Web App有些不同，以下是不同点：

离线&轻量

离线可用 跟普通的网页没啥区别，加载飞快，启动飞快

轻量不需要去App Store来安装

PWA是一个依赖于浏览器的应用，浏览器拿不到的权限它都别想拿到，对隐私是很有保障

原理：

vite-plugin-pwa

vite-plugin-pwa是vite的一个官方插件，它的功能就是通过简单的配置将你的vite项目变成pwa应用，其关于service worker的实现直接采用的谷歌开源库workbox，workbox内部帮你对缓存做了大量的逻辑代码处理，并且也支持非常多种不同的缓存策略，并且也封装好了sw.js文件的更新策略，另外它的配置也非常简单。有时候站在巨人的肩膀上是更好的一种选择。

使用

安装

yarn add vite-plugin-pwa --dev

接着在vite-config.js中配置好就行

 VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.svg'],
      manifest: {
        name: '哈哈哈哈哈哈',
        short_name: 'Vitesse',
        theme_color: '#ff0',
        icons: [
          {
            src: '/pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: '/pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
          {
            src: '/pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'any maskable',
          },
        ],
      },
      devOptions: {
        enabled: true,
      },
    }),

效果图：