該文件主要涉及到離線支持和網絡恢復能力
一個好的漸進式 Web 應用,不論網絡狀況如何都能立即加載,並且在不需要網絡請求的情況下也能展示 UI (即離線時)。
再次訪問 http://Housing.com 漸進式 Web 應用(使用 React 和 Redux 構建)能夠立即加載離線緩存的 UI。 我們可以用 Service Worker 實現這一需求。Service Worker 是一個后台 worker,可以看做是可編程的代理,允許開發者控制 request 執行其他操作。
使用 Service Worker,React 應用得以(部分或全部)離線工作。
注意:
注意:Service worker 能夠應用於漸進式增強。盡管瀏覽器支持程度還有待提升,但只要網絡暢通,不支持此特性的用戶也能充分體驗 PWA (漸進式 Web 應用程序)。
其他類似問題:
使用React官方的腳手架工具create-react-app創建的項目,目錄中會存在serviceWorker.js這個文件,這個文件的作用是什么呢?
解釋PWA:
這個文件可以使用也可以不使用,使用它可以使你的react項目變成一個PWA(Progressive Web Application)
通俗理解:
也就是說,在線上,只要訪問過一次你的網站,下一次即使沒有網絡,這個應用依然可以被訪問。當然,它的好處不僅這么一點點,
在移動端打開項目時,如果你用的是chrome或者firefox這樣的高級瀏覽器,瀏覽器會給你的頁面不太一樣的顯示,你的網頁看起來會更像原生App,實際上體驗也更爽。
相關文件:manifest.json
在項目的public目錄下,存在一個manifest.json文件,你可以在這里對你的網頁做一些配置,當用戶訪問網頁,生成一個網頁的桌面快捷方式時,會以這個文件中的內容作為圖標和文字的
顯示內容。
配置好manifest.json, 使用registerServiceWorker.js,用戶完全可以把你的網頁快捷方式放到桌面上,因為你的網頁此時支持離線訪問,所以用起來和原生app的體驗很接近。
注意應用場景:打包后生效、打包后生效、打包后生效
需要注意的是,只有打包生成線上版本的react項目時,registerServiceWorker.js才會有效。本地開發時,這個文件沒什么效果,因為如果本地開發使用這個文件,
有可能會因為緩存造成調試問題。
如果真正放到線上,如果想讓registerServiceWorker.js生效,服務器必須采用https協議,這也是為什么很多同學本地測試好用,線上就不好用的原因。
.