vite-plugin-pwa配置详解

news2024/11/25 0:51:58

vite-plugin-pwa配置详解

前提：前端域名和后端服务域名相同时，用window.open新开页面下载或者导出文件，项目中导出和下载功能失效，原因是，域名相同走缓存

实现service worker离线缓存以前需要自己编写sw.js文件内容，比较复杂。 谷歌提供了workbox-*库来协助写配置。
vite-plugin-pwa就是帮你使用workbox结合一些模板代码自动生成sw.js，实现0配置

一：vite-plugin-pwa的简单使用
  • 默认缓存所有的js.css.html
// vite.config.ts/js
import { VitePWA } from "vite-plugin-pwa";
export default {
  plugins: [
    VitePWA()
  ]
}
二：先看VitePWAOptions的配置
function VitePWA(userOptions?: Partial<VitePWAOptions>): Plugin[];
interface VitePWAOptions {
    // @default process.env.NODE_ENV or "production"
    mode?: 'development' | 'production';
    // @default 'public'
    srcDir?: string;
    // @default 'dist'
    outDir?: string;
    // @default 'sw.js'
    filename?: string;
    // @default 'manifest.webmanifest'
    manifestFilename?: string;
    // @default 'generateSW'
    strategies?: 'generateSW' | 'injectManifest';
    // @default same as `base` of Vite's config
    scope?: string;
    //`inline` - inject a simple register, inlined with the generated html
    //`script` - inject <script/> in <head>, with the `sr` to a generated simple register
    //`null` - do nothing, you will need to register the sw you self, or imports from `virtual:pwa-register`
    // @default 'auto'
    injectRegister: 'inline' | 'script' | 'auto' | null | false;
    // `prompt` - you will need to show a popup/dialog to the user to confirm the reload.
    // `autoUpdate` - when new content is available, the new service worker will update caches and reload all browser
    // @default 'prompt'
    registerType?: 'prompt' | 'autoUpdate';
    // @default true
    minify: boolean;
    manifest: Partial<ManifestOptions> | false;
    // @default false
    useCredentials?: boolean;
    workbox: Partial<GenerateSWOptions>;
    injectManifest: Partial<CustomInjectManifestOptions>;
    // @default "base" options from Vite
    base?: string;
    includeAssets: string | string[] | undefined;
  	// @default true
    includeManifestIcons: boolean;
  	// @default false
    disable: boolean;
    devOptions?: DevOptions;
  	// @default false
    selfDestroying?: boolean;
}

