图文并茂使用VUE+Quasar CLI开发和构建PWA，registerServiceWorker介绍

2022-06-26 02:00:23 阅读：260 来源： 互联网

标签：VUE 图文并茂 service registerServiceWorker quasar PWA worker js pwa

看文档

文档地址：Preparation for PWA
1.将PWA模式添加到我们的Quasar项目中：

npx quasar mode add pwa

我们看一下有哪些变化
向Quasar项目添加PWA模式意味着将创建一个新文件夹：/src-pwa，其中包含PWA特定文件：

.
└── src-pwa/
    ├── register-service-worker-dev.js   # 应用代码**管理**Service Worker
    └── custom-service-worker.js    # 可选的自定义的service worker文件

根据文档指示，我们可以自由编辑这些文件
register-service-worker.js 和 custom-service-worker.js就是你的PWA缓存的关键所在了
如果你想要使用其他的文件名，可以去quasar.config.js里改配置文件哦

// quasar.config.js

sourceFiles: {
  pwaRegisterServiceWorker: 'src-pwa/register-service-worker',
  pwaServiceWorker: 'src-pwa/custom-service-worker',
  pwaManifestFile: 'src-pwa/manifest.json',
}

manifest.json 是 PWA 配置 manifest 的文件。
这两个文件仅嵌入到生产版本中，而开发版本则跳过它们，就是说我们可以在代码里控制，开发版本不执行缓存，否则会影响我们写代码调试。
“register-service-worker.js”会自动导入您的应用程序（与任何其他/src文件一样）。它注册service worker（由Workbox或您的自定义工具创建，具体取决于工作箱插件模式 - quasar.conf.js> pwa> workboxPluginMode），您可以监听Service Worker的事件。您可以使用ES6代码。
Manifest文件由Quasar CLI通过使用sw-precache-webpack-plugin软件包及其默认配置生成。然而你可以在/quasar.conf.js调整这个配置，你可以在这个里文件里修改一些APP图标等其他配置

根据需求修改你的quasar.config.js

PWA构建命令

开发(我没玩这个，我直接写完项目使用了构建生产版本进行测试了）

$ quasar dev -m pwa

# ..或者更长的形式:
$ quasar dev --mode pwa

# 使用一个特定的Quasar模式:
$ quasar dev -m pwa -t ios

构建生产版本(我执行了这个哦)

$ quasar build -m pwa

# ..或者更长的形式:
$ quasar build --mode pwa

# 使用一个特定的Quasar模式:
$ quasar build -m pwa -t ios

你看，成功了吧~·

开始测试有没有进行缓存

查看构建完成的代码文件数量
把打好的包放到服务器上面，我这里先用本地服务代替啦
访问部署地址以后，会发现地址栏出现了这个东西
点击install，会出现在你的桌面哦~~然后就像桌面应用一样了哎~~

PWA验证

这里放一个如何测试PWA，以及确定它是否成功的一篇文章PWA-H5 Web App优化探索之路（Service Worker,Lighthouse）
测试我们的PWA配置是否成功
页面打开以后，我没有点击切换页面，我发现此时就是一次性缓存了所有的静态资源

接下来我们来探索一下具体的配置registerServiceWorker

registerServiceWorker是什么，src-pwa\register-service-worker.js是什么用途

registerServiceWorker可以运用于主流框架，它只是为了简化缓存机制产生的js包
src-pwa\register-service-worker.js这个文件可以视情况用或者不用，它是用来做离线缓存等任务的，
它为项目注册了一个service worker。，只要访问过一次该网站，以后即使没有网络也可以访问，全都缓存啦

使用service worker的现象是什么呢？

会在第一次访问该站点的时候，一次性请求加载所有资源，除了当前页面的资源是通过浏览器去获取的，其他缓存资源都是通过service worker

顺便普及一下：Service Worker 是什么？还可以去这里PWA-H5 Web App优化探索之路（Service Worker,Lighthouse）看我的文章，有特别详细，图文并茂的介绍哦~~

Service Worker 是浏览器独立于当前网页，在后台运行的一个脚本。作用有以下几点
拦截和处理网络请求，刷新页面可以通过缓存，页面秒开
使用Service Worker 在后台运行，实现处理大规模后台数据的功能，不影响前端页面，数据处理同时可以和前端页面进行通信
仅在激活情况下，才会针对系统事件抓取资源，非激活情况下，不占用系统资源

src-pwa\register-service-worker.js介绍

先看代码

import { register } from 'register-service-worker'

// The ready(), registered(), cached(), updatefound() and updated()
// events passes a ServiceWorkerRegistration instance in their arguments.
// ServiceWorkerRegistration: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration

register(process.env.SERVICE_WORKER_FILE, {
  // The registrationOptions object will be passed as the second argument
  // to ServiceWorkerContainer.register()
  // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register#Parameter

  // registrationOptions: { scope: './' },

  ready (/* registration */) {
    // console.log('Service worker is active.')
  },

  registered (/* registration */) {
    // console.log('Service worker has been registered.')
  },

  cached (/* registration */) {
    // console.log('Content has been cached for offline use.')
  },

  updatefound (/* registration */) {
    // console.log('New content is downloading.')
  },

  updated (/* registration */) {
    // console.log('New content is available; please refresh.')
  },

  offline () {
    // console.log('No internet connection found. App is running in offline mode.')
  },

  error (/* err */) {
    // console.error('Error during service worker registration:', err)
  }
})

找到引用源代码地址
源代码分析可参考这个博主的文章哦_{我今天困啦}不写啦源码介绍

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

在这里插入图片描述

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

标签：VUE,图文并茂,service,registerServiceWorker,quasar,PWA,worker,js,pwa
来源： https://www.cnblogs.com/sugartang/p/16412748.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9