如何修改PWA主屏幕显示名称？含程序化设置需求

1. 基础配置：替换默认名称 #

使用@kevinmarrec/nuxt-pwa模块时，默认会读取package.json的name字段，但你可以在nuxt.config.ts里直接覆盖manifest配置，指定友好名称：

export default defineNuxtConfig({
  modules: ['@kevinmarrec/nuxt-pwa'],
  pwa: {
    manifest: {
      name: '你的友好应用名称', // 主屏幕图标下方、安装提示里显示的完整名称
      short_name: '短名称', // 屏幕空间不足时显示的缩写
      description: '应用描述'
    }
  }
})

打包后，manifest.json里的name字段会覆盖package.json内容，浏览器会用这个值展示安装提示和主屏幕名称。

2. 多域名动态设置方案 #

如果要给不同域名的实例分配不同名称，有两种可行方式：

方案一：环境变量驱动（打包阶段配置） #

在部署时给每个域名设置对应的环境变量，Nuxt打包时自动注入到manifest中。

首先在nuxt.config.ts里读取环境变量：

export default defineNuxtConfig({
  modules: ['@kevinmarrec/nuxt-pwa'],
  pwa: {
    manifest: {
      name: process.env.NUXT_PWA_APP_NAME || '默认应用名称',
      short_name: process.env.NUXT_PWA_APP_SHORT_NAME || '默认短名'
    }
  }
})

部署Domain A时，设置环境变量NUXT_PWA_APP_NAME=商城A；部署Domain B时，设置NUXT_PWA_APP_NAME=商城B，打包后的manifest会自动对应不同名称。

方案二：客户端动态修改（无需重新打包） #

如果不想为每个域名单独打包，可以在客户端初始化时根据当前域名动态调整manifest：

在plugins目录下创建pwa-dynamic-name.ts：

export default defineNuxtPlugin(() => {
  if (process.client) {
    // 配置域名与名称的映射
    const domainToName = {
      'shop-a.com': '精品商城A',
      'shop-b.com': '特惠商城B',
      'default': '通用商城'
    }
    const currentDomain = window.location.hostname
    const targetName = domainToName[currentDomain] || domainToName['default']
    const targetShortName = targetName.slice(0, 8) // 生成适配短空间的短名称

    // 获取页面中的manifest链接并修改内容
    const manifestLink = document.querySelector('link[rel="manifest"]') as HTMLLinkElement
    if (manifestLink) {
      fetch(manifestLink.href)
        .then(res => res.json())
        .then(manifest => {
          manifest.name = targetName
          manifest.short_name = targetShortName
          // 创建临时Blob URL替换原manifest
          const blob = new Blob([JSON.stringify(manifest)], { type: 'application/json' })
          manifestLink.href = URL.createObjectURL(blob)
        })
    }
  }
})

同时在app.vue里补充meta标签，避免浏览器缓存导致名称不更新：

<template>
  <div>
    <!-- 你的应用内容 -->
  </div>
</template>

<script setup>
useHead({
  meta: [
    {
      name: 'application-name',
      content: process.client ? getAppName() : ''
    }
  ]
})

function getAppName() {
  const domainToName = {
    'shop-a.com': '精品商城A',
    'shop-b.com': '特惠商城B',
    'default': '通用商城'
  }
  return domainToName[window.location.hostname] || domainToName['default']
}
</script>

这个meta标签会辅助浏览器识别应用名称，减少缓存带来的问题。

3. 通用PWA适配（无框架/其他框架） #

如果是纯PWA项目，直接修改public/manifest.json里的name和short_name字段即可；要动态设置的话，同样可以用上述客户端修改manifest的方法，或者在服务端生成manifest.json时根据请求域名注入对应名称。

内容的提问来源于stack exchange，提问作者Paulie