pwa-module

pwa-module copied to clipboard

What problem does this feature solve?

Currently, if I read the code correctly, the name on the splashscreen is pulling from the manifest, which is generated auto generated, and apparently pulls from package.json. The rules for this are lower case names, but that's not appropriate for an application name, necessarily. Even when I put a capitalized name in the manifest entry in nuxt.config.js, the splashscreen only displays a lower case name. Reading nuxt config for a manifest name will allow app name customization.

What does the proposed changes look like?

manifest: { name: "My App Name" },

Splash screen displays "My App Name", not 'myappname'

You are already able to do that, check this out:

  // ...
  pwa: {
    manifest: {
      name: `lobo_tuerto's notes`,
      short_name: `lt's notes`,
      description: `Some notes that I've taken over the years`
    }
  }

Perhaps what is missing and could help, would be to add those options to the nuxt.config.js template file when PWA is selected. That would signal the user that those variables are available and ready to be customized.

Just kind of what they do with description in head:

head: {
    titleTemplate: '%s — ' + "lobo_tuerto's notes",
    title: 'lt',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  // ...

Thank you for feedback, but i was asking, if i can dynamically change the icon because i have a multi-tenant app where users have sub-domains with as proposed their own favicons, but yet the pwa icon is still the same? Any possibilities for this?

@crytos did you find a solution?

No please, I am building a multi tenant app with wild card domains so I need the pwa icons to be dynamic please

On Fri, Jul 31, 2020, 17:55 lucianholt97 [email protected] wrote:

@crytos https://github.com/crytos did you find a solution?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/nuxt-community/pwa-module/issues/225#issuecomment-667162216, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIOYONEBVSZFHXEQDLRAF33R6LLNZANCNFSM4INRQO3Q .

I'm also facing the same problem as @crytos.

I'm using the same Nuxt project for N subdomains. Customers will be able to create as many subdomains they want, I can't have a fixed folder structure to serve different files for each tenant.

So I need different PWA configs (icon, manifest, meta) loaded dynamically (programmatically) after an API call to get the right information for that specific client (base on the current URL). I could do it inside a Nuxt serverMiddleware or on a route guard if needed. But how to generate PWA things on the fly and not on build time?

I'm facing the same problem too. I think it's not possible as of this writing.

Ref: https://dev.to/andynoir/sitemap-for-dynamic-routes-in-nuxtjs-4b96

I just saw this post here. I'm just guessing but with the help of this generator.ts file this should be possible (I guess huh). I'll try it out.

Ref: https://dev.to/andynoir/sitemap-for-dynamic-routes-in-nuxtjs-4b96

I just saw this post here. I'm just guessing but with the help of this generator.ts file this should be possible (I guess huh). I'll try it out.

I have read this, it is a great step at least for those using generated sites, please. However, the main issue here is to access the dynamic subdomain (HOSTNAME) at runtime so that we can call the API to generate routes at runtime, please.

Using NUXT hooks I think is a great step in the right direction, though the other idea that kept me thinking was, If you don't define a hostname in the nuxt.config(file) section of the sitemap, the sitemap module kinda picks the hostname at runtime and assigns that on the sitemap routes, which means somehow we have to figure out how they did this!

which means somehow we have to figure out how they did this!

I guess os.hostname(). But you're right with the availability at runtime.

Looking to solve same Issue, need to generate dynamic PWA infos (icon, name) depending on subdomain. If someone found a way to do this.

I know this may be a bit hardcore but happened to work for me for now.

async fetch() { try { const { data } = await this.$axios.get(brands/${location.hostname}`)

  this.brand = data.brand
  this.cover = data.cover

  this.$store.commit('brand/SET', data.brand)
  this.$store.commit('brand/SET_COVER', data.cover)
  this.$store.commit('products/SET', data.products)

  let image = data.brand.logo
  let splitted = image.split('upload/')
  splitted[0] = splitted[0] + "upload/w_256,h_256/"
  let resized = splitted.join('')

  let link = document.createElement('link');
      link.rel = 'manifest';

  let myDynamicManifest = {
    "name": data.brand.name,
    "short_name": data.brand.name,
    "description": data.brand.name,
    "start_url": `https://${ data.brand.domain }`,
    "display": "standalone",
    "background_color": "#F0F0F0",
    "theme_color": "#555555",
    "icons": [{
      "src": resized,
      "sizes": "256x256",
      "type": "image/png"
    }]
  }

  const stringManifest = JSON.stringify(myDynamicManifest);

  const blob = new Blob([stringManifest], {type: 'application/json'});
  // const manifestURL = URL.createObjectURL(blob);
  let reader = new FileReader();
  reader.readAsDataURL(blob);
  reader.onload = function(){
      link.href = reader.result
      document.getElementsByTagName('head')[0].appendChild(link);
      // document.getElementById('my-manifest-placeholder').setAttribute('href', reader.result);
  }



} catch (error) {
  console.log(error)
  this.$swal({
    title: "Oops!",
    text: `This brand does not exist please`, 
    icon: "warning",
    button: 'Explore brands on myduuka',
    closeOnClickOutside: false,
  }).then( () => {
    return window.location.href = 'https://www.myduuka.com/brands'
  })
}

},

fetchOnServer: false,`

I inserted this in the layouts/default.vue (Nuxt.JS)

So I fetch the subdomain user/resource get the image I want (I am hosting my images on Cloudinary), then trim them to get a square frame and pass them to generate a manifest.json and icons, then insert the generated manifest file into its meta-tag.

Hope this helps, but let me know if not clear on some area.

I know this may be a bit hardcore but happened to work for me for now.

async fetch() { try { const { data } = await this.$axios.get(brands/${location.hostname}`)

  this.brand = data.brand
  this.cover = data.cover

  this.$store.commit('brand/SET', data.brand)
  this.$store.commit('brand/SET_COVER', data.cover)
  this.$store.commit('products/SET', data.products)

  let image = data.brand.logo
  let splitted = image.split('upload/')
  splitted[0] = splitted[0] + "upload/w_256,h_256/"
  let resized = splitted.join('')

  let link = document.createElement('link');
      link.rel = 'manifest';

  let myDynamicManifest = {
    "name": data.brand.name,
    "short_name": data.brand.name,
    "description": data.brand.name,
    "start_url": `https://${ data.brand.domain }`,
    "display": "standalone",
    "background_color": "#F0F0F0",
    "theme_color": "#555555",
    "icons": [{
      "src": resized,
      "sizes": "256x256",
      "type": "image/png"
    }]
  }

  const stringManifest = JSON.stringify(myDynamicManifest);

  const blob = new Blob([stringManifest], {type: 'application/json'});
  // const manifestURL = URL.createObjectURL(blob);
  let reader = new FileReader();
  reader.readAsDataURL(blob);
  reader.onload = function(){
      link.href = reader.result
      document.getElementsByTagName('head')[0].appendChild(link);
      // document.getElementById('my-manifest-placeholder').setAttribute('href', reader.result);
  }



} catch (error) {
  console.log(error)
  this.$swal({
    title: "Oops!",
    text: `This brand does not exist please`, 
    icon: "warning",
    button: 'Explore brands on myduuka',
    closeOnClickOutside: false,
  }).then( () => {
    return window.location.href = 'https://www.myduuka.com/brands'
  })
}

},

fetchOnServer: false,`

I inserted this in the layouts/default.vue (Nuxt.JS)

So I fetch the subdomain user/resource get the image I want (I am hosting my images on Cloudinary), then trim them to get a square frame and pass them to generate a manifest.json and icons, then insert the generated manifest file into its meta-tag.

Hope this helps, but let me know if not clear on some area.

I am using the fetch hook and disabling it from running on the server because all this is supposed to happen on the front-end

@crytos we gone to a similar approach, i.e. not relaying on this module and tediously generating icons, manifest etc. with our API. But be careful with your statement: "all this is supposed to happen on the front-end", since some things are no related only to PWA, but also to things like SEO and URL embedding on social medias.

Thank you @ErickPetru