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 ...
随机推荐
- conda虚拟环境中设置环境变量
引言 使用conda创建虚拟环境就是为了方便管理,各个环境之间的模块是独立的.有时候我们在做项目的时候需要设置一下环境变量才方便实用,但是不想影响到其他的虚拟环境,因此不能再系统的环境变量里面设置. ...
- 龙哥量化:TB交易开拓者_趋势跟踪策略_多策略对单品种_A00011880206期货量化策略,严格的用样本内参数, 跑样本外数据,滚动测试未来行情
如果您需要代写技术指标公式, 请联系我. 龙哥QQ:591438821 龙哥微信:Long622889 也可以把您的通达信,文华技术指标改成TB交易开拓者的自动交易量化策略. 量化策略介绍 投资标的: ...
- 详解AQS四:ReentrantLock条件队列原理
ReentrantLock的条件队列是实现"等待通知"机制的关键,之前在<java线程间通信:等待通知机制>一文中讲过了使用ReentrantLock实现多生产者.多消 ...
- error: undefined reference to `cv::imread(cv::String const&, int)' 解决方法
方法1 原文链接:https://blog.csdn.net/WhiteLiu/article/details/72901520 编译时出现下列错误: undefined reference to ' ...
- 在VS Code中vue引入新版vue-awesome-swiper编译时提示swiper/dist/css/swiper.css无法导入的问题
在安装vue-awesome-swiper时报错swiper/dist/css/swiper.min.css找不到,如下如: 有的回答安装6.0版本的话需要引入另外一个css import 'swip ...
- 网络编程入门从未如此简单(三):什么是IPv6?漫画式图文,一篇即懂!
本文由小枣君分享,文案:小枣君.漫画:杨洋,来自鲜枣课堂,有少许改动,原文链接见文末. 1.引言 网络编程能力对于即时通讯技术开发者来说是基本功,而计算机网络又是网络编程的理论根基,因而深刻准确地理解 ...
- 【译】在分析器中使用 Meter Histogram(直方图)解锁见解
您是否正在与应用程序中的性能瓶颈作斗争?不要再观望了!Visual Studio 2022 在其性能分析套件中引入了 Meter Histogram(直方图)功能,为您提供了前所未有的分析和可视化直方 ...
- 深度学习基础理论————DeepSpeed
DeepSpeed原理 DeepSpeed 是由微软开发的一种深度学习优化库,专为高性能训练和推理而设计,尤其适用于大规模深度学习模型(如 GPT 系列.BERT 等).它通过一系列技术和优化策略,帮 ...
- LeetCode 未验证规则
1. for循环容易忘记break,很多提交不过,都是因为这个 2. 左右指针,思考起来比较复杂,但是以代码容易理解.code精简为主,不要在乎省下一两次运算时间 3. 左右指针,有时候以left & ...
- CBAM注意力模型介绍
本文分享自天翼云开发者社区<CBAM注意力模型介绍>,作者:Liuzijia 近年来,注意力机制在各项深度学习任务中表现出色.研究表明,人类视觉感知过程中,注意力机制发挥了积极的效果,可以 ...