Next.js中的PWA问题

2g32fytz 于 12个月前发布在 PWA

关注(0)|答案(1)|浏览(165)

当我在下一个js设置中得到yes的时候（你想使用应用路由器吗？））！pwa没有安装（不显示安装图标），我看到这个消息时，使用灯塔标签（（页面没有清单链接网址nextjs））.当我说不abow问题，我可以安装pwa正确什么是问题？
_document.js文件：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* Include your manifest.json file */}
          <link rel="manifest" href="/manifest.webmanifest" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

manifest.json

{
    "theme_color": "#f69435",
    "background_color": "#f69435",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "PWA Test ",
    "short_name": "PWA Test ",
    "description": "cool PWA",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}```

next.js

来源：https://stackoverflow.com/questions/77028001/pwa-issue-in-next-js

1条答案

按热度按时间

af7jpaap1#

这是为下一个js 13准备的
首先使用npm安装next-pwa

npm install next-pwa

其次配置你的next.js.js文件，你可以添加你需要的其他选项

/** @type {import('next').NextConfig} */

const withPWA = require("next-pwa")

const nextConfig={
  ...withPWA({
    dest:'public',
    register:true ,
    skipWaiting:true,
  })
}
 module.exports = nextConfig

第三，确保所有的图标都在公共文件夹中！
最后，在app文件夹的根目录下创建一个manifest.ts或js文件，具体取决于你使用的语言。
在该文件中粘贴以下代码

import { MetadataRoute } from "next";

export default function manifest() : MetadataRoute.Manifest{
    return{
       // paste your manifest details here eg
       name:"My first pwa",
       .....
    }
}

这就是你的网站现在应该能够安装
如需额外的阅读，请访问Next js网站了解元数据配置
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/manifest

赞(0）回复(0）举报 12个月前

我来回答

Next.js中的PWA问题

1条答案

相关问题

热门标签

最新问答