使用React官方的脚手架工具create-react-app创建的项目，目录中会存在registerServiceWorker.js这个文件，这个文件的作用是什么呢？

这个文件可以使用也可以不使用，使用它可以使你的react项目变成一个PWA（Progressive Web Application）, 也就是说，在线上，只要访问过一次你的网站，下一次即使没有网络，这个应用依然可以被访问。当然，它的好处不仅这么一点点，在移动端打开项目时，如果你用的是chrome或者firefox这样的高级浏览器，浏览器会给你的页面不太一样的显示，你的网页看起来会更像原生App，实际上体验也更爽。

在项目的public目录下，存在一个manifest.json文件，你可以在这里对你的网页做一些配置，当用户访问网页，生成一个网页的桌面快捷方式时，会以这个文件中的内容作为图标和文字的显示内容。

配置好manifest.json, 使用registerServiceWorker.js，用户完全可以把你的网页快捷方式放到桌面上，因为你的网页此时支持离线访问，所以用起来和原生app的体验很接近。

大家可以做这样一个试验：

  1. 创建一个项目
  2. 运行npm run build
  3. 然后在本地开一个服务器，把build目录中的内容放在服务器的根目录下
  4. 通过localhost的域名访问服务器
  5. 访问过一次之后，断掉网络，重新访问

你会发现，即使没有网络，这个时候依然可以访问你的应用。需要注意的是，只有打包生成线上版本的react项目时，registerServiceWorker.js才会有效。本地开发时，这个文件没什么效果，因为如果本地开发使用这个文件，有可能会因为缓存造成调试问题。

还需要注意的是，项目在本地，通过localhost域名访问，支持http协议。如果真正放到线上，如果想让registerServiceWorker.js生效，服务器必须采用https协议，这也是为什么很多同学本地测试好用，线上就不好用的原因。

registerServiceWorker.js中的这些功能，并不是React所独创的内容，而是React对PWA的一个实现，PWA未来的发展前景不错，从扩展视野角度也值得大家一看，如果你想了解更多，可以访问PWA的官方手册，这里讲解了PWA底层关于serviceWorker很多的内容，非常有趣：

https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0​codelabs.developers.google.com

create-react-app创建的项目中registerServiceWorker.js文件的作用的更多相关文章

  1. 向MyEclipse的项目中导入js文件时，出现小红叉

    这个问题困扰我很久.刚开始时,也没有解决,因此也在网上寻找解决方法,还是没能解决.最近做项目时再一次出现了这样的问题,于是决定还是再找找办法.在此,分享一下自己的解决方法,给正处于痛苦中的童鞋们带来解 ...

  2. 在vue项目中的js文件里使用vue实例

    参考的网址:https://blog.csdn.net/weixin_34353714/article/details/86958742 不为其他,就为了记录一下,方便以后查看: 第一种方法: 1.首 ...

  3. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  4. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  5. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  6. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  7. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  8. 【vue】如何在 Vue-cli 创建的项目中引入 iView

    根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install  iview  --save ...

  9. 【vue】如何在 Vue-cli 创建的项目中引入iView

    根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install  iview  --save 2 ) 在 webpack ...

随机推荐

  1. ogg 单表拆分合并进程

    metalink文档:1320133.1和1512633.1 map scott.emp1, target scott.emp1 ,FILTER(@RANGE(1,3));  --拆分 map sco ...

  2. @validated 验证 List 参数在spring中

    @PostMapping(value = "complete") public Vo complete(@Valid @RequestBody @Validated(Complet ...

  3. MySQL时区错误导致server time zone value 'Öйú±ê׼ʱ¼ä' 错误

    时区错误 由于中国是东八区,跟mysql配置不同,需要修改: 管理员登录MySQL OK成功

  4. CSS动画：animation、transition、transform、translate

    https://blog.csdn.net/px01ih8/article/details/80780470 一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画). ...

  5. Android6.0以上系统动态获取权限

    动态权限的申请方法: 1.首先,需要在AndroidManifest.xml静态申请权限,否则无法动态申请权限: <uses-permission android:name="andr ...

  6. 方法总结：如何实现html页面自动刷新

    使用场景: 1. 页面需要定时刷新,实时加载数据,需要实时查看监控数据(H5中的WebSocket和SSE可以实现局部刷新) 2. 一定时间之后跳转到指定页面(登录注册之类) 3. 前端开发使用伪数据 ...

  7. [原创][Synth 8-2543] port connections cannot be mixed ordered and named ["*_Top.v":1151]

    Vivado综合错误: [Synth 8-2543] port connections cannot be mixed ordered and named ["*_Top.v":1 ...

  8. mysql8.0 定时创建分区表记录 每天定时创建下一天的分区表

    因单表数据太大, 需要表按时间分区 分区字段 pay_out_date 按天分 要求自动创建 1. 创建分区表 MYSQL的分区字段,必须包含在主键字段内 常见错误提示 错误提示:#1503 A PR ...

  9. DDD - 概述 - (一)

    本片将介绍以下内容: 1).DDD是什么? 2).怎么使用DDD? 3).使用DDD应该规避或者注意什么? 一.DDD是什么? 简言之:领域驱动设计(domain driven design),顾名思 ...

  10. .net 第一次请求比较慢

    为了提高访问速度,也便有了预编译. 关于ASP.NET网站:每个页面都编译成一个.dll文件 用Assembly.GetExecutingAssembly().Location 查看 而ASP.NET ...