gpt4 book ai didi

manifest - Next.js PWA (Service Worker + Manifest.json)

转载 作者:行者123 更新时间:2023-12-03 22:14:02 26 4
gpt4 key购买 nike

我正在使用 Next.js 开发一个服务器端渲染网站,我想让它成为一个渐进式 Web 应用程序,但问题是我找不到让它正确发生的方法。

当我构建应用程序时,它可以正确地为 service worker 提供服务,但没有 manifest.json,在某些项目示例中,它为 manifest.json 提供服务,但我在 Lighthouse 审计中尝试过,它说

Service worker does not successfully serve the manifest's start_url



我使用的例子之一
Create Next App With Service Worker Precache

我认为问题在于 start_url 是 .或/并且不是有效文件,因为在 Next.js 中,从一开始就没有 index.html 可供使用。

总之
我正在寻找一个使用 Next.js 将其构建到 dist 文件夹的示例,当我为其提供服务时,它具有有效的 Service Worker 和有效的 Web list 。

最佳答案

A. 某些文件预计会在“/”中找到

您出现此错误是因为浏览器希望从服务器的根目录提供某些文件,包括:

  • /manifest.json
  • /sitemap.xml
  • /favicon.ico
  • /robots.txt
  • /browserconfig.xml
  • /site.webmanifest

  • 虽然这些路径中的大多数可以使用元标记设置,但如果没有提供这些确切的文件名,旧浏览器只会忽略它们并出错。

    B.配置替代路径并使用NextJS静态文件

    在撰写本文时,有 ongoing work for supporting offline在 NextJS 中。但它还没有准备好。

    如果你不需要支持旧浏览器,也不想要高级SEO,可以使用NextJS的 Head组件 ( see documentation ) 来定义 manifest.json与任何 NextJS 静态文件一样的路径:
    import Head from "next/head"

    export default () => (
    <Head>
    <link rel="manifest" href="/static/manifest.json" />
    <link rel="manifest" href="/static/site.webmanifest" />
    <link rel="shortcut icon" href="/static/favicon.ico"
    </Head>
    )

    请注意 robots.txt不能从子目录 ( source ) 提供服务,因此如果您需要定义此文件,则此解决方案不适合。

    C. 像预期的那样提供这些文件

    正确的解决方案是像这样从您的快速服务器提供这些文件
    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}`)
    })
    })

    备注 : 此代码直接来自 the NextJS examples repository

    关于manifest - Next.js PWA (Service Worker + Manifest.json),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51619109/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com