Skip to content

pwa: missing progressive enhancements in base cli project #10236

Closed
@markgoho

Description

@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:
image

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P5The team acknowledges the request but does not plan to address it, it remains open for discussion

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions