使用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. CentOs7.5安装Redis

    前言 虽说现在都是买服务了,可是自己做的小DEMO偶尔也用用Redis,不会装也不行 变更记录 # 19.4.24  起笔 正文 官网 https://redis.io/ 首先去官网找到最新的链接 截 ...

  2. js 获取 时间戳的三种方法

    new Date() *1 自动数据类型转换为数字 new Date().getTime() Date.now();

  3. LeetCode 7. Reverse Integer（c语言版）

    题目: Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123Output: 321 Ex ...

  4. 【java】Java组件概览（2）— 基本库

    1.Math Math相关的库包括包括浮点库(java.lang.Math和java.lang.StrictMath)和任意精度数学(java.math包). (1)java.lang.Math 该类 ...

  5. git branch 分支

    几乎所有的版本控制系统都以某种形式支持分支. 使用分支意味着你可以把你的工作从开发主线上分离开来,以免影响开发主线. 在很多版本控制系统中,这是一个略微低效的过程——常常需要完全创建一个源代码目录的副 ...

  6. 马拉车算法——求回文子串个数zoj4110

    zoj的测评姬好能卡时间.. 求回文子串的个数:只要把p[i]/2就行了: 如果s_new[i]是‘#’,算的是没有中心的偶回文串 反之是奇回文串 /* 给定两个字符串s,t 结论:s,t不相同的第一 ...

  7. HashMap 和 Hashtable 的 6 个区别

    HashMap 是非常重要且常用的一种集合,还有一个和它类似的集合即Hashtable,有必要知道它们之间的区别. 1.线程安全: Hashtable 是线程安全的,HashMap 则不是线程安全的. ...

  8. golang slice 经典例题

      arr := [...],,,,,,,,} s1 :=arr[:] s2 :=arr[:] s1=? //2,3,4,5 s2=? // 5,6 package main import " ...

  9. Flink RichSourceFunction应用，读关系型数据(mysql)数据写入关系型数据库(mysql)

    1. 写在前面 Flink被誉为第四代大数据计算引擎组件,即可以用作基于离线分布式计算,也可以应用于实时计算.Flink的核心是转化为流进行计算.Flink三个核心:Source,Transforma ...

  10. .NET Core on K8S快速入门课程学习笔记

    课程链接:http://video.jessetalk.cn/course/explore 良心课程,大家一起来学习哈! 目录 01-介绍K8s是什么 02-为什么要学习k8s 03-如何学习k8s ...