[next.js]pwa缓存

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

安装依赖next-pwa

npm i next-pwa

配置next.config.js

const path = require('path');const withPWAInit = require('next-pwa');// 判断环境
const isProd = ['production'].includes(process.env.NODE_ENV);/** @type {import('next-pwa').PWAConfig} */
const withPWA = withPWAInit({dest: 'public',disable: !isProd,// Solution: https://github.com/shadowwalker/next-pwa/issues/424#issuecomment-1399683017buildExcludes: ['app-build-manifest.json'],
});const generateAppDirEntry = (entry) => {const packagePath = require.resolve('next-pwa');const packageDirectory = path.dirname(packagePath);const registerJs = path.join(packageDirectory, 'register.js');return entry().then((entries) => {// Register SW on App directory, solution: https://github.com/shadowwalker/next-pwa/pull/427if (entries['main-app'] && !entries['main-app'].includes(registerJs)) {if (Array.isArray(entries['main-app'])) {entries['main-app'].unshift(registerJs);} else if (typeof entries['main-app'] === 'string') {entries['main-app'] = [registerJs, entries['main-app']];}}return entries;});
};/** @type {import('next').NextConfig} */
const nextConfig = {// ... 你的next.config配置项...webpack: (config) => {const entry = generateAppDirEntry(config.entry);config.entry = () => entry;return config;},
}module.exports = withPWA(nextConfig);

以上配置 我让其在生产环境自动创建server worker和workbox等文件并在浏览器加载时初始化init sw文件,第二次访问时便可以创建sw缓存
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/22801.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

让代码变得优雅和高效,给你以下建议,推荐每个人都就要看看

编写高效且优雅的Java代码不仅关乎程序的性能,也涉及到代码的可读性、可维护性和遵循的最佳实践。下面是一些关键原则和示例,帮助你实现这一目标: 1. 遵循编码规范 命名规范:变量、方法、类名应具有描述性,遵循驼峰命…

ValueError: Couldn‘t instantiate the backend tokenizer from one of: (1)·

ValueError: Couldn’t instantiate the backend tokenizer from one of: (1) a t 解决方案 !pip install transformers[sentencepiece]

想要成长就要持续地学习,而如何学习更有效率呢

为什么很多人学了知识,但是总感觉记不住,用不上呢? 在学习的过程中,为什么总感觉没什么进步呢? 看了很多书,为什么总感觉没什么用呢? 要说明这些问题,首先我们要知道一个好的、完整的…

Chrome跳转新的标签页自动打开控制台设置方法

Chrome跳转新的标签页自动打开控制台设置方法 文章目录 Chrome跳转新的标签页自动打开控制台设置方法1. 首先打开控制台2. 点击设置3. 选择Preferences -> Global -> 选中 Auto-open DevTools for popups4. 回到控制台勾选 preserve log保留日志![请添加图片描述](https:…

python:Dataframe字符串合并的高效方法(一文详解)

python:Dataframe字符串合并的高效方法(一文详解) 1.摘要2.讲解2个场景的解决方案2.1 对于场景1:合并df中其中几列字符串的场景,有以下2种方案。2.2 对于场景2:将df中的字符串与外部字符串合并,…

String-拼接和反转1

在 Java 中,字符串(String)是非常核心的一个类,它代表字符序列,可以用于存储和操作文本。在编程中,字符串的拼接和反转是常见的操作,下面我将详细解释这两种操作。 ### 字符串拼接 字符串拼接是…

图像背景去除工具:removebg

文章目录 简介面向不同用户价格 简介 removebg,就是remove background,是一款智能图片背景去除工具。 在免费使用时,用到的是本地的CPU。我第一次试用时,图片刚上传之后,电脑的帧率便直线下降,鼠标都拖不…

硬件26、EDA绘制板框

1、放置-板框-矩形 2、在pcb上绘制出需要大小的板框 3、设置板框四个角为圆弧状,在右侧属性栏设置圆角半径

计算机网络—交换机综合实验

一、实验内容 交换机基本配置设置虚拟局域网VLAN跨交换机实现VLAN2台交换机间用2条链路连接,实现2条链路聚合 二、实验环境 Cisco Packet Tracer 三、实验拓扑 1、 设置虚拟局域网VLAN 2、跨交换机实现VLAN 3、2台交换机间用2条链路连接,实现2条链…

像图一样交流:为大语言模型编码图

译者 | 高永祺 单位 | 东北大学自然语言处理实验室 原文链接:https://blog.research.google/2024/03/talk-like-graph-encoding-graphs-for.html 1.作者介绍 Bahare Fatemi,谷歌蒙特利尔研究部门的研究科学家,专门从事图表示学习和自然语言…

智能推荐算法应用:如何提升淘宝在线扭蛋机用户购物体验

在淘宝的在线扭蛋机平台上,用户的购物体验至关重要。为了提升这一体验,我们引入了智能推荐算法,帮助用户发现他们可能感兴趣的扭蛋产品。这一技术的应用不仅提高了用户的购物效率,还大大增强了用户的购物乐趣。 一、智能推荐算法…

JWT快速入门

文章目录 概念基本概念JWT组成 JWT使用准备工作JWT演示 参考来源 概念 基本概念 JWT全称是JSON Web Tokens,它是一种通用的基于文本的消息传输格式。常作为用户进入Web系统的令牌 JWT组成 JWT由三段Base64编码组成,它们之间用.分隔,从左到…

洛谷 CF358B Dima and Text Messages 题解

思路 首先按照操作一和操作二得到一个没有进行操作三的字符串 s s s&#xff0c;再判断 s s s 是否是题目给定的字符串的子序列即可。 Code #include<iostream> using namespace std; signed main() {ios::sync_with_stdio(false),cin.tie(0),cout.tie(0);int n,cnt…

spring 中 BeanPostProcessor 的调用时机

BeanPostProcessor 这个接口是所有后置处理器的父级接口&#xff0c;下面看看这个接口定义了哪几个方法&#xff1a; Nullable default Object postProcessBeforeInitialization(Object bean, String beanName) throws BeansException {return bean; } Nullable default Obje…

做抖音小店卖什么最赚钱?精准锁定爆款的技巧!新手商家必看

哈喽~我是电商月月 做抖音小店的核心就是选品&#xff0c;商品好&#xff0c;出单的几率就多&#xff0c;那么怎么选中一个好的商品&#xff0c;就是每个商家必须细琢的一个技巧&#xff01; 为了解答这个疑惑&#xff0c;今天月月就给大家介绍几个赚钱的类别&#xff0c;并教…

临界区保护

1. 临界区的保护实际应用中可能需要的场合: 调用公共函数的代码(不可重入函数) 读取或者修改变量(全局变量) 使用硬件资源(MCU的ram、flash、uart、spi、adc等) 对时序有精准要求的操作(I2C通讯) 某些用户不想被打断的代码(比如 printf 打印),串口接收的状态、接收…

力扣每日一题 6/5

3072.将元素分配到两个数组中 II [困难] 题目&#xff1a; 给你一个下标从 1 开始、长度为 n 的整数数组 nums 。 现定义函数 greaterCount &#xff0c;使得 greaterCount(arr, val) 返回数组 arr 中 严格大于 val 的元素数量。 你需要使用 n 次操作&#xff0c;将 nums 的…

用增之Google GA4F

目录 简介 Google开发文档 开发提炼(走过的坑) DDL代码环节 1、深层链接简介 2、assetlinks.json发布 3、 测试deeplink 4、完成以上操作步骤DDL的前置工作已经做好,在已安装app的情况,所有打开app的链路已经走通,最后就是Firebase 来接收ddl

semaphore | 使用web界面的ansible来批量运维 linux、windows主机

Ansible 的现代化 UI &#xff0c;可以轻松管理和运行 Ansible playbook&#xff0c;功能强大&#xff0c;操作简单&#xff0c;支持中文。 文章目录 一、系统功能说明二、系统安装2.1 直接安装2.2 docker 安装 三、系统使用3.1 建立存储库3.2 编写代码3.3 建立主机配置3.3 建立…

C++课程设计杭电题目(下)

2076.夹角有多大(题目已修改,注意读题) 题目描述 http://acm.hdu.edu.cn/showproblem.php?pid2076 Problem Description 时间过的好快&#xff0c;一个学期就这么的过去了&#xff0c;xhd在傻傻的看着表&#xff0c;出于对数据的渴望&#xff0c;突然他想知道这个表的时针…