Problems When Publishing Ionic React App

I have problems when publishing my app.

  1. Publishing PWA app:
    When publishing PWA I set serviceWorkerRegistration.register(); at index.tsx. This produces problematic manifest.json file:
{
  "short_name": "xxx",
  "name": "xxx",
  "icons": [
    {
      "src": "assets/icon/favicon.png",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "assets/icon/icon.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"

}

The "purpose":"maskable" will produce PWA error about the icon. It should be “maskable any”. Maybe dev team can change this in the future so we do not have to change it on every publish.


  1. Source map files are still exist after build.
    I can see the .ts and .tsx files on web inspect after publish.

I use: ionic build --prod --generateSourceMap false
to publish the app, but somehow it still include the source map file.

I need help for this.

Thanks.

As for #1, you should file a bug report in the GitHub issue queue. If you include a sample repo (via CodeSandbox, etc.), you’ll probably get feedback quickly.

For #2, which version of Ionic?

–generateSourceMap is not a valid option on the current ionic CLI; you want --no-source-map.

Try running ionic help build to see the list of options.

1 Like

For the first problem. This is my workaround:

Create a file at the root: modify-manifest.js

const fs = require('fs')
const path = require('path')

const manifest = {
  short_name: "xxxx",
  name: "xxxx",
  icons: [
    {
      src: "assets/icon/favicon.png",
      sizes: "64x64 32x32 24x24 16x16",
      type: "image/x-icon"
    },
    {
      src: "assets/icon/icon.png",
      type: "image/png",
      sizes: "512x512",
      purpose: "maskable any"
    }
  ],
  start_url: ".",
  display: "standalone",
  theme_color: "#000000",
  background_color: "#000000"
}
const configPath = path.resolve(__dirname, 'build', 'manifest.json')
fs.writeFileSync(configPath, JSON.stringify(manifest, null, 2))

Then inside the package.json I added a task to run after the build:

"scripts": {
    ....
    "modify-manifest": "node ./modify-manifest.js",
    "build-pwa": "ionic build --prod --no-source-map&&npm run modify-manifest"
}

to build it I just run npm run build-pwa, it will modify the manifest file after it is compiled.

For solution 2, thanks man!