next.js 添加 PWA 渐进式WEB应用(service-worker) 支持
本文仅作为 next 系列文章中的一部分,其他 next 文章参考: https://blog.jijian.link/categories/nextjs/
去 github 搜索了一把,估计是我关键词不对,没找到比较牛逼的插件。然后去 nextjs 官方仓库搜索,发现了这个东东 https://github.com/vercel/next.js/tree/canary/examples/with-next-offline,瞄了一眼 package.json 发现了这个插件 next-offline,瞅了一眼自述文件,貌似就是本文需要的插件,折腾一把,最终给 https://www.jijian.link/ 添加了 PWA 功能。
第一步:安装依赖
$ npm install --save-dev next-offline
第二步:修改配置
修改根目录配置文件 next.config.js
// next.config.js
const withOffline = require('next-offline') const nextConfig = {
// ...
} module.exports = withOffline(nextConfig)
第三步:重新生成
重新运行 npm run export 即可生成带有 PWA 功能的页面,当然 next-offline 还有其他高级配置,参考官方文档:https://github.com/hanford/next-offline
next.js 添加 PWA 渐进式WEB应用(service-worker) 支持的更多相关文章
- PWA渐进式web应用
PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送.在移动端利用标准化框架,让网页应用呈现 ...
- PWA 渐进式Web应用程序 - 解释
想象一下,如果一个网站上所有的功能都能够作为一个移动应用程序为用户所用——任何设备上都可以使用.可接收所有的通知.离线模式可用,为了实现这个愿景,2015年,谷歌创造了渐进式Web应用程序(PWA). ...
- [PWA] 1. Intro to Service worker
Service worker stays between our browser and noetwork requests. It can help to fetch data from cache ...
- 渐进式web应用 (PWA)
PWA(渐进式 Web 应用)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序. PWA的特点: Discoverable, 内容可以通过搜索引擎发现. Instal ...
- 渐进式web应用开发---service worker (二)
阅读目录 1. 创建第一个service worker 及环境搭建 2. 使用service worker 对请求拦截 3. 从web获取内容 4. 捕获离线请求 5. 创建html响应 6. 理解 ...
- 创建一个离线优先,数据驱动的渐进式 Web 应用程序
原文地址:Build an offline-first, data-driven PWA 译文出自:我的个人博客 概述 在本文中,您将学习如何使用 Workbox 和 IndexedDB 创建离线优先 ...
- Google_PWA_ServiceWork_渐进式 Web 应用_给应用提供离线体验
前言:今天结识了google PWA提供的一个对移动端Web应用提供离线体验的一个功能,感觉很有用.我这里不分享自己的写法和代码.官网文档说的很详细,直接粘过来大家看吧. 推荐官网地址:你的第一个渐进 ...
- PWA-H5 Web App优化探索之路(Service Worker,Lighthouse)
PWA是什么? Progressive Web App 渐进式web应用程序,简单来说,就是可以让你的WEB App,带来与原生App相媲美的用户体验.. 为什么要用PWA? 简单来说,是为了web应 ...
- 关于PWA ( Progressive web apps )
渐进式Web应用程序使用现代Web API以及传统的渐进式增强策略来创建跨平台Web应用程序.这些应用程序无处不在,并提供多种功能,使其具有与本机应用程序相同的用户体验优势.这套文档告诉您需要了解的所 ...
- [PWA] 2. Service worker life cycle
Once serive worker is registered, the first time we go to the app, we cannot see the logs from servc ...
随机推荐
- shell脚本实现Base64加解密
暂时不支持中文字符 脚本: #!/bin/bash # ##################################################################### # ...
- NoSuchAlgorithmException
今天在写UT时遇到了下面的问题: 1. 使用的powermock来处理static方法; 2. 静态方法里的却有使用到org.apache.http.client(4.3.1)的方法 异常如下: Ca ...
- Mac 配置多版本JDK
@ 目录 前言 一.下载并安装多个JDK版本 二.配置环境变量 三.切换JDK版本 四.下篇预告!!! 总结 前言 请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i. 提示:以下是本篇文章正文 ...
- IM开发者的零基础通信技术入门(十一):为什么WiFi信号差?一文即懂!
一.本文内容概述 WiFi对于现在的家庭来说,属于司空见惯的上网方式,但很多情况下,家里房间多.空间大.杂物乱的情况下,WiFi的信号就受影响.为什么WiFi信号会受影响?什么情况下该使用何种方式组网 ...
- Uniapp仿ChatGPT Stream流式输出(非Websocket)
前言 最近写一个chagpt小程序,流式输出可以使用websocket也可以使用stream来实现,这里就不折腾websocket的了,我发现uniapp实现流式输出的方式挺多的,主要是有些小程序还不 ...
- AutoGen入门-让两个AI自行聊天完成任务
AutoGen介绍 AutoGen 是一个开源编程框架,用于构建 AI 代理并促进多个代理之间的合作以解决问题.AutoGen 旨在提供一个易于使用和灵活的框架,以加速代理型 AI 的开发和研究,就像 ...
- IT系统架构的演化-copy
前言 一个成熟的大型网站(如淘宝.天猫.腾讯等)的系统架构并不是一开始设计时就具备完整的高性能.高可用.高伸缩等特性的,它是随着用户量的增加,业务功能的扩展逐渐演变完善的,在这个过程中,开发模式.技术 ...
- 防止SQL注入的五种方法
1.首先看一下下面两个sql语句的区别: <select id="selectByNameAndPassword" parameterType="java.util ...
- 2025 最佳免费商用文本转语音模型: Kokoro TTS
在文本转语音(TTS)技术领域,一项突破性的进展引起了广泛关注--Kokoro TTS 模型凭借其卓越性能和完全免费的商用许可,成为目前最出色的 TTS 解决方案之一.基于广受欢迎的开源框架 Styl ...
- MongoDB:分页查询(统计查询和分页列表查询)、排序查询、正则的复杂条件查询、比较查询、包含查询、条件连接查询