Angular 6 PWA 504 error in Chrome. Base href problem?
1
I've stumbled on a weird error when I'm trying to serve my Angular app on IIS and I cant seem to solve it.
When I'm trying to access my PWA offline (in Chrome), a HTTP 504 error appears.
The setup is simple: < 5 min
ng new pwaDemo- cd in to app and
ng add @angular/pwa
- in app.module.ts add . to ServiceWorkerModule so the app can find ngsw-worker.js
ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production })
- in manifest change scope and start_url:
"scope": "/pwaDemo/",
"start_url": "/pwaDemo/",
- build the app to prod with
ng build --prod --base-href /pwaDemo/
- add a application to your IIS with unmanaged code and pointing to
C:UsersmyUsernameDesktopmyAngularApppwaDemodistpwaDemo
- navigate to
https://computername/pwaDemo/with Chrome - service worker is downloaded and manifest all fine and dandy
- Make Chrome go offline (F12 -> Application -> Service Workers -> Offline)
- Reload page: -> 504 error.
I cant seem to figure out what is wrong. When I'm trying in Firefox everything works (even in offline mode).
When I'm using http-server to host the app (without --base href) everything works in Chrome (including offline).
Can anybody please help? I'm really stuck.
Version:
Angular CLI: 6.0.8
angular
google-chrome iis service-worker progressive-web-apps asked Nov 13 '18 at 14:54
wallefwallef
397
|
show 9 more comments
1
I've stumbled on a weird error when I'm trying to serve my Angular app on IIS and I cant seem to solve it.
When I'm trying to access my PWA offline (in Chrome), a HTTP 504 error appears.
The setup is simple: < 5 min
ng new pwaDemo- cd in to app and
ng add @angular/pwa
- in app.module.ts add . to ServiceWorkerModule so the app can find ngsw-worker.js
ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production })
- in manifest change scope and start_url:
"scope": "/pwaDemo/",
"start_url": "/pwaDemo/",
- build the app to prod with
ng build --prod --base-href /pwaDemo/
- add a application to your IIS with unmanaged code and pointing to
C:UsersmyUsernameDesktopmyAngularApppwaDemodistpwaDemo
- navigate to
https://computername/pwaDemo/with Chrome - service worker is downloaded and manifest all fine and dandy
- Make Chrome go offline (F12 -> Application -> Service Workers -> Offline)
- Reload page: -> 504 error.
I cant seem to figure out what is wrong. When I'm trying in Firefox everything works (even in offline mode).
When I'm using http-server to host the app (without --base href) everything works in Chrome (including offline).
Can anybody please help? I'm really stuck.
Version:
Angular CLI: 6.0.8
angular
google-chrome iis service-worker progressive-web-apps asked Nov 13 '18 at 14:54
wallefwallef
397
Can you try with latest versions for cli, Angular, etc.? Also, what doeshttps://computername/pwaDemo/ngsw/stateshow?
– gkalpak
Nov 13 '18 at 16:30
@gkalpak Tried with Angular CLI: 7.0.5. Same problem. /ngsw/state gives 404
– wallef
Nov 13 '18 at 16:46
I tried withhttp-serverand it seems to work fine. If/ngsw/stategives 404, it means that the SW is not serving requests. It sounds like an IIS configuration (or SSL certificate) issue.
– gkalpak
Nov 13 '18 at 17:10
@gkalpak do you have any idea how I can test it? This seems like a quite simple setup but I haven't find anyone else that has this problem.
– wallef
Nov 13 '18 at 17:23
Hard to tell without being able to reproduce. I would ensure the SSL certificate is valid (for the domain used) according to Chrome (you can click on the lock icon in the address bar for more info) and try to find out if the SW is installed (and if not why).DevTools > Application > Service Workersandchrome://serviceworker-internals/may have useful info.
– gkalpak
Nov 13 '18 at 18:37
|
show 9 more comments
1
1
1
I've stumbled on a weird error when I'm trying to serve my Angular app on IIS and I cant seem to solve it.
When I'm trying to access my PWA offline (in Chrome), a HTTP 504 error appears.
The setup is simple: < 5 min
ng new pwaDemo- cd in to app and
ng add @angular/pwa
- in app.module.ts add . to ServiceWorkerModule so the app can find ngsw-worker.js
ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production })
- in manifest change scope and start_url:
"scope": "/pwaDemo/",
"start_url": "/pwaDemo/",
- build the app to prod with
ng build --prod --base-href /pwaDemo/
- add a application to your IIS with unmanaged code and pointing to
C:UsersmyUsernameDesktopmyAngularApppwaDemodistpwaDemo
- navigate to
https://computername/pwaDemo/with Chrome - service worker is downloaded and manifest all fine and dandy
- Make Chrome go offline (F12 -> Application -> Service Workers -> Offline)
- Reload page: -> 504 error.
I cant seem to figure out what is wrong. When I'm trying in Firefox everything works (even in offline mode).
When I'm using http-server to host the app (without --base href) everything works in Chrome (including offline).
Can anybody please help? I'm really stuck.
Version:
Angular CLI: 6.0.8
angular
google-chrome iis service-worker progressive-web-apps asked Nov 13 '18 at 14:54
wallefwallef
397
I've stumbled on a weird error when I'm trying to serve my Angular app on IIS and I cant seem to solve it.
When I'm trying to access my PWA offline (in Chrome), a HTTP 504 error appears.
The setup is simple: < 5 min
ng new pwaDemo- cd in to app and
ng add @angular/pwa
- in app.module.ts add . to ServiceWorkerModule so the app can find ngsw-worker.js
ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production })
- in manifest change scope and start_url:
"scope": "/pwaDemo/",
"start_url": "/pwaDemo/",
- build the app to prod with
ng build --prod --base-href /pwaDemo/
- add a application to your IIS with unmanaged code and pointing to
C:UsersmyUsernameDesktopmyAngularApppwaDemodistpwaDemo
- navigate to
https://computername/pwaDemo/with Chrome - service worker is downloaded and manifest all fine and dandy
- Make Chrome go offline (F12 -> Application -> Service Workers -> Offline)
- Reload page: -> 504 error.
I cant seem to figure out what is wrong. When I'm trying in Firefox everything works (even in offline mode).
When I'm using http-server to host the app (without --base href) everything works in Chrome (including offline).
Can anybody please help? I'm really stuck.
Version:
Angular CLI: 6.0.8
angular
google-chrome iis service-worker progressive-web-apps angular
google-chrome iis service-worker progressive-web-apps asked Nov 13 '18 at 14:54
wallefwallef
397
asked Nov 13 '18 at 14:54
wallefwallef
397
asked Nov 13 '18 at 14:54
wallefwallef
397
asked Nov 13 '18 at 14:54
wallefwallef
397
asked Nov 13 '18 at 14:54
wallefwallef
397
397
Can you try with latest versions for cli, Angular, etc.? Also, what doeshttps://computername/pwaDemo/ngsw/stateshow?
– gkalpak
Nov 13 '18 at 16:30
@gkalpak Tried with Angular CLI: 7.0.5. Same problem. /ngsw/state gives 404
– wallef
Nov 13 '18 at 16:46
I tried withhttp-serverand it seems to work fine. If/ngsw/stategives 404, it means that the SW is not serving requests. It sounds like an IIS configuration (or SSL certificate) issue.
– gkalpak
Nov 13 '18 at 17:10
@gkalpak do you have any idea how I can test it? This seems like a quite simple setup but I haven't find anyone else that has this problem.
– wallef
Nov 13 '18 at 17:23
Hard to tell without being able to reproduce. I would ensure the SSL certificate is valid (for the domain used) according to Chrome (you can click on the lock icon in the address bar for more info) and try to find out if the SW is installed (and if not why).DevTools > Application > Service Workersandchrome://serviceworker-internals/may have useful info.
– gkalpak
Nov 13 '18 at 18:37
|
show 9 more comments
Can you try with latest versions for cli, Angular, etc.? Also, what doeshttps://computername/pwaDemo/ngsw/stateshow?
– gkalpak
Nov 13 '18 at 16:30
@gkalpak Tried with Angular CLI: 7.0.5. Same problem. /ngsw/state gives 404
– wallef
Nov 13 '18 at 16:46
I tried withhttp-serverand it seems to work fine. If/ngsw/stategives 404, it means that the SW is not serving requests. It sounds like an IIS configuration (or SSL certificate) issue.
– gkalpak
Nov 13 '18 at 17:10
@gkalpak do you have any idea how I can test it? This seems like a quite simple setup but I haven't find anyone else that has this problem.
– wallef
Nov 13 '18 at 17:23
Hard to tell without being able to reproduce. I would ensure the SSL certificate is valid (for the domain used) according to Chrome (you can click on the lock icon in the address bar for more info) and try to find out if the SW is installed (and if not why).DevTools > Application > Service Workersandchrome://serviceworker-internals/may have useful info.
– gkalpak
Nov 13 '18 at 18:37
Can you try with latest versions for cli, Angular, etc.? Also, what does
https://computername/pwaDemo/ngsw/state show?– gkalpak
Nov 13 '18 at 16:30
Can you try with latest versions for cli, Angular, etc.? Also, what does
https://computername/pwaDemo/ngsw/state show?– gkalpak
Nov 13 '18 at 16:30
@gkalpak Tried with Angular CLI: 7.0.5. Same problem. /ngsw/state gives 404
– wallef
Nov 13 '18 at 16:46
@gkalpak Tried with Angular CLI: 7.0.5. Same problem. /ngsw/state gives 404
– wallef
Nov 13 '18 at 16:46
I tried with
http-server and it seems to work fine. If /ngsw/state gives 404, it means that the SW is not serving requests. It sounds like an IIS configuration (or SSL certificate) issue.– gkalpak
Nov 13 '18 at 17:10
I tried with
http-server and it seems to work fine. If /ngsw/state gives 404, it means that the SW is not serving requests. It sounds like an IIS configuration (or SSL certificate) issue.– gkalpak
Nov 13 '18 at 17:10
@gkalpak do you have any idea how I can test it? This seems like a quite simple setup but I haven't find anyone else that has this problem.
– wallef
Nov 13 '18 at 17:23
@gkalpak do you have any idea how I can test it? This seems like a quite simple setup but I haven't find anyone else that has this problem.
– wallef
Nov 13 '18 at 17:23
Hard to tell without being able to reproduce. I would ensure the SSL certificate is valid (for the domain used) according to Chrome (you can click on the lock icon in the address bar for more info) and try to find out if the SW is installed (and if not why).
DevTools > Application > Service Workers and chrome://serviceworker-internals/ may have useful info.– gkalpak
Nov 13 '18 at 18:37
Hard to tell without being able to reproduce. I would ensure the SSL certificate is valid (for the domain used) according to Chrome (you can click on the lock icon in the address bar for more info) and try to find out if the SW is installed (and if not why).
DevTools > Application > Service Workers and chrome://serviceworker-internals/ may have useful info.– gkalpak
Nov 13 '18 at 18:37
|
show 9 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283717%2fangular-6-pwa-504-error-in-chrome-base-href-problem%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283717%2fangular-6-pwa-504-error-in-chrome-base-href-problem%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you try with latest versions for cli, Angular, etc.? Also, what does
https://computername/pwaDemo/ngsw/stateshow?– gkalpak
Nov 13 '18 at 16:30
@gkalpak Tried with Angular CLI: 7.0.5. Same problem. /ngsw/state gives 404
– wallef
Nov 13 '18 at 16:46
I tried with
http-serverand it seems to work fine. If/ngsw/stategives 404, it means that the SW is not serving requests. It sounds like an IIS configuration (or SSL certificate) issue.– gkalpak
Nov 13 '18 at 17:10
@gkalpak do you have any idea how I can test it? This seems like a quite simple setup but I haven't find anyone else that has this problem.
– wallef
Nov 13 '18 at 17:23
Hard to tell without being able to reproduce. I would ensure the SSL certificate is valid (for the domain used) according to Chrome (you can click on the lock icon in the address bar for more info) and try to find out if the SW is installed (and if not why).
DevTools > Application > Service Workersandchrome://serviceworker-internals/may have useful info.– gkalpak
Nov 13 '18 at 18:37