Question

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

当我构建应用程序时，它可以正确地服务于服务工作者，但是没有manifest.json，在某些项目示例中，它可以服务manifest.json，但是我在Lighthouse审核中尝试了它，并说

服务工作者未成功提供清单的start_url

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

我认为问题在于start_url是。或/而不是有效文件，因为在Next.js中从一开始就没有index.html可以提供服务。

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

Answer 1

A。某些文件应该位于“ /”

出现此错误是因为浏览器希望从服务器的根目录提供一些文件，包括：

Items
/manifest.json
/sitemap.xml
/favicon.ico
/robots.txt
/browserconfig.xml

虽然这些路径中的大多数都可以使用meta标记设置，但是较旧的浏览器只会忽略它们，如果未提供这些确切的文件名，则会出错。

B。配置备用路径并使用NextJS静态文件

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

如果您不需要支持旧版浏览器，也不需要高级SEO，则可以使用NextJS的/site.webmanifest组件（see documentation）来定义Head路径将用于任何NextJS静态文件：

manifest.json

请注意，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> )不能从子目录（source）提供，因此，如果您需要定义此文件，则此解决方案不适合。

C。为这些文件提供预期的服务

正确的解决方案是像这样从您的快递服务器提供这些文件

robots.txt

注意：此代码直接来自the NextJS examples repository

Answer 2

这里是使您的 next.js 渐进式的步骤。 check the example

npm i next-spa
next.config.json

const withPWA = require("next-pwa");

module.exports = withPWA({ 密码：{ dest: "公开",
```
},
```
});
将 manifest.json 和图标添加到示例中的公共文件夹。但是，图标目录缺少“maskable_icon.png”。因此，创建一个可屏蔽图标 from here，然后将其添加到“manifest.json”中。
```
 {
    "src": "path/to/maskable_icon.png",
    "sizes": "196x196",
    "type": "image/png",
    "purpose": "any maskable"
  }
```

将这些标签添加到 import Head from "next/head"。 Head 用于更好的 SEO 设置。 check the documentation*

  <meta charSet="utf-8" />
  <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
  <meta
    name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
  />
  <meta name="description" content="Description" />
  <meta name="keywords" content="Keywords" />
  <title>Next.js PWA Example</title>

  <link rel="manifest" href="/manifest.json" />
  <link
    href="/icons/favicon-16x16.png"
    rel="icon"
    type="image/png"
    sizes="16x16"
  />
  <link
    href="/icons/favicon-32x32.png"
    rel="icon"
    type="image/png"
    sizes="32x32"
  />
  <link rel="apple-touch-icon" href="/apple-icon.png"></link>
  <meta name="theme-color" content="#317EFB" />
</Head>

最后检查它是否工作。将 Lighthouse 扩展程序添加到 chrome 应用商店的 chrome 开发工具并运行启动性能。

Next.js PWA（Service Worker + Manifest.json）

2 个答案:

A。某些文件应该位于“ /”

B。配置备用路径并使用NextJS静态文件

C。为这些文件提供预期的服务