如何使用 WorkBox 禁用缓存 service-worker

如何解决如何使用 WorkBox 禁用缓存 service-worker

我正在构建一个具有 service-work.ts 文件和 serviceWorkerRegistration.ts 的渐进式 Web 应用程序。目前，我的网站已缓存，但每当我部署更新时，该网站仍会显示已过时的缓存版本。

我已关注此链接的第二个回复：When and how does a PWA update itself? 这是在 service-worker.ts 文件中包含 ssr: true 行，如果我希望它更新但它仍然不起作用，请更改字符串。

我怀疑我的 service-worker 也被缓存并查看了此链接：How to clear cache of service worker? 但我不知道在哪里包含代码，因为它看起来与我拥有的文件完全不同。>

非常感谢可以帮助我解决此问题的任何帮助，尤其是仍然保留旨在加快加载时间的缓存策略的好处。

以下是我的 service-worker.ts 文件：

const version = '1.1.0-beta'

如有必要，这是我的 serviceWorkerRegistration.ts 文件：

import { clientsClaim } from 'workBox-core'
import { ExpirationPlugin } from 'workBox-expiration'
import { precacheAndRoute,createHandlerBoundToURL } from 'workBox-precaching'
import { registerRoute } from 'workBox-routing'
import { StaleWhileRevalidate } from 'workBox-strategies'

declare const self: ServiceWorkerGlobalScope

clientsClaim()

// Precache all of the assets generated by your build process.
// Their URLs are injected into the manifest variable below.
// This variable must be present somewhere in your service worker file,// even if you decide not to use precaching. See https://cra.link/PWA
precacheAndRoute(self.__WB_MANIFEST)

// Changing version number causes browser to re-cache all files.
const version = '1.1.0-beta'

// Set up App Shell-style routing,so that all navigation requests
// are fulfilled with your index.html shell. Learn more at
// https://developers.google.com/web/fundamentals/architecture/app-shell
const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$')
registerRoute(
  // Return false to exempt requests from being fulfilled by index.html.
  ({ request,url }: { request: Request; url: URL }) => {
    // If this isn't a navigation,skip.
    if (request.mode !== 'navigate') {
      return false
    }

    // If this is a URL that starts with /_,skip.
    if (url.pathname.startsWith('/_')) {
      return false
    }

    // If this looks like a URL for a resource,because it contains
    // a file extension,skip.
    if (url.pathname.match(fileExtensionRegexp)) {
      return false
    }

    // Return true to signal that we want to use the handler.
    return true
  },createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html'),)

// An example runtime caching route for requests that aren't handled by the
// precache,in this case same-origin .png requests like those from in public/
registerRoute(
  // Add in any other file extensions or routing criteria as needed.
  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'),// Customize this strategy as needed,e.g.,by changing to CacheFirst.
  new StaleWhileRevalidate({
    cacheName: 'images',plugins: [
      // Ensure that once this runtime cache reaches a maximum size the
      // least-recently used images are removed.
      new ExpirationPlugin({ maxEntries: 50 }),],}),)

// This allows the web app to trigger skipwaiting via
// registration.waiting.postMessage({type: 'SKIP_WAITING'})
self.addEventListener('message',(event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipwaiting()
  }
})

解决方法

我自己修复了它，通过在 serviceWorkerRegistration.ts 的 register() 函数中添加这段代码

window.addEventListener('activate',function (event) {
      event.waitUntil(
        caches.keys().then(function (cacheNames) {
          return Promise.all(
            cacheNames
              .filter(function (cacheName) {
                return true
              })
              .map(function (cacheName) {
                return caches.delete(cacheName)
              }),)
        }),)
    })