registerServiceWorker

最新推荐文章于 2024-08-31 07:25:15 发布
最新推荐文章于 2024-08-31 07:25:15 发布
阅读量8.4k 收藏 9
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/100735133
版权

目前的Vue脚手架默认会携带一个 registerServiceWorker的东西，这个东西是做什么的呢？

首先说明，registerServiceWorker可以运用于主流框架，它只是为了简化缓存机制产生的js包，以下的例子是在Vue中使用

这个文件可以视情况用或者不用，它是用来做离线缓存等任务的，实际上就是为Vue项目注册了一个service worker。这样的话，如果在线上，只要访问过一次该网站，以后即使没有网络也可以访问（此时使用的是之前缓存的资源）。只在生产环境中有效（process.env.NODE_ENV === ‘production’）

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

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

 

使用方式，在组件中直接引入就可以了：

hzxOnlineOk
关注
register-service-worker:带有通用事件钩子的简化服务工人注册的脚本
05-11
注册服务工作者 一个脚本，用于通过常见事件的钩子简化服务人员的注册。 用法 注意：此脚本使用ES模块导出，并且预期与可处理ES模块语法的客户端捆绑程序一起使用。 import { register } from 'register-service-worker' register ( '/service-worker.js' , { registrationOptions : { scope : './' } , ready ( registration ) { console . log ( 'Service worker is active.' ) } , registered ( registration ) { console . log ( 'Service worker has been registered.' ) } , cache
vue-cli-plugin-bundle-service-worker:Vue-CLI 3 插件使用 webpack 构建服务工作者
05-29
vue-cli-plugin-bundle-service-worker 使用 webpack 构建您的服务工作者。 主要用例是如果您的服务工作者导入/需要除工作箱库之外的模块。 需要使用workboxPluginMode === 'InjectManifest'安装和配置@vue/pwa插件。 安装 npx @vue/cli add bundle-service-worker // vue.config.js module . exports = { // You must configure the @vue /pwa plugin. pwa : { workboxPluginMode : "InjectManifest" , workboxOptions : { swSrc : "src/service-work
Vue 2 如何添加 register-service-worker 以实现缓存请求的目的
学习笔记
11-16 3334
现在 vue 3 的模板中是自带的。用这个的好处是，它会自动将项目中的所有文件请求缓存到中，以实现再次打开网站的时候会非常非常快。如果页面中变化，也会自动在后台下载变化的文件，页面的变化在下次刷新页面的时候就会自动生效。
注册Service Worker教程：基于vue-cli的实现实例
最新发布
gitblog_00508的博客
08-31 1001
注册Service Worker教程：基于vue-cli的实现实例 register-service-workerA script to simplify service worker registration with hooks for common events.项目地址:https://gitcode.com/gh_mirrors/re/register-service-worker 项...
推荐文章：使用register-service-worker简化服务工作者注册
gitblog_00055的博客
05-19 583
推荐文章：使用register-service-worker简化服务工作者注册 register-service-workerA script to simplify service worker registration with hooks for common events.项目地址:https://gitcode.com/gh_mirrors/re/register-service-wo...
初识 Service Worker
qq_34185872的博客
04-14 1009
Service Worker 是一种在 Web 平台上运行的脚本，它能够拦截和处理网络请求、管理应用程序的缓存、实现离线访问等功能。使用 service worker，你可以将 app 设置为首先使用缓存资源，从而即使在离线状态，也可以提供默认的体验，然后从网络获取更多数据（通常称为“离线优先”）。这已经在原生 app 中可用，这是经常选择原生 app，而不是选择 web app 的主要原因之一。它是一种 JavaScript 工作线程，无法直接访问 DOM。
React系列-registerServiceWorker的作用
zyx的博客
10-22 1259
service worker是在后台运行的一个线程，可以用来处理离线缓存、消息推送、后台自动更新等任务。registerServiceWorker就是为react项目注册了一个service worker，用来做资源的缓存，这样你下次访问时，就可以更快的获取资源。而且因为资源被缓存，所以即使在离线的情况下也可以访问应用（此时使用的资源是之前缓存的资源）。注意，registerServiceWork...
This relative module was not found: * ./registerServiceWorker in ./src/main.js
06-07
`registerServiceWorker` 是一个用于注册 Service Worker 的文件，通常在 Vue CLI 创建的项目中会默认生成该文件。如果您没有使用 Service Worker，可以在 `src/main.js` 中注释掉相关代码或者删除该文件。 在 `src...
下面这段代码怎么引入elementUI组件 import { createApp } from 'vue' import App from './App.vue' import './registerServiceWorker' import router from './router' import store from './store' createApp(App).use(store).use(router).mount('#app');
07-14
import './registerServiceWorker' import router from './router' import store from './store' // 引入 Element UI 样式 import 'element-plus/dist/index.css' // 引入 Element UI 组件 import { ElButton, ...
ERROR Failed to compile with 2 errors 11:20:05 This dependency was not found: * vue-awesome-swiper in ./src/main.js To install it, you can run: npm install --save vue-awesome-swiper This relative module was not found: * ./registerServiceWorker in ./src/main.js Error from chokidar (C:\node_modules): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
06-07
2. `registerServiceWorker` 模块未找到。 针对第一个问题，可以按照错误提示进行安装，执行以下命令： ``` npm install --save vue-awesome-swiper ``` 如果已经安装了 `vue-awesome-swiper` 模块，可以检查 `...
ServiceWorker中文API
03-04
自己翻译的ServiceWorker中文API，本人对JS研究不深，有些地方有疏漏，请多多指教。
service-worker-controller：用于管理Service Worker的自定义控制器
02-04
服务工作者控制器类 用于管理Service Worker的自定义控制器。 入门 将文件包含在项目中之后，将以下行添加到项目的根index.js -file中： import { ServiceWorkerController } from 'src/controllers' ; /*...*/ const init = async ( ) => { /*...*/ try { await ServiceWorkerController . init ( ) ; } catch ( error ) { console . debug ( 'Error:' ,
import { createApp } from 'vue' import App from './App.vue' import './registerServiceWorker' import router from './router' import store from './store' //引入全局样式 import "@/assets/css/common.scss"; createApp(App).use(store).use(router).mount('#app');
07-13
你好！这段代码是一个基于 Vue.js 的应用程序的入口文件。它使用了 Vue 的 createApp 函数来创建一个应用程序实例，并将 App 组件作为根组件进行渲染。这个应用程序还使用了 Vue Router 进行路由管理，使用了 Vuex ...
React项目中的registerServiceWorker的作用
reg183的专栏
12-14 870
service worker是在后台运行的一个线程，可以用来处理离线缓存、消息推送、后台自动更新等任务。 registerServiceWorker就是为react项目注册了一个service worker，用来做资源的缓存，这样你下次访问时，就可以更快的获取资源。而且因为资源被缓存，所以即使在离线的情况下也可以访问应用（此时使用的资源是之前缓存的资源）。 但有一点要注意，registerServiceWorker注册的service worker只在生产环境中生效（process.env.NO..
渐进式Web应用入门-ServiceWorker
技术实验室
02-15 378
Service Worker 让网页无网络也能访问今天不讲 Kotlin 了，讲讲 PWA (渐进式Web应用) 介绍首先，写给所有移动端开发的同学：PWA(Progressive Web Apps) 一定是将来的移动开发趋势，且学且珍惜。Progressive Web Apps 比小程序还要方便，对于首次访问的用户可以直接在浏览器中进行访问，不需要安装应用。即使在比较糟糕的网络环境下，也能够快速
react registerServiceWorker.js
热门推荐
小花的前端博客
04-27 1万+
registerServiceWorker.js 首先我们查看一个这个js文件的说明就可以看出其主要的含义了 // In production, we register a service worker to serve assets from local cache. // This lets the app load faster on subsequent visits in pr...
初识 ServiceWorker
ForeverCjl的专栏
09-29 3311
初识ServiceWorker 初识ServiceWorker 在8月份的时候，W3C更新了一个叫Service Workers的API。 了解过HTML5中的Web Worker的人可能会对这个API会更容易理解一些，不然的话会将这两个API搞混。 其实，Service Worker是基于Web Worker的事件驱动的，他们执行的机制都是新开一个线程去处理一
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hzxOnlineOk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值