这里只重点介绍几个配置，其他感兴趣的自行查阅文档：

  • . strategies： 默认是generateSW然后去配置workbox;，如果你需要更多自定义的设置，可以选择injectManifest，那就对应配置injectManifest
  • . workbox： 是对应generateSW的配置，所有的workbox配置，最终将生成`sw.js文件

在这里插入图片描述

三：再看workbox的类型----GenerateSWOptions
type GenerateSWOptions = BasePartial & GlobPartial & GeneratePartial & RequiredSWDestPartial & OptionalGlobDirectoryPartial;

export interface GlobPartial {
    /**
     * A set of patterns matching files to always exclude when generating the
     * precache manifest. For more information, see the definition of `ignore` in
     * the `glob` [documentation](https://github.com/isaacs/node-glob#options).
     * @default ["**\/node_modules\/**\/*"]
     */
    globIgnores?: Array<string>;
    /**
     * Files matching any of these patterns will be included in the precache
     * manifest. For more information, see the
     * [`glob` primer](https://github.com/isaacs/node-glob#glob-primer).
     * @default ["**\/*.{js,css,html}"]
     */
    globPatterns?: Array<string>;
}

重点关注：

  • globPatterns: 最开始我们说配置会默认缓存所有的js.css.html，我是就是通过globPatterns实现的。如果想增加图片缓存可以在里面添加
  • globIgnores: 忽略不想缓存的资源
export interface GeneratePartial {
    /**
     * Any search parameter names that match against one of the RegExp in this
     * array will be removed before looking for a precache match. This is useful
     * if your users might request URLs that contain, for example, URL parameters
     * used to track the source of the traffic. If not provided, the default value
     * is `[/^utm_/, /^fbclid$/]`.
     *
     */
    ignoreURLParametersMatching?: Array<RegExp>;
    /**
     * When using Workbox's build tools to generate your service worker, you can
     * specify one or more runtime caching configurations. These are then
     * translated to {@link workbox-routing.registerRoute} calls using the match
     * and handler configuration you define.
     *
     * For all of the options, see the {@link workbox-build.RuntimeCaching}
     * documentation. The example below shows a typical configuration, with two
     * runtime routes defined:
     *
     * @example
     * runtimeCaching: [{
     *   urlPattern: ({url}) => url.origin === 'https://api.example.com',
     *   handler: 'NetworkFirst',
     *   options: {
     *     cacheName: 'api-cache',
     *   },
     * }, {
     *   urlPattern: ({request}) => request.destination === 'image',
     *   handler: 'StaleWhileRevalidate',
     *   options: {
     *     cacheName: 'images-cache',
     *     expiration: {
     *       maxEntries: 10,
     *     },
     *   },
     * }]
     */
    runtimeCaching?: Array<RuntimeCaching>;
    /**
     * Whether to create a sourcemap for the generated service worker files.
     * @default true
     */
    sourcemap?: boolean;
}

重点关注：

  • ignoreURLParametersMatching：默认无法缓存html后面带参数的页面，加上它忽略参数就可以缓存了
  • runtimeCaching: 运行时缓存，可以自定义配置各种类型的缓存，最后我们会详细介绍
  • sourcemap: 是否生成sourcemap，它记录了转换压缩后的代码所对应的转换前的源代码位置，方便定位问题
四：将上面的配置，应用到vite.config.ts/js文件
// vite.config.ts/js
import { VitePWA } from 'vite-plugin-pwa'
export default {
  plugins: [
    VitePWA({
      workbox:{
        globIgnores: ['static/js/**'],
        globPatterns: ["**/*.{js,css,html,ico,jpg,png,svg}"],
        ignoreURLParametersMatching: [/.*/],
        sourcemap：true,
      }
    })
  ]
}
五：自定义配置缓存

随着项目越来越庞大或者需求越来越复杂，有时候我们需要，缓存某些特定的路径文件，或者请求类型，以及单独设置js或者html的缓存时间和个数，这个时候我们就需要用到runtimeCaching配置

export interface RuntimeCaching {
    /**
     * This determines how the runtime route will generate a response.
     * To use one of the built-in {@link workbox-strategies}, provide its name,
     * like `'NetworkFirst'`.
     * Alternatively, this can be a {@link workbox-core.RouteHandler} callback
     * function with custom response logic.
     */
    handler: RouteHandler | StrategyName;
    /**
     * The HTTP method to match against. The default value of `'GET'` is normally
     * sufficient, unless you explicitly need to match `'POST'`, `'PUT'`, or
     * another type of request.
     * @default "GET"
     */
    method?: HTTPMethod;
  	/**
     * This match criteria determines whether the configured handler will
     * generate a response for any requests that don't match one of the precached
     * URLs. If multiple `RuntimeCaching` routes are defined, then the first one
     * whose `urlPattern` matches will be the one that responds.
     *
     * This value directly maps to the first parameter passed to
     * {@link workbox-routing.registerRoute}. It's recommended to use a
     * {@link workbox-core.RouteMatchCallback} function for greatest flexibility.
     */
    urlPattern: RegExp | string | RouteMatchCallback;
    options?: {
        /**
         * Configuring this will add a
         * {@link workbox-cacheable-response.CacheableResponsePlugin} instance to
         * the {@link workbox-strategies} configured in `handler`.
         */
        cacheableResponse?: CacheableResponseOptions;
        /**
         * If provided, this will set the `cacheName` property of the
         * {@link workbox-strategies} configured in `handler`.
         */
        cacheName?: string | null;
        /**
         * Configuring this will add a
         * {@link workbox-expiration.ExpirationPlugin} instance to
         * the {@link workbox-strategies} configured in `handler`.
         */
        expiration?: ExpirationPluginOptions;
    };
}

重点关注：

  • handler: 取缓存的策略，有五种

    type StrategyName = 'CacheFirst' | 'CacheOnly' | 'NetworkFirst' | 'NetworkOnly' | 'StaleWhileRevalidate';
    • CacheFirst：缓存优先
    • CacheOnly：仅使用缓存中的资源
    • NetworkFirst：网络优先
    • NetworkOnly：仅使用正常的网络请求
    • StaleWhileRevalidate：从缓存中读取资源的同时发送网络请求更新本地缓存

  • method: 默认是缓存get请求的资源，想缓存post的可以配置

  • urlPattern: 通过正则，字符或者函数形式匹配要缓存的资源类型

  • options自定义配置项

    • cacheableResponse: 缓存状态码正确的资源，比如200的
    • cacheName: 自定义缓存的类型名称
    • expiration: 设置缓存的时间，数量。超过数量就删除之前的

想解决我最开始抛出的，前后端域名相同，导致的下载或者导出失败问题，可以做如下配置：

// vite.config.ts/js
import { VitePWA } from 'vite-plugin-pwa'
export default {
  plugins: [
    VitePWA({
      workbox: {
        maximumFileSizeToCacheInBytes: 50000000,
        globPatterns: [],
        runtimeCaching: [
          {
            // 路径url中包含ai-synergy或者auth，handler设置成NetworkOnly
            urlPattern: /.*\/(ai-synergy|auth).*/,
            handler: 'NetworkOnly',
            options: {
              cacheName: 'ai-synergy|auth',
              cacheableResponse: {
                statuses: [200]
              }
            }
          }
        ]
      }
    })
  ]
}

最后是更加完善的自定义配置方案：

VitePWA({
    workbox: {
      globPatterns: [],
      runtimeCaching: [
        mode !== 'production'
          ? {
              urlPattern: ({ url }) => url.origin === 'https://xxx.list.com',
              handler: 'NetworkFirst',
              options: {
                cacheName: 'list',
                cacheableResponse: {
                  statuses: [200]
                }
              }
            }
          : {
              urlPattern: ({ url }) => url.origin === 'https://xxx.detail.com',
              handler: 'NetworkFirst',
              options: {
                cacheName: 'detail',
                cacheableResponse: {
                  statuses: [200]
                }
              }
            },
        {
          urlPattern: /.*\/(ai-synergy|auth).*/,
          handler: 'NetworkOnly',
          options: {
            cacheName: 'ai-synergy|auth',
            cacheableResponse: {
              statuses: [200]
            }
          }
        },
        {
          urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
          handler: 'CacheFirst',
          options: {
            cacheName: 'images',
            expiration: {
              // 最多20个图
              maxEntries: 20
            }
          }
        },
        {
          urlPattern: /.*\.js.*/,
          handler: 'StaleWhileRevalidate',
          options: {
            cacheName: 'js',
            expiration: {
              maxEntries: 30, // 最多缓存30个，超过的按照LRU原则删除
              maxAgeSeconds: 30 * 24 * 60 * 60
            },
            cacheableResponse: {
              statuses: [200]
            }
          }
        },
        {
          urlPattern: /.*\.css.*/,
          handler: 'StaleWhileRevalidate',
          options: {
            cacheName: 'css',
            expiration: {
              maxEntries: 20,
              maxAgeSeconds: 30 * 24 * 60 * 60
            },
            cacheableResponse: {
              statuses: [200]
            }
          }
        },
        {
          urlPattern: /.*\.html.*/,
          handler: 'StaleWhileRevalidate',
          options: {
            cacheName: 'html',
            expiration: {
              maxEntries: 20,
              maxAgeSeconds: 30 * 24 * 60 * 60
            },
            cacheableResponse: {
              statuses: [200]
            }
          }
        }
      ]
    },
  })

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/571487.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于SpringBoot+Vue的闲一品交易平台设计与实现

基于SpringBoot+Vue的闲一品交易平台设计与实现

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架下…
阅读更多...
MT4电脑版交易软件使用技巧有哪些？

MT4电脑版交易软件使用技巧有哪些？

MT4交易软件作为连接券商平台与投资者之间的纽带&#xff0c;不仅是外汇金融机构的首选交易平台&#xff0c;也因其显著的优势成为了外汇投资者进行网上交易的重要平台。而MT4交易软件又分为电脑版和手机版&#xff0c;因为大多数投资者进行外汇投资时使用的是MT4电脑版软件&am…
阅读更多...
Gradio的web界面演示与交互机器学习模型，接口自动刷新或连续刷新数据流《5》

Gradio的web界面演示与交互机器学习模型，接口自动刷新或连续刷新数据流《5》

通过在接口中设置liveTrue&#xff0c;可以使接口自动刷新。现在&#xff0c;一旦用户输入发生变化&#xff0c;界面就会重新计算。依然使用计算器的示例&#xff1a; 实时接口 import gradio as grdef calculator(num1, operation, num2):if operation "add":ret…
阅读更多...
浏览器原理+跨域+解决方案

浏览器原理+跨域+解决方案

原网址&#xff1a;浏览器部分笔记_浏览器不同窗口cookie共享吗_JackieChan_的博客-CSDN博客 一、浏览器存储对象 1.cookie cookie是一种纯文本文件&#xff0c;大小只有4kb&#xff0c;每次发送非跨域html请求时都会自动携带。特性如下&#xff1a; cookie一旦创建&#xff…
阅读更多...
华为开源自研AI框架昇思MindSpore应用案例：Pix2Pix实现图像转换

华为开源自研AI框架昇思MindSpore应用案例：Pix2Pix实现图像转换

目录 一、环境准备1.进入ModelArts官网2.使用CodeLab体验Notebook实例 在实际应用场景中&#xff0c;由于训练数据集不足&#xff0c;所以很少有人会从头开始训练整个网络。普遍的做法是&#xff0c;在一个非常大的基础数据集上训练得到一个预训练模型&#xff0c;然后使用该模…
阅读更多...
Java程序设计入门教程--主函数

Java程序设计入门教程--主函数

情形 在Java中&#xff0c;主函数就是主方法&#xff0c;即main()方法。它是Java应用程序的入口方法&#xff0c;也就是说&#xff0c;程序在运行的时候&#xff0c;第一个执行的方法就是main()方法&#xff0c;这个方法和其他的方法有很大的不同&#xff0c;比如方法的名字必…
阅读更多...
Python100天：01.初识python

Python100天：01.初识python

❝ 本教程计划通过100天的时间&#xff0c;每天分享一篇关于python的知识点&#xff0c;与大家一起学习python这门编程语言。 ❞ Python 对初学者来说是一门很棒的语言&#xff1a; 容易学 有一个积极的支持社区 在网络开发、游戏、数据科学方面提供多种机会。 Python的应用领域…
阅读更多...
PMP课堂模拟题目及解析（第13期）

PMP课堂模拟题目及解析（第13期）

121. 项目经理、团队成员以及若干干系人共同参与一次风险研讨会。已经根据风险管理计划生成并提供一份风险报告。若要为各个项目风险进行优先级排序&#xff0c;现在必须执行哪一项分析&#xff1f; A. 定量风险分析 B. 根本原因分析 C. 偏差分析 D. 定性风险分析 122. …
阅读更多...
Yarn资源调度详解

Yarn资源调度详解

第1章 Yarn资源调度器 思考&#xff1a; 1&#xff09;如何管理集群资源&#xff1f; 2&#xff09;如何给任务合理分配资源&#xff1f; Yarn是一个资源调度平台&#xff0c;负责为运算程序提供服务器运算资源&#xff0c;相当于一个分布式的操作系统平台&#xff0c;而MapRe…
阅读更多...
什么是产品操作手册？企业该怎样制作产品操作手册页面？

什么是产品操作手册？企业该怎样制作产品操作手册页面？

产品操作手册是一种用于指导用户如何正确使用和维护产品的文档。它通常包括产品的基本信息、操作步骤、安全警告、故障排除、维护方法等内容。产品操作手册对于企业来说非常重要&#xff0c;它不仅可以提高用户的使用体验&#xff0c;还可以为企业节省售后服务成本。本文将介绍…
阅读更多...
cython编译加密python源码

cython编译加密python源码

场景 python的解释特性是将py编译为独有的二进制编码pyc 文件&#xff0c;然后对pyc中的指令进行解释执行&#xff0c;但是 pyc的反编译却非常简单&#xff0c;可直接反编译为源码&#xff0c;当需要将产品发布到外部环境的时候&#xff0c;源码的保护尤为重要。 一、Cpython介…
阅读更多...
Java程序设计入门教程--标识符和关键字

Java程序设计入门教程--标识符和关键字

目录 标识符 标识符的约定 标识符 1. 定义 用来标识类名&#xff0c;变量名&#xff0c;方法名&#xff0c;类型名&#xff0c;数组名&#xff0c;文件名的有效序列称为标识符。简单地说&#xff0c;标识符就是一个名字。 2. 标识符命名规则 &#xff08;1&#xff09;大小…
阅读更多...
Tuxera for Mac2023中文版读写硬盘U盘工具

Tuxera for Mac2023中文版读写硬盘U盘工具

在日常生活中&#xff0c;我们使用Mac时经常会遇到外部设备不能正常使用的情况&#xff0c;如&#xff1a;U盘、硬盘、软盘等等一系列存储设备&#xff0c;而这些设备的格式大多为NTFS&#xff0c;Mac系统对NTFS格式分区存在一定的兼容性问题&#xff0c;不能正常读写。 那么什…
阅读更多...
算法|1.二分及其扩展

算法|1.二分及其扩展

算法|1.二分及其扩展 1、有序数组中找到num 题意&#xff1a;给定有序数组&#xff0c;在有序数组中找到指定数字&#xff0c;找到返回true&#xff0c;找不到返回false. 解题思路&#xff1a; 数组有序查找指定元素使用二分法L指针初始值设为0&#xff0c;R指针初始值设为…
阅读更多...
chatgpt赋能python：Python修改配置文件内容

chatgpt赋能python：Python修改配置文件内容

Python 修改配置文件内容 介绍 配置文件是软件开发中经常使用的一种文件&#xff0c;用于存储程序的配置参数。在实际开发中&#xff0c;我们经常需要修改配置文件内容来满足我们的需求。Python 提供了很多方法来操作配置文件&#xff0c;让我们能够方便地修改配置文件。 本…
阅读更多...
camunda如何部署到容器云Kubernetes

camunda如何部署到容器云Kubernetes

部署Camunda到Kubernetes需要以下步骤&#xff1a; 1、将Camunda打包成Docker镜像。 2、在Kubernetes中创建一个Deployment对象&#xff0c;用于定义Camunda应用程序的副本数量、容器镜像、环境变量、卷挂载等信息。例如&#xff0c;可以使用以下命令创建一个Deployment&…
阅读更多...
镜像二叉树和求二叉树最大深度（java）

镜像二叉树和求二叉树最大深度（java）

镜像二叉树和求二叉树最大深度 镜像二叉树。有些题目叫翻转二叉树。是同一个题。二叉树的最大深度 镜像二叉树。有些题目叫翻转二叉树。是同一个题。 题目描述&#xff1a;给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例&#xff1…
阅读更多...
从Redisson的RedissonSemaphore引发的信号量实际含义的思考

从Redisson的RedissonSemaphore引发的信号量实际含义的思考

Semaphore到底该如何使用 事情的起因是最近在看redisson的源码&#xff0c;刚好看到了RedissonSemaphore的acquire/release实现。 public RFuture<Void> releaseAsync(int permits) {if (permits < 0) {throw new IllegalArgumentException("Permits amount ca…
阅读更多...
微信小程序 基础模板引入sass的两种方法

微信小程序 基础模板引入sass的两种方法

推荐使用第二种方法 一、VSCode扩展引入&#xff08;旧&#xff09; 1.vscode搜索扩展 Easy Sass安装 2.微信开发者工具导入vscode安装的所有扩展 3.修改sass扩展配置 打开扩展目录 找到刚导入的sass扩展 打开package.json文件 改成这样 保存 4.重新打开此项目 配置完事 5.使…
阅读更多...
torch.distributed.launch多卡多机

torch.distributed.launch多卡多机

torch.distributed.launch命令介绍 我们在训练分布式时候&#xff0c;会使用到 torch.distributed.launch 可以通过命令&#xff0c;来打印该模块提供的可选参数 python -m torch.distributed.launch --help usage: launch.py [-h] [--nnodes NNODES] [--node_rank NODE_RANK]…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023