有多個頁面的PWA

Question

我正在爲我的網站創建一個PWA。

這是一個使用jquery構建的多頁面網站。現在我已經創建了一個由該網站的公共標題組成的應用程序外殼。我的網站具有良好的搜索引擎優化排名，並通常排名前3名。

現在，當我想從頁面A轉到頁面B時，我想要預加載頁眉，並且顯示加載程序直到從服務器收到頁面B的數據。 我仍然使用jquery，因爲大多數模塊已經內置在那裏，我不想重建它們。

現在唯一能想到的解決方案是使用ajax調用或在前端使用路由。我對這些解決方案几乎沒有疑問和看法，並且想知道我是否正確。

1）使用Ajax - 當調用頁面B時，響應中的HTML將只有頭文件和加載程序以及一個js文件，其中將具有用於加載頁面上數據的ajax代碼。 一旦緩存了包含頭文件和加載器的HTML將從緩存中獲取並且會調用Ajax調用數據。

如果我錯了，請糾正我。

現在，我看到的問題是，考慮我有第3頁，並希望它具有相同的功能，那麼我將在緩存中再次存儲相同的頭文件以實現此目的。

2）我聽說前臺的路線不適合搜索引擎優化或需要額外的努力，使他們對搜索引擎友好。所以我不希望我的排名因此受到影響。此外，我對於在Jquery或者Core Javascript中處理所有事情的好路由庫沒有任何想法。

任何幫助將不勝感激。我現在非常困惑，所以任何正確的指導或參考都會有幫助。

Answer 1

關於this blog post中的可能選項有一些指導。

鑑於當前設置，你的慾望規定不能改善你的建築太多了，我建議你嘗試在分別緩存頁眉，頁腳和動態內容服務工作者實現補充。然後，服務工作人員可以連接頭（從緩存）+內容體（通過fetch()或可能從緩存中檢索）+頁腳，並返回完整的HTML文檔作爲響應。

您需要開始將部分HTML頁眉+頁腳展示爲具有可能被預先緩存的唯一URL的資源，您現在可能不會這樣做，並且您還必須僅公開內容正文通過一個唯一的URL給出頁面，並確保它們都是可以連接而不需要任何複雜模板邏輯的格式。

所以這是一些額外的工作，但它不涉及重寫不支持服務人員的客戶什麼，您的網站將繼續尋找和表現爲這些客戶端相同。