Angular-cli: ServiceWorker are not using --deploy-url

[naveedahmed1]

Bug Report or Feature Request (mark with an x)

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

Command (mark with an x)

- [x] build

Versions

node: v8.11.4

Angular CLI: 7.0.0-beta.4
Node: 8.11.4
OS: win32 x64
Angular: 7.0.0-beta.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.7.1
@angular-devkit/build-angular      0.7.1
@angular-devkit/build-optimizer    0.7.1
@angular-devkit/build-webpack      0.7.1
@angular-devkit/core               0.7.1
@angular-devkit/schematics         7.0.0-beta.4
@angular/cdk                       7.0.0-beta.0
@angular/cdk-experimental          6.4.1
@angular/cli                       7.0.0-beta.4
@angular/fire                      5.0.0
@angular/flex-layout               6.0.0-beta.18
@angular/material                  7.0.0-beta.0
@angular/material-moment-adapter   7.0.0-beta.0
@angular/pwa                       0.8.3
@ngtools/webpack                   6.1.1
@schematics/angular                7.0.0-beta.4
@schematics/update                 0.9.0-beta.4
rxjs                               6.3.2
typescript                         3.0.3
webpack                            4.9.2

Repro steps

This is a followup issue from https://github.com/angular/angular-cli/issues/9753

Recap:

ng build --deploy-url https://cdn.domain.com/

Angular uses the base url instead of deploy-url

https://github.com/angular/angular-cli/issues/9753 suggests to use HTML base HREF of https://cdn.domain.com and an Angular APP_BASE_HREF of /. But this doesn't work as expected.

Conclusion
I tested my app with different configurations and below is my conclusion:

Using an HTML base HREF of https://cdn.domain.com and an Angular APP_BASE_HREF of / doesn't work.

Using an HTML base HREF of https://cdn.domain.com and dynamically setting Angular APP_BASE_HREF to mydomain.com works (but has additional issue).

We can set dynamically Angular APP_BASE_HREF:

environment.appBaseHref: window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port:'')

{ provide: APP_BASE_HREF, useValue: environment.appBaseHref }

Though the second option works, but it introduces another issue, since we have now set the HTML base HREF to our CDN domain, this breaks other libraries that we are using. For example in my case
we are using other libraries such as Firebase Messaging for Push Notifications. When HTML base HREF is set to CDN it doesn't work.

I think we do need support for --deploy-url

Desired functionality

So, when --deploy-url is provided:

1. The urls generated in service worker should have the --deploy-url prepended to the assets.
2. The HTML base HREF in generated Index.html file should be set to /
3. The path of javascript bundles in index.html file should have --deploy-url prepended

[ZionDials]

Have you tried using ng add @angular/pwa to create service worker?

[naveedahmed1]

Yes I guess that's how I added the service worker.

[adrigardi90]

Any news about the issue? I'm facing the same problem.

I need to build the app using --deploy-url specifically (and not with href) and the urls generated in the service worker do not have the --deploy-url. It should work exactly as @naveedahmed1 explained

[lansana]

Would love some news about this issue as well, can make a contribution if led in the right direction. I don't see why this would be a large change. Essentially just a one liner adding a prefix to the generated URL using the command line argument value as the prefix...am I right?

[Need-To-Learn]

Hi, I am encountering this issue too.
I use angular universal at a domain (ex: example.com), and i serve static assets to a cdn.

So i cant use base-href and i need the deploy url option.
Currently the service worker registers my static assets at //.js, but the index.html served by universal try to load http://cdn.example.com//.js. That way the cache isnt working. If the app is in offline mode, the cdn assets wont be cached. I can only cache them when application load them, but not on application startup.

Here: https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/browser/index.ts#L231
The builder use the deployUrl option to create the index.html, but not here : https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/browser/index.ts#L251
To setup ngsw conf

[lansana]

@Need-To-Learn I fixed this with a custom script that rewrites the index.html created by an ng build... such that a /**/*.js will turn to https://cdn.foo.com/**/*.js.

It's not pretty, but it works well for me without having to wait for the Angular team to release a fix (which will likely not happen unless someone else puts in the PR since this isn't a high priority).

[eliraneliassy]

+1 here.
Same issue.

[duncandean]

Also causing some issues my side. Our CDN deploy URL is transient too for web assets, so we need manifest and service worker urls to obey --deployUrl.

[eliraneliassy]

@alxhub @IgorMinar - It seems like this one is preventing a lot of users from using the PWA package.

Any chance to change the priority for this?

[duncandean]

@lansana Had to do the same with a custom script.

[Nodarii]

@alan-agius4 , You have categorized this item as "low frequency", but in fact everybody who uses cdn for deployment and pwa face this issue. Does it make sense to increase priority?

[alan-agius4]

@Nodarii bumped the frequency. Thanks for highlighting this.

[Nodarii]

temporary fix that I'm using:
package.json

"scripts": {
    ...
    "fix-ng-sw-path":  "ngsw-config dist/YOUR_PROJECT_NAME ./ngsw-config.json"
    ...
  },

then after your dist folder is built run - npm run fix-ng-sw-path -- YOUR_DEPLOY_URL

[bryanjjohnson]

Any word on the state of this story? I've been running into issues with this.

[rruffer]

up

[emondora]

please!!!

[rruffer]

Nothing yet people? this is a high priority. Every time I build my application I have to make changes manually. This is a high priority for me.

[koenig-dominik]

Some notes on this issue:

It is important that these files are served from the application root path and not from another domain as this specifies their scope:

• manifest.webmanifest
• ngsw-worker.js

I have also noticed that with angular 10.1.3 it is also needed to have the index.html file on the same domain as the application, if not the navigation requests fail, even if ngsw.json has a correct "index": "https://my-cdn.com/index.html"

If you also have a scripts.js or styles configured via projects.name.architect.build.options.(scripts|styles) which is also served via a non same origin domain a cors issue arises.
This happens, because the scripts.js is not of type="module" which in turn does fetch the script normally with the no-cors option.
This request then gets cached.
After that the service worker tries to fetch said scripts.js as part of the default assetGroup "app"
This then fails, because the server worker gets the cached reply which was requested with the no-cors options, but the service worker in this case requires the cors headers.
If the requests are made with the option "Disable cache" in the Chome DevTools the service worker installation succeeds, because the resource is fetched without the no-cors and with the origin header.

This behavior seems like a bug in Chrome (85) as it does not occur in Firefox
I have not tested Safari or any mobile browsers

In conclusion, here are the steps to make it all work properly:

1. build your application
2. run npx ngsw-config dist/${YOUR_PROJECT_NAME} ./ngsw-config.json ${YOUR_DEPLOY_URL}
3. replace following texts in dist/${YOUR_PROJECT_NAME}/ngsw.json
${YOUR_DEPLOY_URL}ngsw-worker.js -> /ngsw-worker.js
${YOUR_DEPLOY_URL}index.html -> /index.html
4. replace the following texts in dist/${YOUR_PROJECT_NAME}/index.html
<script src="${YOUR_DEPLOY_URL}scripts. -> <script crossorigin="anonymous" src="${YOUR_DEPLOY_URL}scripts.
<link rel="stylesheet" href="${YOUR_DEPLOY_URL}styles. -> <link crossorigin="anonymous" rel="stylesheet" href="${YOUR_DEPLOY_URL}styles.
5. re-calculate the hash of your index.html file in the dist/${YOUR_PROJECT_NAME}/ngsw.json file
6. deploy your built files on your CDN, but deploy index.html, manifest.webmanifest, ngsw-worker.js on the root of your served application

[mc-lovin]

bump

[levkach]

Need this feature as well