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 ...
随机推荐
- 开源for Huawei,Beam适配GaussDB实践案例分享
沃土云创开源开发者专项计划是华为给开源开发者提供专属激励资源,鼓励开发者积极参与开源 for Huawei适配,践行"让优秀开发者支持更优秀开发者"的理念. 之前我们介绍了fake ...
- 龙哥量化:通达信板块概念FAQ,*期强势、*期弱势是怎么划分的?等问题是官网的解释,股友可以根据文章的提示迸发策略灵感
如果您需要代写公式, 请联系我. 龙哥QQ:591438821 龙哥微信:Long622889 比如第9条,*期强势:20日涨幅>=30%, 3日涨幅>0,非停牌.非ST.非未开板 ...
- python 检测免费代理ip是否有效
python 检测免费代理ip是否有效,免费ip获取地址https://www.zdaye.com/free/ import requests IPAgents = [ "218.89.51 ...
- JVM实战—2.JVM内存设置与对象分配流转
大纲 1.JVM内存划分的原理细节 2.对象在JVM内存中如何分配如何流转 3.部署线上系统时如何设置JVM内存大小 4.如何设置JVM堆内存大小 5.如何设置JVM栈内存与永久代大小 6.问题汇总 ...
- Qt/C++音视频开发76-获取本地有哪些摄像头名称/ffmpeg内置函数方式
一.前言 上一篇文章是写的用Qt的内置函数方式获取本地摄像头名称集合,但是有几个缺点,比如要求Qt5,或者至少要求安装了多媒体组件multimedia,如果没有安装呢,或者安装的是个空的呢,比如很多嵌 ...
- Qt音视频开发31-Onvif抓拍图片
一.前言 抓拍是个很重要的功能,比如在报警视频联动中需要一张实时的图片,很多SDK不提供抓拍功能,而通过预览抓图,得到的图片已不具有实时性,那如何得到实时的图片呢?现在的IPC基本上都支持ONVIF协 ...
- Qt音视频开发19-海康sdk录像存储
一.前言 关于调用海康sdk来进行录像存储,整体的框架架构处理流程沿袭了之前vlc内核.ffmpeg内核.mpv内核的做法,定时存储这块,开个定时器判断,到了时间则先关闭原来的录像存储,然后在开始一个 ...
- C#中定义类时关于CLSCompliant属性的声明
今天在做code analysis时,遇到了这个提示 Warning 1 CA1014 : Microsoft.Design : Mark 'Demo.exe' with CLSCompliant(t ...
- Python 虚拟环境:原理解析与最佳实践
从一个困境说起 小王最近遇到了一个棘手的问题:他在维护两个 Python 项目,一个是去年开发的数据分析系统,依赖 TensorFlow 1.x:另一个是最近在做的预测模型,需要用到 TensorFl ...
- Java技术栈总结-提升
1 java基础: 1.1 算法 1.1 排序算法:直接插入排序.希尔排序.冒泡排序.快速排序.直接选择排序.堆排序.归并排序.基数排序 1.2 二叉查找树.红黑树.B树.B+树.LSM树(分别有对应 ...