从主屏幕启动时，离子/角度 pwa 不会引导答案

【问题标题】：ionic/angular pwa doesn't bootstrap when launched from home screen从主屏幕启动时，离子/角度 pwa 不会引导
【发布时间】：2018-11-20 12:31:40
【问题描述】：

我按照这些指南添加了 pwa 支持并托管了我的 ionic v4 应用程序：

应用程序在 Safari 中加载良好，我还可以将应用程序添加到我的主屏幕 (ios)。但是，从主屏幕启动时，应用程序不会引导。

如果我去 Safari DevTools 并在启动后重新加载页面，应用程序就可以了。

我也不清楚pwa 的最低要求。我的应用程序会在启动时加载google maps javascript api，因此如果没有网络连接，它就无法真正工作。我不确定这是否是问题的一部分。

离子信息

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

从 DevTools 重新加载 pwa 应用程序时，我看到此错误：

[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

好像应该和Angular ServiceWorkers + MIME type error有关，但我用的是ionic build --prod; firebase deploy，构建输出全部最小化了。

这是我从主屏幕启动应用程序时的网络日志：

这是我在 DevTools 中单击重新加载后的样子

【问题讨论】：

标签： angular ionic-framework google-maps-api-3 progressive-web-apps

【解决方案1】：

我现在将其用作解决方法：

  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)
    }
  }

我在 PWA 应用加载和返回前台时调用它

【讨论】：