Service worker configuration does not generate a valid manifest file

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

The current interface for a service worker manifest is:

export interface Config {
  appData?: {};
  index: string;
  assetGroups?: AssetGroup[];
  dataGroups?: DataGroup[];
}

Setting appData in ngsw-config.json, for example:

{
  "index": "/index.html",
  "appData": {
    "name": "Donate App",
    "description": "This app helps you donate to worthy causes.",
    "icons": [{
      "src": "images/icon.png",
      "sizes": "192x192"
    }]
  },
  "assetGroups": [
    ...
  ]

results in a generated manifest:

{
  "configVersion": 1,
  "index": "/index.html",
  "appData": {
    "name": "Donate App",
    "description": "This app helps you donate to worthy causes.",
    "icons": [{
      "src": "images/icon.png",
      "sizes": "192x192"
    }]
  },
  "assetGroups": [
    ...
  ],
  "dataGroups": [
    ...
  ],
  "hashTable": {
    ...
  }

Expected behavior

I acknowledge that the current standard for Web App Manifest is a draft, I believe browsers have some expectations, such as application properties (e.g. name, short_name, etc.) are at the root level of the manifest file.

For example,

{
  "name": "Donate App",
  "description": "This app helps you donate to worthy causes.",
  "icons": [{
    "src": "images/icon.png",
    "sizes": "192x192"
  }]
}

and

{
  "lang": "en",
  "dir": "ltr",
  "name": "Super Racer 3000",
  "description": "The ultimate futuristic racing game from the future!",
  "short_name": "Racer3K",
  "icons": [{
    "src": "icon/lowres.webp",
    "sizes": "64x64",
    "type": "image/webp"
  },{
    "src": "icon/lowres.png",
    "sizes": "64x64"
  }, {
    "src": "icon/hd_hi",
    "sizes": "128x128"
  }],
  "scope": "/racer/",
  "start_url": "/racer/start.html",
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "aliceblue",
  "background_color": "red",
  "serviceworker": {
    "src": "sw.js",
    "scope": "/racer/",
    "use_cache": false
  },
  "screenshots": [{
    "src": "screenshots/in-game-1x.jpg",
    "sizes": "640x480",
    "type": "image/jpeg"
  },{
    "src": "screenshots/in-game-2x.jpg",
    "sizes": "1280x920",
    "type": "image/jpeg"
  }]
}

Minimal reproduction of the problem with instructions

Following the Getting Started, and adding appData should reproduce the issue.

What is the motivation / use case for changing the behavior?

Environment

Angular version: 5.2.3
Angular CLI: 1.6.7


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.9.3  
- Platform: Mac 

Others:

[shaunlmason]

That’s not a bad idea, I’ll add it to my todo list for this week.

[gkalpak]

Thx for opening the issue anyway. If you thought this way other might too. Maybe we could do a better job making it clear in the docs. (@shaunlmason, you are more than welcome to submit a PR with a clarification 😉)

cc @kapunahelewong