Progressive Web App
43
/ 100
These audits validate the aspects of a Progressive Web App.
App can load on offline/flaky connections
Ensuring your web app can respond when the network connection is unavailable or flaky is critical to providing your users a good experience. This is achieved through use of a Service Worker.
-
Has a registered Service Worker
Yes
-
URL responds with a 200 when offline
Yes
-
Cache contains start_url from manifest
No
Page load performance is fast
Users notice if sites and apps don't perform well. These top-level metrics capture the most important perceived performance concerns.
-
First meaningful paint
-1
-
Speed Index
(target: 1,250)
(620)
100
First Visual Change: 620ms
Last Visual Change: 620ms
-
Estimated Input Latency
-1
-
Time To Interactive (alpha)
(target: 1,700)
-1
-
Content scrolls at 60fps
(Coming soon)
¯\_(ツ)_/¯
-
Touch input gets a response in < 150ms
(Coming soon)
¯\_(ツ)_/¯
-
App is interactive without jank after the first meaningful paint
(Coming soon)
¯\_(ツ)_/¯
Site is progressively enhanced
Progressive enhancement means that everyone can access the basic content and functionality of a page in any browser, and those without certain browser features may receive a reduced but not unfunctioning experience.
Network connection is secure
Security is an important part of the web for both developers and users. Moving forward, Transport Layer Security (TLS) support will be required for many APIs.
User can be prompted to Add to Homescreen
While users can manually add your site to their homescreen in the browser menu, the prompt (aka app install banner) will proactively prompt the user to install the app if the below requirements are met and the user has visited your site at least twice (with at least five minutes between visits).
-
Has a registered Service Worker
Yes
-
Manifest exists
No
-
Manifest contains start_url
No
-
Manifest contains icons at least 144px
No
-
Manifest contains short_name
No
Installed web app will launch with custom splash screen
A default splash screen will be constructed, but meeting these requirements guarantee a high-quality and customizable splash screen the user sees between tapping the home screen icon and your app’s first paint.
-
Manifest exists
No
-
Manifest contains name
No
-
Manifest contains background_color
No
-
Manifest contains theme_color
No
-
Manifest contains icons at least 192px
No
Address bar matches brand colors
The browser address bar can be themed to match your site. A theme-color meta tag will upgrade the address bar when a user browses the site, and the manifest theme-color will apply the same theme site-wide once it's been added to homescreen.
-
Manifest exists
No
-
HTML has a theme-color <meta>
(hsl(206, 99%, 31%))
Yes
-
Manifest contains theme_color
No
Design is mobile-friendly
Users increasingly experience your app on mobile devices, so it's important to ensure that the experience can adapt to smaller screens.
Manifest
-
Cache contains start_url from manifest
-
Manifest exists
-
Manifest contains start_url
-
Manifest contains icons at least 144px
-
Manifest contains short_name
-
Manifest contains name
-
Manifest contains background_color
-
Manifest contains theme_color
-
Manifest contains icons at least 192px
Performance
-
First meaningful paint
(-1)
-
Speed Index
(target: 1,250)
(620)
First Visual Change: 620ms
Last Visual Change: 620ms
-
Estimated Input Latency
(-1)
-
Time To Interactive (alpha)
(target: 1,700)
(-1)
Best Practices
These audits do not affect your score but are worth a look.
-
Accessibility:
Element aria-* roles are valid
Yes
-
Accessibility:
Element aria-* attributes are valid ARIA attributes
Yes
-
Accessibility:
Background and foreground colors have a sufficient contrast ratio
No
Elements must have sufficient color contrast
body > header > .from.header-group > .input-label
body > header > .to.header-group > .input-label
body > header > .when.header-group > button:nth-of-type(2) > .text
body > header > .when.header-group > button:nth-of-type(3) > .text
body > header > .when.header-group > button:nth-of-type(4) > .text
body > footer > p:nth-of-type(1)
body > footer > p:nth-of-type(2)
body > footer > p:nth-of-type(2) > .bom-trigger
body > footer > div:nth-of-type(1)
body > footer > div:nth-of-type(1) > a
body > footer > div:nth-of-type(2)
body > footer > div:nth-of-type(2) > a:nth-of-type(1)
body > footer > div:nth-of-type(2) > a:nth-of-type(2)
-
Accessibility:
Every image element has an alt attribute
Yes
-
Accessibility:
Every form element has a label
Yes
-
Manifest:
Manifest's short_name won't be truncated when displayed on homescreen
No
-
Manifest:
Manifest's display property is set
No
-
UX:
Service worker makes use of push notifications, if appropriate
(Coming soon)
¯\_(ツ)_/¯
-
UX:
Tap targets are appropriately sized for touch
(Coming soon)
¯\_(ツ)_/¯
-
UX:
Payment forms marked up with [autocomplete] attributes
(Coming soon)
¯\_(ツ)_/¯
-
UX:
Login forms marked up with [autocomplete] attributes
(Coming soon)
¯\_(ツ)_/¯
-
UX:
Input fields use appropriate [type] attributes for custom keyboards
(Coming soon)
¯\_(ツ)_/¯
These encapsulate your app's performance.