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

·  阅读 78
图文并茂使用VUE+Quasar CLI开发和构建PWA

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

人生苦短,我们要:

image.png

看文档

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验证

接下来我们来探索一下具体的配置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)
  }
})

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

欢迎大家指出文章需要改正之处~
学无止境,合作共赢 在这里插入图片描述

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改