使用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很多的內容，非常有趣：

create-react-app創建的項目中registerServiceWorker.js文件的作用