使用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. 2小程序canvas使用，及一些坑，以及自己的一些小总结

    自己做了一个小程序,主要用于给头像加图标的那种,和qq似的,主要用canvas做的, 第一回用,掉了很多坑,所以今天总结一下自己所做的,如果大家有不理解的地方,欢迎提问:如果帮到大家的话,帮忙点个啥的 ...

  2. pip安装mysql-python报错：Command "python setup.py egg_info" failed with error code 1 in /tmp/pip-install-enRreC/mysql-python/

    公司业务开发,用python开发网站;需要使用模块MySQLdb. 我直接pip install MySQLdb,当然不成功了,模块名字因该是mysql-python pip install mysq ...

  3. python复习基本知识

    print(x or y) """x or y ; x 为 true ,则返回x ,否则返回flase“”“” and 则相反 优先级比较:not > and &g ...

  4. selenium+python自动化测试，上传文件怎样实现

    其实上传图片操作与输入框的输入是一样的,一种是在输入框中输入字符信息,一种是在输入文件格式的信息,下面是用代码实现上传文件, from selenium import webdriverfrom ti ...

  5. 卢卡斯定理——应用hdu4349

    #include<bits/stdc++.h> using namespace std; int n; int main(){ while(cin>>n){ ; while(n ...

  6. JavaScript模块化CommonJS/AMD/CMD/UMD/ES6Module的区别

    目录 JS-模块化进程 原始的开发方式 CommonJS && node.js AMD && Require.js CMD && Sea.js UMD ...

  7. DDD - 概述 - 模块 (二)

    首先,你必须知道以下DDD构建块: Entities - 实体 Value objects - 值对象 Aggregate roots - 聚合跟 Repositories - 仓储对象 Factor ...

  8. tp5 mkdir(): Permission denied 问题

    今天使用tp5 线上上传图片的时候遇到了一个问题 mkdir(): Permission denied 如图 百度了一下 发现大家都说 chmod -R 777 runtime 能解决问题 尝试了一下 ...

  9. Metasploit中aggregator插件无法使用

    Metasploit中aggregator插件无法使用   aggregator是Metasploit自带的一个插件,用来管理会话Session.该插件使用metasploit-aggreator库. ...

  10. 第六章 对象-javaScript权威指南第六版

    什么是对象? 对象是一种复合值,每一个属性都是都是一个名/值对.原型式继承是javaScript的核心特征. 对象常见的用法有,create\set\query\delete\test\enumera ...