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