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 ...
随机推荐
- liquibase maven
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...
- 【shell】远程执行shell|多节点并行执行shell|远程执行注意
目录 前提条件 shell远程执行 多节点上并行执行命令的三种方法 方法1 使用bash执行命令 方法2 使用clustershell执行命令--还能收集结果 方法3 使用pdsh 执行命令 远程执行 ...
- Could not install packages due to an OSError: ("Connection broken: ConnectionResetError(10054, '远程主机强迫关闭 了一个现有的连接。', None, 10054, None)",
今天安装微软AI量化投资平台Qlib遇到报错 ERROR: Could not install packages due to an OSError: ("Connection broken ...
- Qt/C++音视频开发67-保存裸流加入sps/pps信息/支持264/265裸流/转码保存/拉流推流
一.前言 音视频组件除了支持保存MP4文件外,同时还支持保存裸流即264/265文件,以及解码后最原始的yuv文件.在实际使用过程中,会发现部分视频文件保存的裸流文件,并不能直接用播放器播放,查阅资料 ...
- Qt编写可视化大屏电子看板系统30-模块8物料管理
一.前言 物料管理模块包括库存占比.主要零件库存状况子模块,其中库存占比采用自定义控件环形进度条展示,总共有多种库存,具体根据数据库中的名称展示不同的界面,当库存数不够的时候,对应环形进度条颜色红色显 ...
- Qt音视频开发49-通用截图截屏
一.前言 采用了回调方式的视频通道,截图只需要对解析好的QImage对象直接保存即可,而对于句柄的形式,需要调用不同的处理策略,比如vlc需要用它自己提供的api接口函数libvlc_video_ta ...
- 通过shadow来更改ubuntu密码,并且使用frp组网
局域网搜索 pings 所有设备找到在线设备并登录网页 :: 作者:mao 时间:2024 11.30 @echo off chcp 65001 >nul :: 启用延迟环境变量扩展 setlo ...
- 微服务实战系列(二)-注册中心Springcloud Eureka客户端-copy
1. 场景描述 前几天介绍了下springcloud的Eureka注册中心(springcloud-注册中心快速构建),今天结合springboot-web介绍下eureka客户端服务注册. 2. 解 ...
- 文章学习:基于AVX-512指令集的同态加密算法中大整数运算性能优化与突破
学习文章:英特尔×同态科技 | 基于AVX-512指令集的同态加密算法中大整数运算性能优化与突破 文章 人工智能的安全隐患 ChatGPT的成功大部分来源于海量的数据支撑和丰富的数据维度,基于13亿参 ...
- react报错Can't resolve 'react' in 'E:\reactweb\preact\my-app\node_modules\react-dom\cjs'
执行如下: npm install -g react npm install react --save 类似这种依赖项(react,react-dom 等)报错,哪个报错执行哪个即可 执行上述两句就 ...