Documentation: Service Worker on the browsers that do not support it

[smnbbrv]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Originated at https://stackoverflow.com/questions/48045748/angular-service-worker-on-the-browsers-that-do-not-support-it . The text is partly copied

Can I Use shows quite a poor support of the feature in relatively important browsers. I can survive the not working IE11, but Safari (especially mobile) is a thing I wouldn't like to keep unsupported.

So, my intention would be to know how the angular service worker module, services, events those services provide etc will behave on the browser that does not support service workers.

Will all those just silently fail? Will the events be triggered anyhow? Will the ngsw-worker.js be requested? Will something be cached in IndexedDB instead of service worker?

The solution looks cool, however I cannot answer the question should I use it? until I know the answers on the questions above.

Expected behavior

The documentation should clearly define what is going on when the Service Worker is not supported by the browser.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

E.g. I want to implement the auto-refresh when the new app version is deployed => I need an answer to the question whether the service worker manifest will be downloaded on all the browsers and the updates will be pushed by SwUpdate or I need to implement it twice. This is actually pushing me in the direction of Service Worker in case it does and pushes away if it does not.

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[kapunahelewong]

@chembu and @jenniferfell fyi ^^

[alxhub]

The Angular SW only works in browsers which support service workers. This includes all of the application integration (e.g. the SwUpdate service).

If SWs are unsupported in the current browser.

• The SW script and ngsw.json will never be downloaded.
• Active attempts to interact with the SW, such as calling SwUpdate.checkForUpdate() will return rejected promises.
• Passive attempts to listen to SW Observables such as SwUpdate.available will simply never trigger - the Observables will never emit.

[smnbbrv]

Thanks for clarifying!

[sonnyk22]

Great input from alxhub. The question still remains of how to can configure our PWA app to totally ignore the Service Worker caching on the older browsers such as IE11, but load SW on the newer ones? The intent is for the PWA application to keep functioning as normal in IE. Is there a way to do this in our code?

[gkalpak]

As @alxhub mentioned above, you shouldn't need to do anything special in your code.

[jenniferfell]

Reopening until the original request is resolved:

• Doc the behavior of browser that does not support sw has an open PR.

Also, it sounds like we need to mention this: If the app is implemented to use service workers, but the user is accessing the app via a browser that does not support service workers, then the browser simply ignores the service worker caching. Browsers that support service workers still load the service worker as expected.

[jenniferfell]

Further comments about possible solution text are on the PR #22546

[smnbbrv]

Actually I am observing a slightly opposite thing in my sentry

The error is thrown.

errorUncaught (in promise): Error: Service workers are disabled or not supported by this browser Error: Service workers are disabled or not supported by this browser at e.prototype.checkForUpdate

I'm not sure how it affects the workflow, but seeing this error in error log is really annoying as long as I can't really fix it.

I did not have priorities to report this but as long as you reopen the issue :)

[smnbbrv]

This happens in main.js, so I assume it happens when one subscribes to SwUpdate

    this.auth.accessToken.subscribe(val => this.authenticated = !!val);

    // https://github.com/angular/angular/issues/20970
    if (environment.production) {
      this.ngZone.runOutsideAngular(() => interval(6 * 60 * 60).subscribe(() => this.ngZone.run(() => this.swupdate.checkForUpdate())));
    }

    this.swupdate.available.subscribe(() => this.showUpdatePopup());

[gkalpak]

This error means that the checkForUpdate() call returned a rejected promise. As @alxhub mentioned above, this is expected:

Active attempts to interact with the SW, such as calling SwUpdate.checkForUpdate() will return rejected promises.

If you want to avoid that, you can also check whether SW is enabled, via this.swupdate.isEnabled.

[jbogarthyde]

Resolved by addition of section to SW intro: https://angular.io/guide/service-worker-intro#browser-support

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}