next.js 添加 PWA 渐进式WEB应用(service-worker) 支持
<p>去 github 搜索了一把，估计是我关键词不对，没找到比较牛逼的插件。然后去 nextjs 官方仓库搜索，发现了这个东东 https://github.com/vercel/next.js/tree/canary/examples/with-next-offline，瞄了一眼 package.json 发现了这个插件 next-offline，瞅了一眼自述文件，貌似就是本文需要的插件，折腾一把，最终给 https://www.jijian.link/ 添加了 PWA 功能。</p><h3>第一步：安装依赖</h3>
<div class="cnblogs_code">
<pre>$ npm <span style="color: rgba(0, 0, 255, 1)">install</span> --save-dev next-offline</pre>
</div>
<h3>第二步：修改配置</h3>
<p>修改根目录配置文件 next.config.js</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> next.config.js</span>
const withOffline = require('next-offline'<span style="color: rgba(0, 0, 0, 1)">)
const nextConfig </span>=<span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> ...</span>
<span style="color: rgba(0, 0, 0, 1)">}
module.exports </span>= withOffline(nextConfig)</pre>
</div>
<h3>第三步：重新生成</h3>
<p>重新运行 npm run export 即可生成带有 PWA 功能的页面，当然 next-offline 还有其他高级配置，参考官方文档：https://github.com/hanford/next-offline</p>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
<p> </p>
<p style="font-size: 18px;font-weight: bold;">文章首发于微信公众号【<span style="color:rgb(255, 71, 87)">前端路引</span>】，欢迎 <span style="color:#4ec259">微信扫一扫</span> 查看更多文章。</p>
<p>
<img style="max-width: 320px;" src="https://images.cnblogs.com/cnblogs_com/linx/2447020/o_250228035031_%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.png"/>
</p>
<p>本文来自博客园，作者：前端路引，转载请注明原文链接：https://www.cnblogs.com/linx/p/13139957.html</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/linx/p/13139957.html
頁:
[1]