angular-cli: Service worker register don't fetch the ngsw.json correctly

Bug Report or Feature Request (mark with an `x`)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Angular CLI: 1.6.0-beta.0
Node: 8.9.0
OS: win32 x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

@angular/cli: 1.6.0-beta.0
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0-beta.0
@schematics/angular: 0.1.3
typescript: 2.4.2
webpack: 3.8.1

Repro steps.

ng new project --service-worker
cd project
ng build --prod --base-href=/project/

replace the line 16 of app.module.ts to: environment.production ? ServiceWorkerModule.register('/project/ngsw-worker.js') : [] (this is another bug https://github.com/angular/angular-cli/issues/8515)

then

Publish the dist folder to a web server with a base url /project/ Ex: http://localhost/project/

The log given by the failure.

At console:

Uncaught (in promise) Error: Manifest fetch failed!
    at Driver.fetchLatestManifest (ngsw-worker.js:2147)
    at <anonymous>
fetchLatestManifest @ ngsw-worker.js:2147
Promise rejected (async)
onMessage @ ngsw-worker.js:1814
Driver.scope.addEventListener @ ngsw-worker.js:1755

At network of chrome devtools it gives 404 since can’t found http://localhost/ngsw.json?ngsw-cache-bust=0.32248277017838034.

Desired functionality.

The right address of fetch should be http://localhost/project/ngsw.json?ngsw-cache-bust=0.32248277017838034

Mention any other details that might be useful.

At line 2141 of ngsw-worker.js file, it should consider the base-href.

const res = await this.safeFetch(this.adapter.newRequest('/ngsw.json?ngsw-cache-bust=' + Math.random()));

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 5
Comments: 24 (4 by maintainers)

Most upvoted comments

@hansl Even if you fix the register line like adding manually the base-path (this is the #8515 bug):

environment.production ? ServiceWorkerModule.register('/project/ngsw-worker.js') : []

the error appear at runtime on ngsw-worker.js.

So, @svi3c is right. Is a problem at ngsw-worker.js of @angular/service-worker. But the feature comes from the CLI with base-path.

This bug is related to the runtime problem when using base-path (@angular/service-worker)
The #8515 is related to the register (generated by cli) which not consider base-path

I don’t know if is needed 2 different issues, but feel free to close one if want to.

jvitor83 on Nov 22, 2017

I am getting 401 Unauthorized status code back. Any ideas how to work around that?:

   async fetchLatestManifest() {
        const res = await this.safeFetch(this.adapter.newRequest('ngsw.json?ngsw-cache-bust=' + Math.random()));
        if (!res.ok) {
            if (res.status === 404) {
                await this.deleteAllCaches();
                this.scope.registration.unregister();
            }
            throw new Error('Manifest fetch failed!');
        }
        this.lastUpdateCheck = this.adapter.time;
        return res.json();
    }

dereklin on Dec 28, 2017

Yes @aonerd. +1 Path to add the web config is https://(projectsitename).scm.azurewebsites.net/DebugConsole

Add .scm to your website address,which navigates to settings ,if web.config is already exist add the content or create new file(Web.config) in the below folder path. Site/wwwroot

Vinutha-BK on Mar 5, 2018

This solved it: https://blogs.msdn.microsoft.com/africaapps/2013/06/07/how-to-serve-static-json-files-from-a-windows-azure-website/

aonerd on Mar 3, 2018

When the service worker try to load the manifest use an absolute path.

const res = await this.safeFetch(this.adapter.newRequest('/ngsw.json?ngsw-cache-bust=' + Math.random()));

Changing that to a relative path (will be relative to the service worker path) do the work. The browser will do all the path resolution work.

const res = await this.safeFetch(this.adapter.newRequest('ngsw.json?ngsw-cache-bust=' + Math.random()));

UPDATE: It was already fixed here: https://github.com/angular/angular/commit/f582620d5b0787064f17a1521f55142d090845f0

manrueda on Dec 12, 2017