feat(@schematics/angular): increase lighthouse pwa score to 100

[markgoho]

This will fix angular/angular-cli#10236 and bring the lighthouse score for a CLI generated project to:

Example app: https://angular-cli-pwa.firebaseapp.com/

I've added a manifest file, assets, and added a few key meta tags to the html file as well as provided a fallback for when javascript is not enabled. I've also updated the spec file to check for the manifest file and assets.

While a service worker is required for this to be a fully-realized PWA, CLI projects should come with manifest files and assets by default as they could be considered the first step towards a progressive web app. I hope to see a future version of the default CLI project where service workers are no longer behind a flag but are added by default.

[Brocco]

@markgoho This look GREAT! However; there is already some work done/started in regards to PWA where this will be a much better fit.

The Angular CLI now supports ng add which will run schematics to add functionality. Taking advantage of this functionality is @angular/pwa located in this repo here. It already has icons and a manifest file, but the changes to the index file are very welcome. Also since you commented about service worker, running ng add @angular/pwa will also add angular service worker support.

Let me know if you have any questions.

[markgoho]

Hey @Brocco I appreciate the insight here. I did notice the pwa folder and wondered what the vision there was. It sounds like (correct me if I'm misinterpreting) you guys would like to keep ng new kind of "pure" in a sense and allow schematics to augment the base project.

In that case, running ng new and then ng add @angular/pwa will create/add the necessary files/settings the base project to create the pwa. So, you'd like to see the tweaks from this repo added over there? I'm totally in to that!

It's looking like the pwa repo is a little more complex than the schematics repo here, and I'm not immediately aware of where to make edits to the index.html file. I'll have a poke around other schematics projects and see if I can find examples of edits to the files in the src directory.

[Brocco]

Your are interpreting that correctly, and this is because by having the logic separate it makes it easier for schematic authors to consume/extend the core schematics.

There is no real tooling at this point for updating an HTML file other than regexes. So the rough steps there would be very similar to something like here. Obviously without the JSON.parse logic, but at least it shows reading, changing and saving a file.

[markgoho]

Mike, I don't feel confident in being the first to create a function that scans the HTML and adds lines, but I'd be glad to partner up with someone that is. Obviously you guys are slammed with the impending release. Although it'd be great to get something out with v6 stable, I think this might need to wait until I find someone to work with.

I appreciate the support in making this happen. If you have any recommendations of who I might reach out to, I'm all ears 👍

[Brocco]

I think I'm going to tackle this myself... as I need to make alterations to resolve this issue anyway... #686.

[markgoho]

@Brocco it looks like you've got this solved in #693 -- and it looks amazing! Thank you for providing a foundation for other developers to add to that index.html file. I'm going to close this in favor of continuing pwa-related development on that folder in the devkit repo.