大佬教程收集整理的这篇文章主要介绍了NEXT-PWA 崩溃,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我是 service-workers 的新手,我用 next-pwa 做了它,但它崩溃了:/ 第一次加载它工作得很好,在另一个页面上导航也很棒,但是几秒钟后当我回到缓存页面时它崩溃了,在关于文件的网络选项卡中写入 404 not found 并且在控制台中我已经磨损:加载失败的脚本源为“http://localhost:3000/_next/static/chunks/pages/admin.Js?ts =1626295746921”。同样的警告是针对其他一些页面,一些页面正在工作但也找不到动态导入的文件:|有什么想法吗?@H_404_3@
这是我的 next.config.Js@H_404_3@
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@H_404_3@
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 (将#修改为@)
以上是大佬教程为你收集整理的NEXT-PWA 崩溃全部内容,希望文章能够帮你解决NEXT-PWA 崩溃所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。