Service worker register don't fetch the ngsw.json correctly

[jvitor83]

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 #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()));

[jvitor83]

Just to link the related bug:
#8515

[sv2dev]

I guess this is an issue in @angular/service-worker ... At least the ngsw-worker.js file is delivered from that npm package.

[hansl]

How is this different then #8515?

[jvitor83]

@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 ServiceWorker register generated by cli with base-href don't works #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.

[manrueda]

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: angular/angular@f582620

[dereklin]

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();
    }

[rahulsahay19]

I am also getting the same error. Problem is, when I am running locally, I don't have any problem. But, when the same site is getting deployed on azure, its creating problem like shown below.

Not sure, what I am doing wrong. At the same time, manifest is loading fine.

Kindly advice if I am doing anything wrong?

Thanks,
Rahul

[Vinutha-BK]

Hi , I followed the steps from below link
https://medium.com/@nsmirnova/creating-pwa-with-angular-5-part-2-progressifying-the-application-449e3a706129.
Its working fine locally when i build [ng build --prod] and run application [http-server -p 4200]

but I have loaded project to git and using azure for hosting with jenkins build
npm install
ng build --prod

but getting below error:
Uncaught (in promise) Error: Manifest fetch failed!
at Driver.fetchLatestManifest (ngsw-worker.js:2187)
at

And in the local application screen

Azure hosted application is like

[aonerd]

Hi,
Similar to Vinutha-BK I am also deploying to Azure and getting the exact same problem.
Everything works fine locally but once deployed I get the same error message.
Any ideas?
Thanks

[aonerd]

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

[Vinutha-BK]

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