图文并茂使用VUE+Quasar CLI开发和构建PWA,registerServiceWorker介绍
看文档
- 文档地址: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+Quasar CLI开发和构建PWA,registerServiceWorker介绍的更多相关文章
- 深入vue - 源码目录及构建过程分析
公众号原文链接:深入vue - 源码目录及构建过程分析 喜欢本文可以扫描下方二维码关注我的公众号 「前端小苑」 “ 本文主要梳理一下vue代码的目录,以及vue代码构建流程,旨在对vue源码整 ...
- Vue 快速原型开发
快速原型开发 注意: 是:serve 而不是 server 通过使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发,不过这需要先额外安装一个全局的扩展 go ...
- windows环境下搭建vue+webpack的开发环境
前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...
- 第二节——vue多页面开发
我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的,其实不是.因为vue在工程化开发的时候很依赖webpack,而webpack是将所有的资源整合到一块,弄成一个单页面. 但是v ...
- vue项目的开发
vue项目的开发 我们已经通过命令行创建了一个vue项目,并且打开了这个项目.下面是这个文件的src文件夹,这个文件夹放了整个项目的核心代码. 一.vue文件的用处简介. 1.assets文件夹,用来 ...
- windows下搭建vue+webpack的开发环境
1. 安装git其右键git bash here定位比cmd的命令行要准确,接下来的命令都是利用git bash here.2. 安装node.js一般利用vue创建项目是要搭配webpack项目构建 ...
- vue+quasar+electron+springboot+mysql撸一个TODO LIST 看板
先看效果 写本项目的目的有几点: 学习下vue+electron桌面开发 学习下java和spring开发(本人一直使用PHP) 一直缺少一款能适合自己的TODO LIST软件,能有桌面端的 可直接打 ...
- [MAUI] 在.NET MAUI中结合Vue实现混合开发
在MAUI微软的官方方案是使用Blazor开发,但是当前市场大多数的Web项目使用Vue,React等技术构建,如果我们没法绕过已经积累的技术,用Blazor重写整个项目并不现实. Vue是当前流 ...
- 实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- Android兼容包multidex的开发和构建方法
在Android开发中,函数方法超过65k限制后,我们就常常会用到multidex分包解决,但是multidex的配置,对系统apk的构建.签名.打包复杂性大大的增加,严重的降低了构建效率.那这个问题 ...
随机推荐
- 这次彻底读透 Redis
1. Redis 管道 我们通常使用 Redis 的方式是,发送命令,命令排队,Redis 执行,然后返回结果,这个过程称为Round trip time(简称RTT, 往返时间).但是如果有多条命令 ...
- .NET API 接口数据传输加密最佳实践
.NET API 接口数据传输加密最佳实践 我们在做 Api 接口时,相信一定会有接触到要给传输的请求 body 的内容进行加密传输.其目的就是为了防止一些敏感的内容直接被 UI 层查看或篡改. 其实 ...
- SpringBoot 阶段测试 1
SpringBoot 阶段测试 1 目录 SpringBoot 阶段测试 1 1.使用JDK8新语法完成下列集合练习: 1.1 List中有1,2,3,4,5,6,7,8,9几个元素要求; (1) 将 ...
- pyinstaller 打包exe相关
-w 只有窗口,没有console -p 加入路径 -F 生成一个exe文件 有虚拟环境时,需要先在cmd中进入虚拟环境,再执行打包程序 # 生成一个exe 无窗口 有icon Pyside2 pyi ...
- 使用 html2canvas 将页面中某一部分转为图片下载
今天在项目中遇到一个需求是将生成的二维码和一些背景作为海报,然后将海报以图片的形式下载 使用了 html2canvas 插件 import html2canvas from "html2c ...
- git的介绍、git的功能特性、git工作流程、git 过滤文件、git多分支管理、远程仓库、把路飞项目传到远程仓库(非空的)、ssh链接远程仓库,协同开发
Git(读音为/gɪt/)是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理. [1] 也是Linus Torvalds为了帮助管理Linux内核开发而开发的一个开放源码 ...
- java学习之springboot
0x00前言 呀呀呀时隔好久我又来做笔记了,上个月去大型保密活动了,这里在网上看了一些教程如果说不是去做java开发我就不做ssm的手动整合了采用springboot去一并开发. Spring Boo ...
- 2022-11-12 Acwing每日一题
本系列所有题目均为Acwing课的内容,发表博客既是为了学习总结,加深自己的印象,同时也是为了以后回过头来看时,不会感叹虚度光阴罢了,因此如果出现错误,欢迎大家能够指出错误,我会认真改正的.同时也希望 ...
- 2022春每日一题:Day 19
题目:吃奶酪 状压dp实现,dp[i][j]表示走过状态i,停到了j的位置的最小价值.枚举状态,起点终点,转移dp[i][j]=min{dp[i-(1<<s)][k]+dis(s,k)} ...
- Rust构建环境搭建
###安装涉及的概念rustup : 安装rust和管理版本的工具,当前rust尚处于发展阶段,存在三种类型的版本,稳定版.测试版.每日构建版本,使用rustup可以在这三种的版本之间切换,默认是稳定 ...