[PWA] Ionic4 + capacitor production build won't work in Firefox

I have an Ionic4 + capacitor (just for camera in PWA) and after I build it for production, it won’t work on Firefox. It does work fine on the rest of the browsers.

In order to make the camera work in a browser, I had to use capacitor and include: " <script src=“https://unpkg.com/@ionic/pwa-elements@1.0.0/dist/ionicpwaelements.js”></script> " in the index.html

  1. Ionic4 app
  2. Make capacitor available (npx cap init)
  3. Include the ionicpwaelements.js in the index.html
  4. ion build --prod
  5. Upload it
  6. Open in the browser… it works in Chrome and Safari, won’t work in Firefox.

The error Firefox throws:

This Stencil app is disabled for this browser.

Developers:

  • ES5 builds are disabled during development to take advantage of 2x faster build times.
  • Please see the example below or our config docs if you would like to develop on a browser that does not fully support ES2017 and custom elements.
  • Note that by default, ES5 builds and polyfills are enabled during production builds.
  • When testing browsers it is recommended to always test in production mode, and ES5 builds should always be enabled during production builds.
  • This is only an experiement and if it slows down app development then we will revert this and enable ES5 builds during dev.

Enabling ES5 builds during development:

npm run dev --es5

For stencil-component-starter, use:

npm start --es5

Enabling full production builds during development:

npm run dev --prod

For stencil-component-starter, use:

npm start --prod

Current Browser’s Support:

Current Browser:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:65.0) Gecko/20100101 Firefox/65.0
2 Likes

I have the same issue. Have you found a solution?
thanks

I tried changing package.json with:
@angular-devkit/architect”: “~0.13.3”,
@angular-devkit/build-angular”: “~0.13.3”,
@angular-devkit/core”: “~7.3.3”,
@angular-devkit/schematics”: “~7.3.3”,

And set in angular.json (under …/architect/build/options)

“es5BrowserSupport”: true

and also trying to build with the same flag:
ng build --prod --es5BrowserSupport=true

but I always have the same error

ionicpwaelements.js was updated a few days later to fix that. Just use the latest version.