PWA failing with v9 i18n because of absolute paths in manifest.webmanifest

[cyrilletuzi]

🐞 Bug report

Command

• build
• xi18n

Is this a regression?

No, the issue seems to be there from a long time.

Description

Currently, the manifest.webmanifest generated with ng add @angular/pwa references absolute paths for scope and start_url.

It will work fine if the app is deployed in the root directory (ie. with <base href="/">).

But it will fails if the app is deployed in a subdirectory (ie. with <base href="/en/">), as absolute paths won't take base href into account.

Such base hrefs are the default scenario when using the new v9 --localize option (CLI will set a different base href for each locale), meaning PWA and v9 i18n don't work out of the box.

As paths in manifest.webmanifest are part of the dist build, ie. from the files impacted by base href, these paths should be relative and not absolute.

🔬 Minimal Reproduction

• create an app with v9, with translations
• ng add @angular/pwa
• ng build --prod --localize
• deploy the app
• do a Lighthouse audit in Chrome: PWA checks will fail, saying service worker can't be registered as it's out of scope

🔥 Exception or Error

The service worker won't cache the app files.

🌍 Your Environment

Angular CLI: 9.0.1
Node: 12.14.1
OS: darwin x64

Angular: 9.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, material, platform-browser
... platform-browser-dynamic, router, service-worker
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.1
@angular-devkit/build-angular      0.900.1
@angular-devkit/build-ng-packagr   0.900.1
@angular-devkit/build-optimizer    0.900.1
@angular-devkit/build-webpack      0.900.1
@angular-devkit/core               9.0.1
@angular-devkit/schematics         9.0.1
@angular/cli                       9.0.1
@ngtools/webpack                   9.0.1
@schematics/angular                9.0.1
@schematics/update                 0.900.1
ng-packagr                         9.0.0
rxjs                               6.5.4
typescript                         3.7.5
webpack                            4.41.2

Anything else relevant?
2 fixes possible for scope and start_url:

• easy: use a relative path ./
• safer but more complicated: add base href

Similar to #16390

[cyrilletuzi]

According to MDN (here and here), both for start_url and scope:

If the URL is relative, the manifest URL is used as the base URL to resolve it.

So a relative path (./) would be OK as the CLI build the webmanifest at the root of dist.

It's an easy fix, I can do the PR you give me a go on this solution.

[clydin]

This is really more general than i18n support. The manifest currently does not support custom base HREFs in any form. There is actually an existing issue regarding this: #15092

I think the relative URL change may be the prudent option.

[cyrilletuzi]

PR done: #17075