vue项目部署serviceWorker

最新推荐文章于 2024-07-18 06:09:14 发布

VT_Liu

最新推荐文章于 2024-07-18 06:09:14 发布

阅读量4.5k

点赞数 1

文章标签： vue 缓存

本文链接：https://blog.csdn.net/VT_Liu/article/details/106939686

版权

本文介绍了Service Worker的起源，作为基于WEB Worker的扩展，它提供独立线程和离线缓存能力，使得JavaScript能实现更高效的运行。Service Worker的主要功能包括拦截请求、缓存文件和离线访问。在Vue项目中，通过配置可以实现Service Worker的集成，从而提升Web应用的性能和用户体验。在完成配置后，项目会生成service-worker.js文件，并在main.js中引入。

摘要由CSDN通过智能技术生成

Service Worker的由来
Service Worker（以下简称sw）是基于WEB Worker而来的。

众所周知，javaScript 是单线程的，随着web业务的复杂化，开发者逐渐在js中做了许多耗费资源的运算过程，这使得单线程的弊端更加凹显。web worker正是基于此被创造出来，它是脱离在主线程之外的，我们可以将复杂耗费时间的事情交给web worker来做。但是web worker作为一个独立的线程，他的功能应当不仅于此。sw便是在web worker的基础上增加了离线缓存的能力。

Service Worker的功能和特性：

一个独立的 worker 线程，独立于当前网页进程，有自己独立的 worker context；
一旦被 install，就永远存在，除非被 uninstall；
需要的时候可以直接唤醒，不需要的时候自动睡眠（有效利用资源，此处有坑）；
可编程拦截代理请求和返回，缓存文件，缓存的文件可以被网页进程取到（包括网络离线状态）；
离线内容开发者可控；
能向客户端推送消息；
不能直接操作 DOM；
出于安全的考虑，必须在 HTTPS 环境下才能工作；
异步实现，内部大都是通过 Promise 实现；
所以我们基本上知道了 Service Worker 的伟大使命，就是让缓存做到优雅和极致，让 Web App 相对于 Native App 的缺点更加弱化，也为开发者提供了对性能和体验的无限遐想。

完整代码

// serviceWorker.js
import {
    register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
   
  register('service-worker.js', {
   
    ready ()