PWA always loading in mobile offline mode. Only sometime it is working

[Shailesh351]

No description provided.

[Shailesh351]

@kb0304 @shubhsherl

The root cause of this issue is because of late registering of service worker. Many packages are fetched before service worker gets registered.
So when user first time loads the app and goes offline, app doesn't load because missing cached libraries.
But if user refreshing the app and then goes offline it works fine. Because all the libs are cached now on second refresh.

So we need to make sure service worker gets registered before fetching mail html page(with all the packages/libs)
Here's the open github issue for this issue in w3c/ServiceWorker repo w3c/ServiceWorker#1282

[shubhsherl]

@Shailesh351 The workaround mentioned in the issue above, solves the problem.

if (reg.installing) {
   const sw = reg.installing || reg.waiting;
   sw.onstatechange = function() {
      if (sw.state === 'installed') {
          // SW installed.  Reload for SW intercept serving SW-enabled page.
          window.location.reload();
      }
   };
}

[Shailesh351]

Yes @shubhsherl I have tried that one. But it is not proper solution. In case of slow internet.

User waits for loading app -> then service worker gets registered -> Then again app reloads.

So we need to figure out other way around.

[shubhsherl]

@Shailesh351

User waits for loading app -> then service worker gets registered -> Then again app reloads.

But this will happen only on the first load of the app.

Another option is to add the minimum required requests in SW install listener, but this is not an efficient way, given there are many package requests.

[Shailesh351]

Agree with you @shubhsherl. It will be for the first time loading only. I tried finding other ways but no luck. So we should go with this implementation. I am creating PR for the same