Pwa server redeploy iOS white screen

Ionic Framework
1

I host a PWA build with Ionic v4 Angular v7 on Firebase

When iOS user access it for the first time, use it and had it to their homes teen it’s all good

If I redeploy the app on Firebase, then next time they start/access the app they will encounter a white screen of death

If the safari browser cache is cleaned, then at least in the browser it works again but the app added to the home screen still face the white screen

I use the @angular/pwa to bundle the service worker

Any idea what the heck?

2

I have also had this problem. Not only with Safari, but also e.g. with Firefox on Windows (at least there you have the reload button).

I think the issue is with problems in the life cycle of the service worker, which leads to a mix of old and new javascript files, and thus a crash in the loading of the app.

I don’t have a solution, but as a workaround, I started adding something like this to the index.html of my projects:

<head>
 [... all other stuff]
  <style>
    @keyframes fadein-button {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .emergency-reload-button {
      z-index: -999;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      animation: fadein-button 0.5s linear 3.5s forwards;
      background-color: #dddddd;
      border: none;
      border-radius: 10px;
      padding: 15px 32px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
  <button class="emergency-reload-button" onClick="window.location.reload(true)">Reload</button>
</body>

So if after a couple of seconds no javascript is loaded, at least a reload button is shown. In most cases after a reload the problem is gone (however I have also encountered cases where a reload didn’t help, I have no idea why though).

1 Like
3

Thx for the idea, that may be a nice workaround :slight_smile:

Service worker cache is so strong

4

Not for the application related to this post but in my other project (no Angular, only core) I was facing the same problem and I solved it like the following: https://github.com/GoogleChrome/workbox/issues/1902

Don’t think this fix could be applied to an Angular project but still.

I also heard they might be a problem in rollup which might have been fixed but not yet rolled out, so maybe the problem comes from some web components and will be fixed at some point soon

I keep an eye ont it

1 Like
5

Thanks for sharing. This is valuable information.

1 Like