PWA vue

最新推荐文章于 2024-07-15 20:05:37 发布

思绪万千133

最新推荐文章于 2024-07-15 20:05:37 发布

阅读量181

点赞数

文章标签： vue 缓存

本文链接：https://blog.csdn.net/u013611033/article/details/108360424

版权

1 .vue cli3 创建项目时，勾选上pwa模式

2 vue add pwa 执行该命令获取pwa功能

3 新建vue.config.js

// Inside vue.config.js
module.exports = {
  // ...other vue-cli plugin options...
  publicPath: "./",
  pwa: {
    name: "My App",
    themeColor: "#4DBA87",
    msTileColor: "#000000",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",

    workboxPluginMode: "GenerateSW",
    workboxOptions: {},

    runtimeCaching: [
        {
          urlPattern: /.*/,
          handler: 'StaleWhileRevalidate',
          options: {
            cacheName: 'Example',
            expiration: {
              maxAgeSeconds: 86400 * 15
            },
            cacheableResponse: {
              statuses: [0, 200]
            }
          }
        }
      ]
  },
};
// urlPattern
//需要缓存的请求 URL，可以是一个字符串、正则表达式，甚至一个回调函数。对于跨域请求，必须从头到尾匹配正则表达式。如果喜欢暴力，那么就可以使用/.*/来缓存所有请求

// 不透明响应 (Opaque Response)
// 如果跨域请求不是 CORS，或者发起的姿势不对（比如没有使用 crossorigin="anonymous" ）导致原本支持 CORS 的变成了 no-cors，
//那么你就会得到 Opaque Response。对于 Opaque Response，你不能以任何方式得到返回的信息，甚至连返回代码都不知道，永远是 0。
//只能将其作为图片资源等，而且是默认不缓存的。


// handler 缓存策略

// expiration
// 有的时候缓存会变动，有点资源变动后以后都用不着了，得清除出去，所以可以设置过期时间

workboxPluginMode: 'GenerateSW',或 InjectManifest

第一种是每次打包,默认自动配置一遍

第二种自己要新建文件,dev/sw.js 去配置他的缓存和监听策略

4 安装npm install -g serve 可在本地开启服务

5 本地运行打包，然后 serve -s dist 在打包的文件夹内开启服务

6 注意开发者模式是没有办法注册pwa应用的，只能在打包后本地查看