Angular-cli: pwa: missing progressive enhancements in base cli project

[markgoho]

Versions

Angular CLI: 6.0.0-rc.2
Node: 9.11.1
OS: win32 x64
Angular: 6.0.0-rc.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

@angular/cli: 6.0.0-rc.2
@angular-devkit/architect: 0.5.4
@angular-devkit/build-angular: 0.5.4
@angular-devkit/build-optimizer: 0.5.4
@angular-devkit/core: 0.5.4
@angular-devkit/schematics: 0.5.4
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 6.0.0-rc.2.4
@schematics/angular: 0.5.4
@schematics/update: 0.5.4
typescript: 2.7.2
webpack: 4.5.0

Repro steps

• ng new with --service-worker flag (in rc, this needs to be added in manually, but assume it functions like it did in 1.7.4)
• use something like firebase hosting to deploy
• fun lighthouse audit

Observed behavior

Here is the deployed app: https://angular-cli-pwa.firebaseapp.com/

The lighthouse scores were:

Desired behavior

It would be ideal to see 100s in all 5 categories for an Angular CLI project. At a minimum, the Progressive Web App category should 100. Currently that score is 64 which means there's room for improvement.

Mention any other details that might be useful (optional)

Here are the specific audits that the cli project failed under the PWA category. All of these are relatively easy to fix.

Does not provide fallback content when JavaScript is not available
Your app should display some content when JavaScript is disabled, even if it's just a warning to the user that JavaScript is required to use the app. Learn more.
The page body should render some content if its scripts are not available.

User will not be prompted to Install the Web App
Browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement. Learn more.
Failures: No manifest was fetched, Service worker does not successfully serve the manifest's start_url, No usable web app manifest found on page.

Is not configured for a custom splash screen
A themed splash screen ensures a high-quality experience when users launch your app from their homescreens. Learn more.
Failures: No manifest was fetched.

Address bar does not match brand colors
The browser address bar can be themed to match your site. Learn more.
Failures: No manifest was fetched, No <meta name="theme-color"> tag found.

[hansl]

I'll review the PR, but this isn't blocking. Hopeful to make it in the next RC, but definitely will be there soon.

[gkalpak]

AFAICT, this has been mostly resolved with angular/devkit#693 (and follow-up PRs).
Remaining issues/things to improve:

• Provide fallback content when scripts are not available (e.g. disabled JavaScript).
• Enable prompting user to install the Web App, by setting display (in manifest.json) to one of minimal-ui/standalone/fullscreen.
  (Currently, it is set to browser, which stops browsers from prompting users to install it.)
  PR: angular/devkit#797

[cyrilletuzi]

The only missing piece is the fallback content. It's as simple as putting something like <app-root>App is loading</app-root> in index.html. So that could be ready for v6.0.

It was the initial behavior of the CLI, but at some point the text inside root component was removed from schematics. Was there any reason to that?

[markgoho]

@cyrilletuzi I believe best practice is to provide fallback content a <noscript> tag.

<app-root></app-root>

<noscript>
    Please enable Javascript to continue using this application.
</noscript>

[markgoho]

Update after the official release of v6 and running ng add @angular/pwa

Definitely a little bit of work left to do 👍

[markgoho]

https://github.com/angular/devkit/pull/853 open to fix the missing fallback content

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}