TA貢獻1805條經驗 獲得超9個贊
首先讓我們澄清一些術語：
PWA（漸進式 Web 應用程序）是任何通過使用現代 Web API（例如 Service Worker、Notifications API 和 Web App Manifest）提供類似本機應用程序體驗的 Web 應用程序。
SPA（單頁應用程序）是一種網絡應用程序，可將其 URL 重定向到index.html，然后使用 JavaScript 更新頁面內容，而無需index.html再次請求。
PWA 可以是 SPA，也可以是傳統(tǒng)的（多頁面）網絡應用程序。因此，對您的問題的嚴格回答可能涉及任何語言的任何 Web 框架，無論是后端還是前端。不過，我想你的問題更多地與 SPA 相關，而不是多頁應用程序，所以這個答案的其余部分與 SPA 相關
現在“如何編寫 SPA”是一個非常靈活和動態(tài)的領域，并且充滿了意見。確實沒有“正確的方法”來做到這一點，但有一些首選的結果，例如：
Web 可訪問性（即符合 WCAG）
加載性能（例如小包大小、快速首次繪制時間和其他指標）
運行時性能（例如避免卡頓）
用戶體驗
最后一點，用戶體驗，可能是主觀的。但有些事情可以強調：
維護用戶期望，例如后退按鈕的工作方式
使用 URL 存儲應用程序的狀態(tài)，以便共享和復制
但除此之外，真的沒有極限。我不能說這個答案的其余部分是“規(guī)范”或“最佳”實踐，但這些工具和方法對我有用。
路由器是 SPA 響應 URL 更改以更新頁面的一種方式。它們通常通過攔截頁面上的點擊并阻止正常的瀏覽器導航過程來工作。
有無數的 SPA 路由庫可以幫助您實現這些目標，以下是我過去使用過并可以推薦的三個：
PWA-Helpers Router小巧、簡單且不拘一格
Vaadin Router功能強大且流行
Simplr Router是新的和有前途的
對于中大型應用程序，通常建議使用狀態(tài)管理庫來處理頁面狀態(tài)，例如啟用了哪些按鈕、要獲取和顯示哪些數據等。
這里有很多選擇，但一些流行的選擇是：
終極版
MobX
阿波羅（用于 GraphQL）
尤其是最后一個非常強大。我寫了一個庫來幫助它與 Web 組件一起使用：Apollo Elements
對于其他事情，例如
如何編寫組件
如何構建生產
如何設置開發(fā)工作流程
舉報