使用React官方的腳手架工具create-react-app創(chuàng)建的項(xiàng)目走趋，目錄中會(huì)存在registerServiceWorker.js這個(gè)文件，這個(gè)文件的作用是什么呢？
這個(gè)文件可以使用也可以不使用，使用它可以使你的react項(xiàng)目變成一個(gè)PWA（Progressive Web Application）, 也就是說(shuō)，在線上炼彪，只要訪問(wèn)過(guò)一次你的網(wǎng)站，下一次即使沒(méi)有網(wǎng)絡(luò)正歼，這個(gè)應(yīng)用依然可以被訪問(wèn)辐马。當(dāng)然，它的好處不僅這么一點(diǎn)點(diǎn)局义，在移動(dòng)端打開(kāi)項(xiàng)目時(shí)喜爷，如果你用的是chrome或者firefox這樣的高級(jí)瀏覽器，瀏覽器會(huì)給你的頁(yè)面不太一樣的顯示萄唇，你的網(wǎng)頁(yè)看起來(lái)會(huì)更像原生App檩帐，實(shí)際上體驗(yàn)也更爽。
在項(xiàng)目的public目錄下另萤，存在一個(gè)manifest.json文件湃密，你可以在這里對(duì)你的網(wǎng)頁(yè)做一些配置，當(dāng)用戶訪問(wèn)網(wǎng)頁(yè)四敞，生成一個(gè)網(wǎng)頁(yè)的桌面快捷方式時(shí)泛源，會(huì)以這個(gè)文件中的內(nèi)容作為圖標(biāo)和文字的顯示內(nèi)容。
配置好manifest.json, 使用registerServiceWorker.js忿危，用戶完全可以把你的網(wǎng)頁(yè)快捷方式放到桌面上达箍，因?yàn)槟愕木W(wǎng)頁(yè)此時(shí)支持離線訪問(wèn)，所以用起來(lái)和原生app的體驗(yàn)很接近铺厨。
大家可以做這樣一個(gè)試驗(yàn)：
- 創(chuàng)建一個(gè)項(xiàng)目
- 運(yùn)行npm run build
- 然后在本地開(kāi)一個(gè)服務(wù)器缎玫，把build目錄中的內(nèi)容放在服務(wù)器的根目錄下
- 通過(guò)localhost的域名訪問(wèn)服務(wù)器
- 訪問(wèn)過(guò)一次之后硬纤，斷掉網(wǎng)絡(luò)，重新訪問(wèn)
你會(huì)發(fā)現(xiàn)碘梢，即使沒(méi)有網(wǎng)絡(luò)咬摇，這個(gè)時(shí)候依然可以訪問(wèn)你的應(yīng)用。需要注意的是煞躬，只有打包生成線上版本的react項(xiàng)目時(shí)，registerServiceWorker.js才會(huì)有效逸邦。本地開(kāi)發(fā)時(shí)恩沛，這個(gè)文件沒(méi)什么效果，因?yàn)槿绻镜亻_(kāi)發(fā)使用這個(gè)文件缕减，有可能會(huì)因?yàn)榫彺嬖斐烧{(diào)試問(wèn)題雷客。
還需要注意的是，項(xiàng)目在本地桥狡，通過(guò)localhost域名訪問(wèn)搅裙，支持http協(xié)議。如果真正放到線上裹芝，如果想讓registerServiceWorker.js生效部逮，服務(wù)器必須采用https協(xié)議，這也是為什么很多同學(xué)本地測(cè)試好用嫂易，線上就不好用的原因兄朋。
registerServiceWorker.js中的這些功能，并不是React所獨(dú)創(chuàng)的內(nèi)容怜械，而是React對(duì)PWA的一個(gè)實(shí)現(xiàn)颅和，PWA未來(lái)的發(fā)展前景不錯(cuò)，從擴(kuò)展視野角度也值得大家一看缕允，如果你想了解更多峡扩，可以訪問(wèn)PWA的官方手冊(cè)，這里講解了PWA底層關(guān)于serviceWorker很多的內(nèi)容障本，非常有趣：
https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0?codelabs.developers.google.com
