服務工作者在反應中緩存的路由

Question

我們正在為我工作的公司建立一個新網站，該網站是使用 CRA 用 React 編寫的。 瀏覽器推送通知和 PWA 都是必需的，因此 service worker 是必不可少的，但是我相信 service worker 負責一些相當重要的緩存問題。

該網站尚未投入生產，但是我昨天添加了一個新頁面（之前已經發生過幾次），並且一旦部署到我們的開發環境中，辦公室中的任何人都無法訪問它 - 他們只是被重定向到主頁（如如果路由不存在），直到他們清除緩存，然后路由加載沒有問題。

我已經閱讀了一些關於語義版本控制的文章，但是這些文章似乎都使用 NPM 而不是紗線，並且使用 npm 版本補丁等在本地進行版本控制（這對於一個 8 人的團隊來說並不是很好的項目）。

我們使用 MS Azure 作為構建和發布管道，如果需要，我認為這將是設置版本的最佳位置。

我的問題是避免這個問題的步驟是什么，我是否認為版本控制會緩解？

Answer 1

在這種情況下，語義版本控制沒有任何意義，您很可能一直在閱讀有關發布到 NPM 供全世界使用的包（庫、框架）的信息。 在 CRA 項目和大多數其他 web 項目中，應用程序的版本控制由構建工具進行，因為它們根據文件內容命名文件。 文件名包括內容的 hash 並在內容更改時自動進行版本控制，例如。 app.iue9234980s.js 變成 app.92384oujiuoisdf.js 等等。

--

如果您使用 CRA 提供的默認Service Worker 設置，那么您應該查看 src/serviceWorker.js。 在該文件的評論中它說

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.

這里發生的是 SW 和構建過程使用配置為使用預緩存策略的 Workbox SW 庫。 在此策略中，即使有新版本可用，用戶也會從瀏覽器的緩存中獲取先前緩存的最后一個版本，然后在后台 SW 更新緩存，並在另一次訪問時用戶獲取較新的版本。 這當然意味着用戶可能總是“遲到”一個版本。

如果這種行為不是您想要的，那么您需要更改 src/serviceWorker.js 並可能在 CRA 文件中的某處進行一些配置。 例如，您應該在 Google 上搜索“帶有 cra 的自定義服務人員”之類的內容。

為了更好地掌握正在發生的事情——尤其是在不同配置的情況下什么是正確和預期的行為——我真的建議（每個人）閱讀谷歌關於 SW 的入門，這里： https://developers.google.com/web/fundamentals/ Primers /service-workers了解 SW 的基本原理后，檢查 Workbox 庫https://developers.google.com/web/tools/workbox以了解它可以為您的應用程序提供什么可能很有用。

閱讀和理解 SW 的不同方面是這里的關鍵——用 SW 打自己的腳非常容易:)