如何生成 URL 並使用 PWA 離線訪問它？

Question

我正在為我的網站使用此模板並嘗試實施 PWA，但后來意識到如果我使用阻止 url 共享的代碼，則 PWA 無法脫機工作。 我知道這是因為 url 沒有兌現，但我無法兌現它，因為它基於頁面打開的時間。 有人有辦法解決嗎？ 我正在關注的教程在這里。

如果你想看到我的網站，這里是鏈接。

Answer 1

問題是 hash 片段。 URL 的這部分沒有傳遞給服務器，因此也沒有傳遞給 service worker 緩存。

我建議的初始解決方案是在獲取事件處理程序中的服務工作者中創建當前或最后響應 object 變量。 請記住 memory 並在請求新文檔 (HTML) 時覆蓋它（無需為 CSS、腳本、圖像等執行此操作）。 然后，當用戶想要執行您想要緩存當前頁面的操作時，您可以向 service worker 發送一條消息，然后緩存該請求。 因為這不是真正的響應並且與時間戳相關聯，所以我可能會將頁面緩存為 IndexedDB 中的數據，並帶有與記錄關聯的時間戳。

這不是一個簡單而干凈的解決方案，但您的問題要求有點異常，需要比大多數解決方案更復雜的解決方案。