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作用?的更多相关文章

  1. React项目中的registerServiceWorker的作用

    在公司的React前端项目中,发现有一个registerServiceWorker.js文件, 很久都没弄明白这个文件是干什么用的,查询了一些资料后,了解了一些 service worker是在后台运 ...

  2. 如何在通过脚手架create-react-app 创建的react项目中配置 less

    首先感慨下 自己竟然有半年没登账户 ,干嘛去啦? 从刚接触vue 接手做两次版本之后 又让我这个小菜鸡 开始开发react项目,连react生命周期还没搞明白的时候 就开始进行第一版本的开发了,第一个 ...

  3. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  4. 优雅的在React项目中使用Redux

    概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...

  5. 深入浅出TypeScript(5)- 在React项目中使用TypeScript

    前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...

  6. 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。

    react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...

  7. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  8. react项目中实现元素的拖动和缩放实例

    在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...

  9. React项目中实现右键自定义菜单

    最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...

随机推荐

  1. windows server 2008 r2 IIS7下网站配置 只允许指定的IP地址访问

    步骤一.找到ip地址和域限制 步骤二.添加全部拒绝 步骤三.添加允许访问的ip地址(局域网填写局域网ip,公网填写公网ip)  步骤四:如果想要拒绝某些ip访问,直接在规则中添加拒绝条目就可以  

  2. js面向对象之构造函数

    最简单的面向对象程序<script type="text/javascript"> var obj = new Object(); obj.qq = '10791611 ...

  3. 说说windows10自带浏览器Edge的好与不好

    用了10几个月了,正式版也升级了,今天来说说微软自带浏览器microsoft Edge的好与不好       先说好的吧     一,浏览器速度非常快,无论是打开还是关闭,或者是语音助手小娜需要调动浏 ...

  4. python中统计计数的几种方法和Counter的介绍

    使用字典dict()alist=['a','b','a','c','b','b',1,3]count_dict = dict()for i in alist:count_dict[i]=count_d ...

  5. 【转】Google Chrome浏览器调试

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  6. 上POJ刷题

    Online Judge系统      Online Judge系统(简称OJ)是一个在线的判题系统.用户可以在线提交给定问题的多种程序(如C.C++.Pascal.Java)源代码,系统对源代码进行 ...

  7. 类的封装,property特性,类与对象的绑定方法和非绑定方法,

    类的封装 就是把数据或者方法封装起来 为什么要封装 封装数据的主要原因是:保护隐私 封装方法的主要原因是:隔离复杂度(快门就是傻瓜相机为傻瓜们提供的方法,该方法将内部复杂的照相功能都隐藏起来了,比如你 ...

  8. vsphere中的linux虚拟机安装vmware-tools

    先在vcenter中选中虚拟机点击安装这个工具,如图 然后这台linux虚拟机的控制台操作,挂载先建立挂载目录 cd /mnt #在挂载建一个用来挂载的文件. mkdir cdrom 使用mount命 ...

  9. Win10上 visual studio设置为本地IIS运行网站时 必须以管理员身份加载项目的解决方法

    右键,选择“兼容性疑难解答”. 选择“疑难解答程序” 选择“该程序需要附加权限” 点击测试程序 点击下一步 选择 是,为此程序保存这些设置

  10. Vue+Bootstrap实现购物车程序(3)

    效果展示:(说明:使用webpack重构购物车程序,使用vue-cli生成项目脚手架) 文件结构: 代码: (1)将原来编写的btn-grp组件单独编写到BtnGrp.vue文件中 可以看到现在代码清 ...