[next.js]pwa缓存

配置Next.js (v14+ App Router模式) 使其支持PWA缓存，配置server worker和mainfest.json，让项目支持离线访问和可安装。
安装依赖next-pwa

1. npm i next-pwa

复制代码

配置next.config.js

1. const path = require('path');
3. const withPWAInit = require('next-pwa');
5. // 判断环境
6. const isProd = ['production'].includes(process.env.NODE_ENV);
8. /** @type {import('next-pwa').PWAConfig} */
9. const withPWA = withPWAInit({
10.   dest: 'public',
11.   disable: !isProd,
12.   // Solution: https://github.com/shadowwalker/next-pwa/issues/424#issuecomment-1399683017
13.   buildExcludes: ['app-build-manifest.json'],
14. });
16. const generateAppDirEntry = (entry) => {
17.   const packagePath = require.resolve('next-pwa');
18.   const packageDirectory = path.dirname(packagePath);
19.   const registerJs = path.join(packageDirectory, 'register.js');
21.   return entry().then((entries) => {
22.     // Register SW on App directory, solution: https://github.com/shadowwalker/next-pwa/pull/427
23.     if (entries['main-app'] && !entries['main-app'].includes(registerJs)) {
24.       if (Array.isArray(entries['main-app'])) {
25.         entries['main-app'].unshift(registerJs);
26.       } else if (typeof entries['main-app'] === 'string') {
27.         entries['main-app'] = [registerJs, entries['main-app']];
28.       }
29.     }
30.     return entries;
31.   });
32. };
34. /** @type {import('next').NextConfig} */
35. const nextConfig = {
36.         // ... 你的next.config配置项
37.         ...
38.         webpack: (config) => {
39.             const entry = generateAppDirEntry(config.entry);
40.                     config.entry = () => entry;
41.             return config;
42.           },
43. }
45. module.exports = withPWA(nextConfig);

复制代码

以上配置 我让其在生产情况主动创建server worker和workbox等文件并在欣赏器加载时初始化init sw文件，第二次访问时便可以创建sw缓存

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告