PWA简介

PWA（ 全称：Progressive Web App ）也就是说这是个渐进式的网页应用程序，是一个具有响应式布局的Web应用，可以离线工作，并能够安装到设备的主屏幕上。其实是在主屏幕上添加该Web应用的快捷方式。其主要解决以下问题：

• 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
• 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
• 实现了消息推送

PWA 最棒的一点就是它们真的是“渐进式”的。如果你构建一个 PWA，即使在一个不支持的老旧浏览器上运行，它仍然可以作为一个普通的网站来运行。驱动 PWA 的技术就是这样设计的，只有在支持这些新功能的浏览器中才会增强体验。如果用户的设备支持，那么他们将获得所有额外的好处和更多的改进功能。可以将 PWA “添加” 到设备的主屏幕上。一旦添加后，它便会出现在你的主屏幕上并可以通过点击图标来访问你的网站。可以把它当做台式机的快捷方式，以使你轻松访问网站。

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/）。 serivce work

App shell简介

提高首渲的一个主流方法是使用 "App Shell"，所谓的 App Shell 就是一个能被缓存的、轻量级的界面框架，它往往是纯 HTML 片段，只包括内联 CSS 和 base64 图片，不依赖于 JS 框架，可以在加载、解析、执行 JS 之前就渲染出来，几乎消除了白屏时间，大大提高用户体验。

其他技术简介

• 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
App Manifest 生成器
https://github.com/SangKa/PWA-Book-CN

工具

• WebPagetest.org 是一个免费工具，可以使用来自世界各地的真实设备对你的网站进行测试