NEXP PWA /static/chunks 404 未找到

问题描述

我是在 Nextjs 中使用 service worker 的新手，尝试了一切，但我没有结果，它没有捕获或没有更新一些动态导入的组件和应用程序崩溃，这是我使用工作箱的 service-worker.js 配置， 我已经尝试过 self.skipwaiting(),workBox-core skipwaiting(),在 next.config.js skipwaiting: true/false,不知道该怎么做:|:| 错误：GET 状态 404（未找到） http://localhost:3000/_next/static/chunks/components_navbar_desktop_NewNavbar_js.js

有人可以帮忙吗？ 感谢您的关注

import { skipwaiting,clientsClaim } from 'workBox-core'
import { ExpirationPlugin } from 'workBox-expiration'
import { NetworkFirst,StaleWhileRevalidate } from 'workBox-strategies'
import { registerRoute,setCatchHandler } from 'workBox-routing'
import { matchPrecache,precacheAndRoute,cleanupOutdatedCaches } from 'workBox-precaching'

// self.skipwaiting()
clientsClaim()

// must include following lines when using inject manifest module from workBox
// https://developers.google.com/web/tools/workBox/guides/precache-files/workBox-build#add_an_injection_point
const WB_MANIFEST = self.__WB_MANIFEST
// Precache fallback route and image
WB_MANIFEST.push(
  {
    url: '/fallback',revision: '1234567890'
  }
)
precacheAndRoute(WB_MANIFEST)

cleanupOutdatedCaches()
registerRoute(
  '/',new NetworkFirst({
    cacheName: 'start-url',plugins: [new ExpirationPlugin({ maxEntries: 1,maxAgeSeconds: 86400,purgeOnQuotaError: true })]
  }),'GET'
)
// registerRoute(
//   /^https:\/\/fonts\.(?:googleapis|gstatic)\.com\/.*/i,//   new CacheFirst({
//     cacheName: 'google-fonts',//     plugins: [new ExpirationPlugin({ maxEntries: 4,maxAgeSeconds: 31536e3,purgeOnQuotaError: true })]
//   }),//   'GET'
// )
registerRoute(
  new RegExp('\.(eot|otf|ttc|ttf|woff|woff2|font.css)$'),new StaleWhileRevalidate({
    cacheName: 'fonts',plugins: [new ExpirationPlugin({ maxEntries: 4,maxAgeSeconds: 604800,'GET'
)
// disable image cache,so we Could observe the placeholder image when offline
registerRoute(
  new RegExp('\.(jpg|jpeg|gif|png|svg|ico|webp)$'),new StaleWhileRevalidate({
    cacheName: 'images',plugins: [new ExpirationPlugin({ maxEntries: 64,'GET'
)
registerRoute(
  new RegExp('\.js$'),new StaleWhileRevalidate({
    cacheName: 'js',plugins: [new ExpirationPlugin({ maxEntries: 32,'GET'
)
registerRoute(
  new RegExp('(\/sales\/\d+)'),new StaleWhileRevalidate({
    cacheName: 'sale-pages','GET'
)
registerRoute(
  new RegExp('\.css$'),new StaleWhileRevalidate({
    cacheName: 'styles','GET'
)

registerRoute(
  /\.(json|xml|csv)$/i,new NetworkFirst({
    cacheName: 'static-data-assets','GET'
)

registerRoute(
  /.*/i,new NetworkFirst({
    cacheName: 'others',networkTimeoutSeconds: 10,'GET'
)

  switch (event.request.destination) {
    case 'document':
      // If using precached URLs:
      return matchPrecache('/fallback');
      // return caches.match('/fallback')
      break
    case 'image':
      // If using precached URLs:
      return matchPrecache('/static/images/fallback.png');
      // return caches.match('/static/images/fallback.png')
      break
    case 'font':
    // If using precached URLs:
    // return matchPrecache(FALLBACK_FONT_URL);
    //return caches.match('/static/fonts/fallback.otf')
    //break
    default:
      // If we don't have a fallback,just return an error response.
      return Response.error()
  }
})

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）