Feature request: ngsw navigation path exceptions

[kernwig]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] 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

The service worker isNavigationRequest() function assumes that any page navigation within scope is to be handled by the service worker. There are cases were this is not desired behavior.

Expected behavior

Provide a means of configuring exception paths that are checked in isNavigationRequest().

Minimal reproduction of the problem with instructions

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

Example need: Hosting server services and authentication via Feathers.js expects to navigate to the path /auth/google to initiate an OAUTH2 authentication via Google; with completion of authentication directing back to /auth/google/callback. These requests must go through to the server. Currently ngsw-worker.js intercepts these requests and return the start page HTML.

Environment

Angular version: 5.0.1


Browser:
- [x] 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: 7.10.1
- Platform:  Mac

Others:

[kernwig]

Stream of comments on Slack as I dealt with this problem:

Adam Fanello [4:34 PM]
Any help out there? I upgraded my app to Angular 5 with @anguler/service-worker, and it all worked on my computer. Upon deploying though, the server worker is intercepting the authentication request to the server and responding with my index.html!?!
Authentication goes to /auth/google or /auth/facebook. Nowhere in https://sqac.fanello.net/ngsw.json is any /auth path mentioned, yet Chrome's network tab shows the index.html content being returned by the service worker. It behaves correctly if I stop the SW.

Adam Fanello [8:14 PM]
If anyone is out there.. found the problem has to do with scope. The service-worker thinks it needs to control any page navigation under it, but login requires network access to hit the OAUTH server endpoint and be redirected to the OAUTH provider. Trying to figure out how to work around this. (Doesn't happen in dev because client and server are coming from two different ports in dev.) (edited)

Adam Fanello [8:51 PM]
I don't know why, but ngsw-worker.js includes an exception when navigating to a URL containing two underscores. I added #__ to the end of each URL (ex: /auth/google#__), and that fixed the problem. Quite the PWA gotcha that I haven't seen mentioned anywhere.

Adam Fanello [9:42 PM]
Ugh! Again dev and prod don't behave the same. OAUTH callback doesn't have the double-underscore, so fail. This is such a hack. Basically ngsw is designed not to allow the client code and server API to reside on the same domain! (edited)

Adam Fanello [10:42 PM]
Finally found all the places to add __ to every API path. (OAUTH was tricky.) Working, but what a hack! 😕

[gkalpak]

We also need this for angular.io. The usecase:
We want some requests to pass through to the server, were we have configured certain redirection rules. With the previous @angular/service-worker, we were able to exclude specific requests (based on the URL) from being handled by the SW, so these URLs were passed through to the server.

cc @IgorMinar, @alxhub

[alxhub]

@gkalpak this is a feature that was omitted from the new SW in the hopes that navigation-detection would prove sufficient. I think the current blacklist approach which detects URLs with __ or file extensions should be expanded into a a configurable list of URL glob patterns which are excluded.

[coryrylan]

Would a list of regexes be more flexible?
Workbox has a navigateFallbackWhitelist and navigateFallbackBlacklist properies to take a list of regexes to scope the service worker to. This is actually the feature that is keeping us on Workbox instead of migrating to @angular/service-worker. We use navigateFallbackWhitelist to only apply to the angular specific pages as we are converting a large enterprise app.

https://developers.google.com/web/tools/workbox/modules/workbox-build

[gkalpak]

Let's discuss on #23025.

[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.}