PWA学习整理

PWA简介

PWA（ 全称：Progressive Web App ）也就是说这是个渐进式的网页应用程序，是一个具有响应式布局的Web应用，可以离线工作，并能够安装到设备的主屏幕上。其实是在主屏幕上添加该Web应用的快捷方式。其主要解决以下问题：
* 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
* 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
* 实现了消息推送

Service Work简介

一个Service Worker是一段运行在浏览器后台进程里的脚本，他独立于当前页面，提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。在将来，基于它可以实现消息推送，静静更新以及地理围栏等服务，但是目前它首先要具备的功能是拦截和处理网络请求的功能，包括可编程的消息缓存管理能力，是PWA的核心。在开发阶段，你可以通过localhost使用service worker，但是一旦上线，就需要你的server支持HTTPS。你可以通过service worker劫持连接，伪造和过滤响应，非常逆天。即使你可以约束自己不干坏事，也会有人想干坏事。所以为了防止别人使坏，你只能在HTTPS的网页上注册service workers，这样我们才可以防止加载service worker的时候不被坏人篡改。（因为service worker权限很大，所以要防止它本身被坏人篡改利用。每个 Service Worker 都有自己的作用域，它只会处理自己作用域下的请求，而 Service Worker 的存放位置就是它的最大作用域；有一个需要特别说明的是service worker文件的路径，你一定注意到了在这个例子中，service worker文件被放在这个域的根目录下，这意味着service worker和网站同源。换句话说，这个service work将会收到这个域下的所有fetch事件。如果我将service worker文件注册为/example/sw.js，那么，service worker只能收到/example/路径下的fetch事件（例如： /example/page1/, /example/page2/）。

其他技术简介

• React简介：
  React.js 是一个构建快速和功能UI的java script库，其是一个创建UI的库，但是其不是渲染UI的库。React是一个单向数据流，数据被保存在高层组件中，通过props将数据向下层组件传递；但是交互的事件通过props从下层组件向上层组件传递。组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

• WebPack简介：
  WebPack 是一个能够将多个js文件打包进行一个js文件中，为了打包对应的js，可以通过对应的配置文件webpack.config.js文件，对应的内容如下：

module.exports = {
entry: __dirname + "/src/index.js", ---入口
output: {     ----输出
path: __dirname + "/public",  --- 输出路径
filename: "bundle.js", ---- 输出文件的名称
publicPath: "/", 
}
};

• webpack-dev-server简介：
  webpack-dev-server其是在机器后台运行一个节点Node应用程序，服务项目的public文件夹以至于我们能够通过浏览器进行访问，而且其能够观察bundle.js对应引用文件的改变，如果改变则会重新打包和重新加载页面。
• Babel简介：
  Babel是一个java script转换工具，其能够将对应ES6代码转换为ES5代码。
• JSX简介：
  JSX是一个看起来像HTML但是实际上是java script的类型语法。
• Node简介
  Node.js 是一个js运行时库，这个库能够使的js代码运行在非浏览器环境中。Node同时引入package的概念到js中，React对应的就是Node中的一个package。
  *Npm/Yarn简介：
  NPM（Node’s package manager）节点的包管理器。Yarn也是一个包管理器，其实际上是对npm进行一层包装的结果（相当于maven，gradle）。项目增加依赖可以通过：yarn add；依赖的安装可以通过yarn install。Package.json 是一个对应的包依赖列表，其中每一个包依赖可以使用npm或者yarn进行安装。Node_modules文件夹对应的是yarn install安装对应的依赖包路径。Yarn.lock文件是为了保证对于所有的人得到的包和对应的版本是一样的。
• Promise简介：
  每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。

简单demo实现代码:

代码地址：
https://github.com/lwjaiyjk/lwjaiyjk.github.io

参考：

https://discipled.me/posts/service-workers
https://blog.csdn.net/lecepin/article/details/78911091
https://blog.csdn.net/yanzhenjie1003/article/details/51703370
https://juejin.im/entry/5a1c394a5188255851326da5
https://github.com/SangKa/PWA-Book-CN
https://discipled.me/posts/pwa-installable-and-share
https://nzv3tos3n.qnssl.com/message/msg-demo.html