本文仅作为 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) 支持的更多相关文章

  1. PWA渐进式web应用

    PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送.在移动端利用标准化框架,让网页应用呈现 ...

  2. PWA 渐进式Web应用程序 - 解释

    想象一下,如果一个网站上所有的功能都能够作为一个移动应用程序为用户所用——任何设备上都可以使用.可接收所有的通知.离线模式可用,为了实现这个愿景,2015年,谷歌创造了渐进式Web应用程序(PWA). ...

  3. [PWA] 1. Intro to Service worker

    Service worker stays between our browser and noetwork requests. It can help to fetch data from cache ...

  4. 渐进式web应用 (PWA)

    PWA(渐进式 Web 应用)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序. PWA的特点: Discoverable, 内容可以通过搜索引擎发现. Instal ...

  5. 渐进式web应用开发---service worker (二)

    阅读目录 1. 创建第一个service worker 及环境搭建 2. 使用service worker 对请求拦截 3. 从web获取内容 4. 捕获离线请求 5. 创建html响应 6. 理解 ...

  6. 创建一个离线优先,数据驱动的渐进式 Web 应用程序

    原文地址:Build an offline-first, data-driven PWA 译文出自:我的个人博客 概述 在本文中,您将学习如何使用 Workbox 和 IndexedDB 创建离线优先 ...

  7. Google_PWA_ServiceWork_渐进式 Web 应用_给应用提供离线体验

    前言:今天结识了google PWA提供的一个对移动端Web应用提供离线体验的一个功能,感觉很有用.我这里不分享自己的写法和代码.官网文档说的很详细,直接粘过来大家看吧. 推荐官网地址:你的第一个渐进 ...

  8. PWA-H5 Web App优化探索之路(Service Worker,Lighthouse)

    PWA是什么? Progressive Web App 渐进式web应用程序,简单来说,就是可以让你的WEB App,带来与原生App相媲美的用户体验.. 为什么要用PWA? 简单来说,是为了web应 ...

  9. 关于PWA ( Progressive web apps )

    渐进式Web应用程序使用现代Web API以及传统的渐进式增强策略来创建跨平台Web应用程序.这些应用程序无处不在,并提供多种功能,使其具有与本机应用程序相同的用户体验优势.这套文档告诉您需要了解的所 ...

  10. [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 ...

随机推荐

  1. IntelliJ IDEA 导入项目后出现非法字符解决方法

    1.Ctrl+Alt+S进入设置页面如图,更改为UTF-8 2.Ctrl+Alt+S进入设置页面如图,在箭头所指的位置填上 -encoding UTF8 3.清除文件中的BOM特殊不可见字符 选择项目 ...

  2. Qt/C++动态启用地图功能/地图拖曳/键盘操作/滚轮缩放/双击放大/连续缩放等

    一.前言说明 地图组件为了方便用户的操作,一般会满足各种需求场景,比如用鼠标拖曳地图,实体键盘按键上下左右移动,鼠标滚轮缩放地图大小,双击放大地图,这些常规的操作可以极大的方便用户操作,问题是,有时候 ...

  3. Qt/C++音视频开发75-获取本地有哪些摄像头名称/Qt内置函数方式

    一.前言 在需要打开本地摄像头的场景中,有个需求绕不开,那就是如何获取本地有哪些摄像头设备名称,这样可以提供下拉框给用户选择,不然你让用户去填设备名,你觉得用户会知道是啥,他会操作吗?就算你提供了详细 ...

  4. Qt编写的项目作品14-智能安防集中管理平台

    一.功能特点 同时集成了楼宇对讲.住户报警.门禁控制.公共报警.视频监控等模块. 系统管理部分包括系统配置.对讲配置.住户配置.公共配置.监控配置.地图管理.视频联动.用户管理.区域管理. 图形化的实 ...

  5. 问题:Opencv(3.1.0/3.4)找不到 /opencv2/gpu/gpu.hpp 问题

    解决:Opencv(3.1.0/3.4/4.1.0)找不到 /opencv2/gpu/gpu.hpp 问题 环境: 系统:Win10 环境:Opencv3.4.0/4.1.0 显卡:1080ti 问题 ...

  6. SpringBoot集成swagger后出现: Failed to start bean ‘documentationPluginsBootstrapper‘的解决方法

    SpringBoot集成swagger后出现: Failed to start bean 'documentationPluginsBootstrapper'的编译错误: org.springfram ...

  7. Windows7-64环境中部署OpenLayers6.4.3详细步骤

    注意:OL5以后,OpenLayers采用ES6,以前OL4那种简单的加库的方法已经不适用了. Windows7-64环境中部署OpenLayers6.4.3详细步骤: 1.官方教程(英文版) 2.中 ...

  8. Solution Set -「LOCAL」冲刺省选 Round I

    \(\mathscr{Summary}\)   状态还行叭.   A 题又犯坏习惯,走起来就大力分讨,上了个厕所之后冷静一下开始寻找比较普适性的 DP 状态,然后几乎就切掉了,可惜复杂度写假了没发现( ...

  9. 在SOUI4中工作线程如果与UI线程交互

    在SOUI4中工作线程如果与UI线程交互 很多时候程序的耗时过程需要在工作线程执行,执行过程中可能需要通过UI线程来展示运行状态及结果,这就涉及到工作线程与UI线程交互的问题. SOUI的UI框架本身 ...

  10. kubernets学习笔记一

    了解kubernets Docker作为单一的容器技术工具并不能很好地定义容器的"组织方式"和"管理规范",难以独立地支撑起生产级大规模容器化部署的要求..因此 ...