registerServiceWorker创建的React项目中的registerServiceWorker作用?
1、安装create-react-app:npm/cnpm installl create-react-app -g
2、创建项目:create-react-app my-first-app
3、此时项目里包含一个registerServiceWorker.js文件,作用是什么呢?
service worker是在后台运行的一个线程,可以用来处理离线缓存、消息推送、后台自动更新等任务。registerServiceWorker就是为react项目注册了一个service worker,用来做资源的缓存,这样你下次访问时,就可以更快的获取资源。而且因为资源被缓存,所以即使在离线的情况下也可以访问应用(此时使用的资源是之前缓存的资源)。注意,registerServiceWorker注册的service worker 只在生产环境中生效(process.env.NODE_ENV === 'production'),所以开发的时候,可以注释掉,当然生产模式下,也可以不用这个功能。
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
参考:
1、https://segmentfault.com/q/1010000010667462
registerServiceWorker创建的React项目中的registerServiceWorker作用?的更多相关文章
- React项目中的registerServiceWorker的作用
在公司的React前端项目中,发现有一个registerServiceWorker.js文件, 很久都没弄明白这个文件是干什么用的,查询了一些资料后,了解了一些 service worker是在后台运 ...
- 如何在通过脚手架create-react-app 创建的react项目中配置 less
首先感慨下 自己竟然有半年没登账户 ,干嘛去啦? 从刚接触vue 接手做两次版本之后 又让我这个小菜鸡 开始开发react项目,连react生命周期还没搞明白的时候 就开始进行第一版本的开发了,第一个 ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- 优雅的在React项目中使用Redux
概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
- 深入浅出TypeScript(5)- 在React项目中使用TypeScript
前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...
- 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。
react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- react项目中实现元素的拖动和缩放实例
在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...
- React项目中实现右键自定义菜单
最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...
随机推荐
- Javascript IE 内存释放
一个内存释放的实例 <SCRIPT LANGUAGE="JavaScript"><!--strTest = "1";for ( var i = ...
- 飞思卡尔开发板-迅为IMX6开兼容单核 双核 四核Plus开发板
飞思卡尔开发硬件接口介绍: 核心板参数 尺寸:51mm*61mm CPU:Freescale Cortex-A9 四核 i.MX6Q,主频 1.2 GHz 内存:2GB DDR3 存储:16GB EM ...
- leetcode_357. Count Numbers with Unique Digits
https://leetcode.com/problems/count-numbers-with-unique-digits/ 给定一个n,计算[0,10^n]中十进制中每一位都不相同的数的数目. c ...
- css3 平行四边形 、大括弧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 让xamarin的Entry绑定时,支持Nullable类型
xamarin.forms默认情况下,如果属性是double?类型,绑定到Entry上,是无法实现双向绑定的, 可以自定义Converter实现双向绑定 public class NullableCo ...
- webdrive脚本打开firefox浏览器,报“AttributeError: module 'selenium.webdriver' has no attribu
按照网上提供的方法: 下载geckodriver之后解压缩到 Firefox安装目录 下 添加 Firefox安装目录 到 系统变量Path 重启pycharm 照此步骤执行后,仍然报同样的错.折腾了 ...
- Spring.Boot.1 -- 概览
Spring Boot 是如何简化Java 开发的 SpringBoot的一些重要特征 长久以来,Spring 框架作为Java应用开发的框架地位稳固.最近在云计算.大数据.无结构数据持续化.函数式反 ...
- 动态规划----最长公共子序列(C++实现)
最长公共子序列 题目描述:给定两个字符串s1 s2 … sn和t1 t2 … tm .求出这两个字符串的最长公共子序列的长度.字符串s1 s2 … sn的子序列指可以表示为 … { i1 < i ...
- ResNet实战
目录 Res Block ResNet18 Out of memory # Resnet.py #!/usr/bin/env python # -*- coding:utf-8 -*- import ...
- 杭电 1789 Doing Homework again (贪心 求最少扣分)
Description zichen has just come back school from the 30th ACM/ ICPC. Now he has a lot of homework t ...