Next.js PWA (服务工作者+ Manifest.json)
我正在使用Next.js开发一个服务器端渲染网站，我想让它成为一个渐进式的网络应用程序，但问题是我找不到正确的方法。
当我构建应用程序时，它正确地为服务工作者提供服务，但是没有manifest.json，在一些项目示例中，它为manifest.json提供服务，但我在灯塔审计中尝试了它，结果显示
服务工作线程未成功为清单的启动提供服务
_
url
我用过的一个例子
使用Service Worker Precache创建下一个应用
我认为问题在于一开始
_
url是。或者/并且不是有效的文件，因为在Next.js中从一开始就没有要服务的index.html。
总之，我正在寻找一个使用Next.js将其构建到dist文件夹的示例，当我为它提供服务时，它具有一个有效的Service Worker和一个有效的Web Manifest。
回答 1
Stack Overflow用户
发布于 2018-09-09 20:00:30
A.某些文件预计会在"/“中找到
出现此错误是因为浏览器希望从服务器的根目录提供某些文件，包括：
虽然这些路径中的大多数都可以用meta标签设置，但旧的浏览器只是忽略它们，如果不提供这些确切的文件名，就会出错。
B.配置备用路径并使用NextJS静态文件
在撰写本文时，有
正在进行的离线支持工作
在NextJS中。但它还没有准备好。
如果你不需要支持老的浏览器，也不想要高级的SEO，你可以使用NextJS
组件(
请参阅文档
)来定义
与任何NextJS静态文件一样的路径：
import Head from "next/head"
export default () => (
)请注意
不能从子目录提供服务(
来源
)，因此如果您需要定义此文件，则此解决方案并不适合。
C.按照预期提供这些文件
正确的解决方案是从express服务器中提供这些文件，如下所示
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const { join } = require('path')
const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare()
.then(() => {
createServer((req, res) => {
const parsedUrl = parse(req.url, true)
const rootStaticFiles = [
'/manifest.json',
'/sitemap.xml',
'/favicon.ico',
'/robots.txt',
'/browserconfig.xml',
'/site.webmanifest',
]
if (rootStaticFiles.indexOf(parsedUrl.pathname) > -1) {
const path = join(__dirname, 'static', parsedUrl.pathname)
app.serveStatic(req, res, path)
} else {
handle(req, res, parsedUrl)
}
})
.listen(port, (err) => {
if (err) throw err
console.log(`> Ready on http://localhost:${port}`)
})
})注意
：此代码直接来自
NextJS示例存储库
https://stackoverflow.com/questions/51619109
复制相似问题
腾讯云开发者
