Wsrtjtyk

I followed these guides to add pwa support and host my ionic v4 app:

• https://www.joshmorony.com/create-a-pwa-with-angular-service-workers-in-ionic-4/


• https://www.joshmorony.com/hosting-an-ionic-pwa-with-firebase-hosting/

The app loads fine in Safari, and I can also add the app to my home screen (ios). However, from the home screen, the app does not bootstrap when launched.

If I go to Safari DevTools and reload the page after launch, the app is just fine.

I'm also not exactly clear on the minimum requirements for a pwa. My app loads the google maps javascript api on launch, so it doesn't really work without a network connection. I'm not sure if that is part of the problem or not.

ionic info

Ionic:



   ionic (Ionic CLI)             : 4.3.1 (/Users/m/.nvm/versions/node/v8.9.4/lib/node_modules/ionic)

   Ionic Framework               : @ionic/angular 4.0.0-beta.15

   @angular-devkit/build-angular : 0.8.7

   @angular-devkit/schematics    : 0.8.7

   @angular/cli                  : 7.0.5

   @ionic/angular-toolkit        : 1.1.0



Capacitor:



   capacitor (Capacitor CLI) : 1.0.0-beta.7

   @capacitor/core           : 1.0.0-beta.7



Cordova:



   cordova (Cordova CLI) : 8.0.0

   Cordova Platforms     : ios 4.5.5

   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.1.4, (and 10 other plugins)



System:



   ios-deploy : 2.0.0

   NodeJS     : v8.9.4 (/Users/m/.nvm/versions/node/v8.9.4/bin/node)

   npm        : 6.4.1

   OS         : macOS High Sierra

   Xcode      : Xcode 10.0 Build version 10A255

on reload of the pwa app from DevTools, I see this error:

[Error] ERROR

Error: Uncaught (in promise): SecurityError: MIME Type is not a JavaScript MIME type

    vt (main.0c301dd161ca4cc6d73d.js:1:123807)

    handleError (main.0c301dd161ca4cc6d73d.js:1:124014)

    next (main.0c301dd161ca4cc6d73d.js:1:139466)

    (anonymous function) (main.0c301dd161ca4cc6d73d.js:1:131304)

    __tryOrUnsub (main.0c301dd161ca4cc6d73d.js:1:247187)

    next (main.0c301dd161ca4cc6d73d.js:1:246340)

    _next (main.0c301dd161ca4cc6d73d.js:1:245384)

    next (main.0c301dd161ca4cc6d73d.js:1:245056)

    next (main.0c301dd161ca4cc6d73d.js:1:272048)

    emit (main.0c301dd161ca4cc6d73d.js:1:131085)

    run (polyfills.0548e3ebf74d8c45f01b.js:1:2461)

    onHandleError (main.0c301dd161ca4cc6d73d.js:1:133065)

    runGuarded (polyfills.0548e3ebf74d8c45f01b.js:1:2721)

    e (polyfills.0548e3ebf74d8c45f01b.js:1:11589)

    microtaskDrainDone (polyfills.0548e3ebf74d8c45f01b.js:1:11638)

    d (polyfills.0548e3ebf74d8c45f01b.js:1:10261)

    promiseReactionJob

It seems like it should be related to Angular ServiceWorkers + MIME type error, but I'm using ionic build --prod; firebase deploy and the build output is all minimized.

Here's the network log when I launch the App from Home screen:

And here's what it looks like after I click reload in DevTools

I'm using this as a workaround for now:

  async patch_PWA_bootstrap(){

    const RELOAD_LIMIT = 5000

    const el = document.getElementsByTagName('HTML')[0];

    const now = Date.now();

    if (el.classList.contains('plt-pwa')){

      const resp = await Storage.get({key:'PWA_RELOAD'});

      if ( now - JSON.parse(resp.value) < RELOAD_LIMIT) 

        return;  // wait at  before next reload



      const cancel = setTimeout( async ()=>{

        // something not bootstrapping correctly with pwa.  reload() fixes

        await Storage.set({key:'PWA_RELOAD', value:JSON.stringify(now)});

        window.location.reload();

      },100)

    }

  }

I'm calling it when the PWA app loads and when it returns to foreground