文章/答案/技术大牛

发布

社区首页 >问答首页 >(下一步10) -将basePath添加到next.config.js时，next-pwa不起作用

问(下一步10) -将basePath添加到next.config.js时，next-pwa不起作用
EN

Stack Overflow用户

提问于 2021-03-30 15:59:47

回答 2查看 582关注 0票数 0

我使用的是nextJS版本"10.0.9“和next-pwa版本"^5.0.6”，它们在一起工作得很好，我的应用程序是贪得无厌的，但由于某些原因，我需要为我的所有路由添加一个前缀，所以我添加了"basePath“属性，并在next.config.js文件中将其设置为”/next.config.js- subdomainPrefix“，但之后我的应用程序变得无法安装。我尝试了很多方法，我将scope和subdomainPrefix更改为"/recharge-cards”，并在我的_document.js上更改文件路径，但似乎没有任何效果。

在下面你会找到我的文件，所以请帮助我解决这个问题

manifest.json

{
  "name": "next-pwa",
  "short_name": "next-pwa",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#FFFFFF",
  "background_color": "#FFFFFF",
  "start_url": "/recharge-cards",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

next.config.js

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

module.exports = withPWA({
    basePath: "recharge-cards",
    pwa: {
    dest: 'public',
  },
});

_document.js (头部)

<Head>
  <meta name='application-name' content={APP_NAME} />
  <meta name='apple-mobile-web-app-capable' content='yes' />
  <meta name='apple-mobile-web-app-status-bar-style' content='default' />
  <meta name='apple-mobile-web-app-title' content={APP_NAME} />
  <meta name='description' content={APP_DESCRIPTION} />
  <meta name='format-detection' content='telephone=no' />
  <meta name='mobile-web-app-capable' content='yes' />
  <meta name='theme-color' content='#FFFFFF' />
  <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
  <link rel='manifest' href='/manifest.json' />
  <link rel='shortcut icon' href='/favicon.ico' />
</Head>

项目文件

reactjs

next.js

progressive-web-apps

next-pwa

回答 2

Stack Overflow用户

发布于 2021-04-01 23:33:02

经过多次实验，我解决了这个问题，下面你会找到我的解决方案

manifest.json

{
  "name": "Nana digital goods",
  "short_name": "Nana Digital",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#227a40",
  "background_color": "#fff",
  "start_url": "/recharge-cards/",
  "icons": [
    {
      "src": "/recharge-cards/assets/images/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/recharge-cards/assets/images/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

next.config.js

const withPWA = require('next-pwa');
const nextTranslate = require('next-translate');
const path = require('path');

module.exports = withPWA({
    trailingSlash: true,
    basePath: '/recharge-cards',
    async redirects() {
    return [
      {
        source: '/',
        destination: '/recharge-cards',
        basePath: false,
        permanent: false,
      },
    ]
  },
    webpackDevMiddleware: config => {
        config.watchOptions = {
            poll: 1000,
            aggregateTimeout: 300
        }
        return config
    },
    sassOptions: {
        includePaths: [path.join(__dirname, 'styles')]
    },
    publicRuntimeConfig: {},
  ...nextTranslate(),
    pwa: {
    dest: 'public',
        subdomainPrefix: '/recharge-cards/',
    scope: '/'
  },
});

_document.js (头部)

<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name='application-name' content={APP_NAME} />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='default' />
<meta name='apple-mobile-web-app-title' content={APP_NAME} />
<meta name='description' content={APP_DESCRIPTION} />
<meta name='format-detection' content='telephone=no' />
<meta name='mobile-web-app-capable' content='yes' />
<meta name='theme-color' content='#227a40' />
<title>{this.title}</title>
<link rel='apple-touch-icon' sizes='180x180' href='/recharge-cards/apple-touch-icon.png' />
<link rel='manifest' href='/recharge-cards/manifest.json' />
<link rel='shortcut icon' href='/recharge-cards/favicon.ico' />
<link rel="icon" type="image/png" sizes="32x32" href="/recharge-cards/assets/images/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/recharge-cards/assets/images/favicon-16x16.png" />

项目文件

票数 1

Stack Overflow用户

发布于 2021-10-06 03:05:19

我也在努力解决这个问题，我的解决方案是确保我的清单中的start_url以/结尾。

例如"start_url": "/recharge-cards/"

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66866906

复制

相似问题

问(下一步10) -将basePath添加到next.config.js时，next-pwa不起作用
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问(下一步10) -将basePath添加到next.config.js时，next-pwa不起作用EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问(下一步10) -将basePath添加到next.config.js时，next-pwa不起作用
EN