Description
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 in1.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/
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.