0

(I'm using Nuxt 3.0.0-rc.13 and @kevinmarrec/nuxt-pwa 0.9.1, but I think my question is generic to any PWA.)

On my Android tablet, I go to the website with my PWA in Chrome and it asks me if I want to install it on my home screen. I touch that and it installs and works properly.

However, the name of the app matches the name in my package.json file, which is lower case and has hyphens instead of spaces. Can I change that name to be more friendly? That is the name that appears in the prompt for the user and also appears under the icon on the user's home screen.

Bonus question:

I'd love to be able set that name programmatically, too. I will eventually have the same app set up in multiple domains with the only difference being the data that is displayed. I'd like to be able to name the app differently for each of those instances.

kissu
  • 40,416
  • 14
  • 65
  • 133
Paulie
  • 1,940
  • 3
  • 20
  • 34
  • `manifest.json` – chovy Nov 07 '22 at 17:45
  • @chovy pretty limited lead in the given context since everything happens down there. Here OP is asking on how to perform that for that specific Nuxt abstraction by using a package. – kissu Nov 07 '22 at 17:53

2 Answers2

2

The name that appears on the home screen is set in the manifest.json file (more).

This file is generated by @kevinmarrec/nuxt-pwa, but I couldn't find any further documentation about the module. But as far as have understood the module defintion (module.ts), it provides a similar configuration interface like @nuxtjs/pwa.

@nuxtjs/pwa and expecially the manifest can be configured via nuxt.config.js. More information here. Use this as a guideline and see what is available in the module.ts file.

tjarbo
  • 711
  • 4
  • 13
  • OP is using Nuxt3 here, hence why the usage of `@nuxtjs/pwa` is not possible in that case. Otherwise, as [mentioned here](https://stackoverflow.com/questions/74348548/why-arent-the-fonts-getting-cached-in-my-pwa#comment131259556_74348548), the team is focused on shipping an official baked-in support anyway. A matter of waiting the core team to finish the implementation or not using any Nuxt modules at all I'd say. – kissu Nov 07 '22 at 18:00
  • @kissu, you are right. I am not really familiar with nuxtjs. But if I understand the module definition correctly (https://github.com/kevinmarrec/nuxt-pwa-module/blob/main/src/module.ts#L24) it looks like that `@kevinmarrec/nuxt-pwa` uses a very similar configuration interface as `@nuxtjs/pwa`. – tjarbo Nov 07 '22 at 18:09
  • Yep, he tried to backport some part of it. But not everything from the official Nuxt2 module. At the end, the solution is probably quite trivial but I'm no workbox expert. – kissu Nov 07 '22 at 18:14
0

In nuxt.config.ts you can set the name like this:

pwa: {
  manifest: {
    name: "Friendly Name",
    short_name: "Home Screen Label",
    },
},
Paulie
  • 1,940
  • 3
  • 20
  • 34