Repository navigation
Feature request: ngsw navigation path exceptions #20404
Description
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:
Activity
kernwig commentedon Nov 13, 2017
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 commentedon Mar 20, 2018
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 commentedon Mar 21, 2018
@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 commentedon Mar 30, 2018
Would a list of regexes be more flexible?
Workbox has a
navigateFallbackWhitelistandnavigateFallbackBlacklistproperies 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 usenavigateFallbackWhitelistto 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 commentedon Mar 30, 2018
Let's discuss on #23025.
feat(service-worker): add support for ignoring specific URLs
feat(service-worker): add support for configuring navigations URLs
angular-automatic-lock-bot commentedon Sep 15, 2019
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.