Skip to content

Commit 4947795

Browse files
ITJesseITJesse
committed
Fix client-side errors caused by cached prefetch requests
1 parent 1e6af5f commit 4947795

File tree

1 file changed

+118
-87
lines changed

1 file changed

+118
-87
lines changed

‎cache.js‎

Lines changed: 118 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,184 +1,215 @@
1-
'use strict'
1+
"use strict";
22

33
// Workbox RuntimeCaching config: https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.RuntimeCachingEntry
44
module.exports = [
55
{
66
urlPattern: /^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,
7-
handler: 'CacheFirst',
7+
handler: "CacheFirst",
88
options: {
9-
cacheName: 'google-fonts-webfonts',
9+
cacheName: "google-fonts-webfonts",
1010
expiration: {
1111
maxEntries: 4,
12-
maxAgeSeconds: 365 * 24 * 60 * 60 // 365 days
13-
}
14-
}
12+
maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
13+
},
14+
},
1515
},
1616
{
1717
urlPattern: /^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,
18-
handler: 'StaleWhileRevalidate',
18+
handler: "StaleWhileRevalidate",
1919
options: {
20-
cacheName: 'google-fonts-stylesheets',
20+
cacheName: "google-fonts-stylesheets",
2121
expiration: {
2222
maxEntries: 4,
23-
maxAgeSeconds: 7 * 24 * 60 * 60 // 7 days
24-
}
25-
}
23+
maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
24+
},
25+
},
2626
},
2727
{
2828
urlPattern: /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
29-
handler: 'StaleWhileRevalidate',
29+
handler: "StaleWhileRevalidate",
3030
options: {
31-
cacheName: 'static-font-assets',
31+
cacheName: "static-font-assets",
3232
expiration: {
3333
maxEntries: 4,
34-
maxAgeSeconds: 7 * 24 * 60 * 60 // 7 days
35-
}
36-
}
34+
maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
35+
},
36+
},
3737
},
3838
{
3939
urlPattern: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
40-
handler: 'StaleWhileRevalidate',
40+
handler: "StaleWhileRevalidate",
4141
options: {
42-
cacheName: 'static-image-assets',
42+
cacheName: "static-image-assets",
4343
expiration: {
4444
maxEntries: 64,
45-
maxAgeSeconds: 24 * 60 * 60 // 24 hours
46-
}
47-
}
45+
maxAgeSeconds: 24 * 60 * 60, // 24 hours
46+
},
47+
},
4848
},
4949
{
5050
urlPattern: /\/_next\/image\?url=.+$/i,
51-
handler: 'StaleWhileRevalidate',
51+
handler: "StaleWhileRevalidate",
5252
options: {
53-
cacheName: 'next-image',
53+
cacheName: "next-image",
5454
expiration: {
5555
maxEntries: 64,
56-
maxAgeSeconds: 24 * 60 * 60 // 24 hours
57-
}
58-
}
56+
maxAgeSeconds: 24 * 60 * 60, // 24 hours
57+
},
58+
},
5959
},
6060
{
6161
urlPattern: /\.(?:mp3|wav|ogg)$/i,
62-
handler: 'CacheFirst',
62+
handler: "CacheFirst",
6363
options: {
6464
rangeRequests: true,
65-
cacheName: 'static-audio-assets',
65+
cacheName: "static-audio-assets",
6666
expiration: {
6767
maxEntries: 32,
68-
maxAgeSeconds: 24 * 60 * 60 // 24 hours
69-
}
70-
}
68+
maxAgeSeconds: 24 * 60 * 60, // 24 hours
69+
},
70+
},
7171
},
7272
{
7373
urlPattern: /\.(?:mp4)$/i,
74-
handler: 'CacheFirst',
74+
handler: "CacheFirst",
7575
options: {
7676
rangeRequests: true,
77-
cacheName: 'static-video-assets',
77+
cacheName: "static-video-assets",
7878
expiration: {
7979
maxEntries: 32,
80-
maxAgeSeconds: 24 * 60 * 60 // 24 hours
81-
}
82-
}
80+
maxAgeSeconds: 24 * 60 * 60, // 24 hours
81+
},
82+
},
8383
},
8484
{
8585
urlPattern: /\.(?:js)$/i,
86-
handler: 'StaleWhileRevalidate',
86+
handler: "StaleWhileRevalidate",
8787
options: {
88-
cacheName: 'static-js-assets',
88+
cacheName: "static-js-assets",
8989
expiration: {
9090
maxEntries: 32,
91-
maxAgeSeconds: 24 * 60 * 60 // 24 hours
92-
}
93-
}
91+
maxAgeSeconds: 24 * 60 * 60, // 24 hours
92+
},
93+
},
9494
},
9595
{
9696
urlPattern: /\.(?:css|less)$/i,
97-
handler: 'StaleWhileRevalidate',
97+
handler: "StaleWhileRevalidate",
9898
options: {
99-
cacheName: 'static-style-assets',
99+
cacheName: "static-style-assets",
100100
expiration: {
101101
maxEntries: 32,
102-
maxAgeSeconds: 24 * 60 * 60 // 24 hours
103-
}
104-
}
102+
maxAgeSeconds: 24 * 60 * 60, // 24 hours
103+
},
104+
},
105105
},
106106
{
107107
urlPattern: /\/_next\/data\/.+\/.+\.json$/i,
108-
handler: 'StaleWhileRevalidate',
108+
handler: "StaleWhileRevalidate",
109109
options: {
110-
cacheName: 'next-data',
110+
cacheName: "next-data",
111111
expiration: {
112112
maxEntries: 32,
113-
maxAgeSeconds: 24 * 60 * 60 // 24 hours
114-
}
115-
}
113+
maxAgeSeconds: 24 * 60 * 60, // 24 hours
114+
},
115+
plugins: [
116+
{
117+
cacheWillUpdate: async ({ request, response }) => {
118+
if (
119+
request.headers.get("x-middleware-prefetch") ||
120+
response.headers.get("x-middleware-skip")
121+
)
122+
return null;
123+
if (response.status === 200) {
124+
return response;
125+
}
126+
return null;
127+
},
128+
},
129+
{
130+
cachedResponseWillBeUsed: async ({
131+
cacheName,
132+
request,
133+
matchOptions,
134+
cachedResponse,
135+
event,
136+
}) => {
137+
if (
138+
cachedResponse &&
139+
cachedResponse.headers.get("x-middleware-skip")
140+
)
141+
return null;
142+
return cachedResponse;
143+
},
144+
},
145+
],
146+
},
116147
},
117148
{
118149
urlPattern: /\.(?:json|xml|csv)$/i,
119-
handler: 'NetworkFirst',
150+
handler: "NetworkFirst",
120151
options: {
121-
cacheName: 'static-data-assets',
152+
cacheName: "static-data-assets",
122153
expiration: {
123154
maxEntries: 32,
124-
maxAgeSeconds: 24 * 60 * 60 // 24 hours
125-
}
126-
}
155+
maxAgeSeconds: 24 * 60 * 60, // 24 hours
156+
},
157+
},
127158
},
128159
{
129160
urlPattern: ({ url }) => {
130-
const isSameOrigin = self.origin === url.origin
131-
if (!isSameOrigin) return false
132-
const pathname = url.pathname
161+
const isSameOrigin = self.origin === url.origin;
162+
if (!isSameOrigin) return false;
163+
const pathname = url.pathname;
133164
// Exclude /api/auth/callback/* to fix OAuth workflow in Safari without impact other environment
134165
// Above route is default for next-auth, you may need to change it if your OAuth workflow has a different callback route
135166
// Issue: https://github.com/shadowwalker/next-pwa/issues/131#issuecomment-821894809
136-
if (pathname.startsWith('/api/auth/')) return false
137-
if (pathname.startsWith('/api/')) return true
138-
return false
167+
if (pathname.startsWith("/api/auth/")) return false;
168+
if (pathname.startsWith("/api/")) return true;
169+
return false;
139170
},
140-
handler: 'NetworkFirst',
141-
method: 'GET',
171+
handler: "NetworkFirst",
172+
method: "GET",
142173
options: {
143-
cacheName: 'apis',
174+
cacheName: "apis",
144175
expiration: {
145176
maxEntries: 16,
146-
maxAgeSeconds: 24 * 60 * 60 // 24 hours
177+
maxAgeSeconds: 24 * 60 * 60, // 24 hours
147178
},
148-
networkTimeoutSeconds: 10 // fall back to cache if api does not response within 10 seconds
149-
}
179+
networkTimeoutSeconds: 10, // fall back to cache if api does not response within 10 seconds
180+
},
150181
},
151182
{
152183
urlPattern: ({ url }) => {
153-
const isSameOrigin = self.origin === url.origin
154-
if (!isSameOrigin) return false
155-
const pathname = url.pathname
156-
if (pathname.startsWith('/api/')) return false
157-
return true
184+
const isSameOrigin = self.origin === url.origin;
185+
if (!isSameOrigin) return false;
186+
const pathname = url.pathname;
187+
if (pathname.startsWith("/api/")) return false;
188+
return true;
158189
},
159-
handler: 'NetworkFirst',
190+
handler: "NetworkFirst",
160191
options: {
161-
cacheName: 'others',
192+
cacheName: "others",
162193
expiration: {
163194
maxEntries: 32,
164-
maxAgeSeconds: 24 * 60 * 60 // 24 hours
195+
maxAgeSeconds: 24 * 60 * 60, // 24 hours
165196
},
166-
networkTimeoutSeconds: 10
167-
}
197+
networkTimeoutSeconds: 10,
198+
},
168199
},
169200
{
170201
urlPattern: ({ url }) => {
171-
const isSameOrigin = self.origin === url.origin
172-
return !isSameOrigin
202+
const isSameOrigin = self.origin === url.origin;
203+
return !isSameOrigin;
173204
},
174-
handler: 'NetworkFirst',
205+
handler: "NetworkFirst",
175206
options: {
176-
cacheName: 'cross-origin',
207+
cacheName: "cross-origin",
177208
expiration: {
178209
maxEntries: 32,
179-
maxAgeSeconds: 60 * 60 // 1 hour
210+
maxAgeSeconds: 60 * 60, // 1 hour
180211
},
181-
networkTimeoutSeconds: 10
182-
}
183-
}
184-
]
212+
networkTimeoutSeconds: 10,
213+
},
214+
},
215+
];

0 commit comments

Comments
 (0)