NEXT-PWA 崩溃

问题描述

我是 service-workers 的新手，我用 next-pwa 做了它，但它崩溃了：/ 第一次加载它工作得很好，在另一个页面上导航也很棒，但是几秒钟后当我回到缓存页面时它崩溃了，在关于文件的网络选项卡中写入 404 not found 并且在控制台中我已经磨损：加载失败的脚本源为“http://localhost:3000/_next/static/chunks/pages/admin.js?ts =1626295746921”。同样的警告是针对其他一些页面，一些页面正在工作但也找不到动态导入的文件：|有什么想法吗？

这是我的 next.config.js

const withPlugins = require("next-compose-plugins");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",});
const withPWA = require("next-pwa");

const nextConfig = {
  future: { webpack5: true },images: {
    domains: [
      "localhost","icito.ge","api.icito.ge","assets.vercel.com","via.placeholder.com","mine-front-new.vercel.app",],},};

module.exports = withPlugins([
  [withBundleAnalyzer],nextConfig,[
    withPWA,{
      pwa: {
        dest: "public",register: true,skipwaiting: true,cacheOnFrontEndNav: true,fallbacks: {
          image: "/static/images/fallback.png",]
]);

这是我的 service-Worker.js

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

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: !0 })]
  }),'GET'
)
// registerRoute(
//   /^https:\/\/fonts\.(?:googleapis|gstatic)\.com\/.*/i,//   new CacheFirst({
//     cacheName: 'google-fonts',//     plugins: [new ExpirationPlugin({ maxEntries: 4,maxAgeSeconds: 31536e3,purgeOnQuotaError: !0 })]
//   }),//   'GET'
// )
registerRoute(
  /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,new StaleWhileRevalidate({
    cacheName: 'static-font-assets',plugins: [new ExpirationPlugin({ maxEntries: 4,maxAgeSeconds: 604800,'GET'
)
// disable image cache,so we Could observe the placeholder image when offline
registerRoute(
  /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,new NetworkFirst({
    cacheName: 'static-image-assets',plugins: [new ExpirationPlugin({ maxEntries: 64,'GET'
)
registerRoute(
  /\.(?:js)$/i,new StaleWhileRevalidate({
    cacheName: 'static-js-assets',plugins: [new ExpirationPlugin({ maxEntries: 62,'GET'
)
registerRoute(
  /\.(?:css|less)$/i,new StaleWhileRevalidate({
    cacheName: 'static-style-assets',plugins: [new ExpirationPlugin({ maxEntries: 32,'GET'
)
registerRoute(
  /\.(?:json|xml|csv)$/i,new NetworkFirst({
    cacheName: 'static-data-assets',plugins: [new ExpirationPlugin({ maxEntries: 40,'GET'
)
registerRoute(
  /\/api\/.*$/i,new NetworkFirst({
    cacheName: 'apis',networkTimeoutSeconds: 10,plugins: [new ExpirationPlugin({ maxEntries: 16,'GET'
)
registerRoute(
  /.*/i,new NetworkFirst({
    cacheName: 'others','GET'
)

// following lines gives you control of the offline fallback strategies
// https://developers.google.com/web/tools/workBox/guides/advanced-recipes#comprehensive_fallbacks

// Use a stale-while-revalidate strategy for all other requests.
setDefaultHandler(new StaleWhileRevalidate())

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(({ event }) => {
  // The FALLBACK_URL entries must be added to the cache ahead of time,either
  // via runtime or precaching. If they are precached,then call
  // `matchPrecache(FALLBACK_URL)` (from the `workBox-precaching` package)
  // to get the response from the correct cache.
  //
  // Use event,request,and url to figure out how to respond.
  // One approach would be to use request.destination,see
  // https://medium.com/dev-channel/service-worker-caching-strategies-based-on-request-types-57411dd7652c
  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.svg');
      // 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 (将#修改为@）