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. node.js入门之三

    Node.js REPL(交互式解释器) Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端或 Unix/Linux ...

  2. windows echo命令

    ECHO命令是大家都熟悉的DOS批处理命令的一条子命令,但它的一些功能和用法也许你并不是全都知道,不信你瞧:  1. 作为控制批处理命令在执行时是否显示命令行自身的开关 格式:ECHO [ON|OFF ...

  3. IOS 面试题系列

    随着iOS平台开发的职位的增加,笔试.面试也越来越有“套路”,这里我总结了一些面试题,多数是Objective-C的基础知识,适合于面试新人,答案是我自己答的,不准确的地方,欢迎指出. 1.   Ob ...

  4. js 类似于移动端购物车删除,左移动删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. MFC_VS清理器

    VS清理器 界面 工程目录 列表控件ID改名IDC_FILELIST 绑定变量m_FileList 属性设置Accept Files 设置True 成员添加 // 用于保存待遍历的目录 vector& ...

  6. Java B

    3.继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么? 答:父类: package test; public class FatherClass { public FatherClass( ...

  7. win7 命令行禁用开启usb存储

    禁用: reg add "HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\usbstor" /v Start /t reg ...

  8. OAuth - 第三方登录的原理

    第三方登录的原理 所谓第三方登录,实质就是 OAuth 授权.用户想要登录 A 网站,A 网站让用户提供第三方网站的数据,证明自己的身份.获取第三方网站的身份数据,就需要 OAuth 授权. 举例来说 ...

  9. thinkphp5将一条数据以toArray()放入session

    直接将找出的数据赋予变量,列:$admin: 存入session:Session::set('user_info',$admin->toArray()); 如果数据中有时间字段: 如若有时间字段 ...

  10. react入门(下)

    react生命周期 1. 组件的三个生命周期状态: * Mount:插入真实 DOM * Update:被重新渲染 * Unmount:被移出真实 DOM2. React 为每个状态都提供了两种勾子( ...