A presentation at BrumJS in in Birmingham, UK by Stuart Langridge
lighthouse lighthouse
PWA
progressive web apps
PWA
PWA
service worker
service worker manifest
service worker manifest short_name
service worker manifest short_name https
service worker manifest short_name https 144×144 icon
service worker manifest short_name https 144×144 icon loadable front page
service worker manifest short_name https 144×144 icon loadable front page png icon format
service worker manifest short_name https 144×144 icon loadable front page png icon format two visits within an hour
service worker manifest short_name https 144×144 icon loadable front page png icon format two visits within an hour not cancelled with onbeforeinstallprompt
service worker manifest short_name https 144×144 icon loadable front page png icon format two visits within an hour not cancelled with onbeforeinstallprompt ...whatever other requirements come up...
stop the madness stop the madness
lighthouse lighthouse
(50%: 16.0ms, 75%: 16.0ms, 90%: 16.0ms, 99%: 54.1ms, 100%: 67.1ms)
-- Time To Interactive (alpha): 100 (0ms)
-- Content scrolls at 60fps:
-- Touch input gets a response in < 150ms: Site is progressively enhanced: 100%
-- Page contains some content when its scripts are not available: true Network connection is secure: 100%
-- Site is on HTTPS: true
-- Site redirects HTTP traffic to HTTPS: true User can be prompted to Add to Homescreen: 20%
-- Has a registered Service Worker: true
-- Manifest exists: false
Unable to retrieve manifest
-- Manifest contains start_url: false
-- Manifest contains icons at least 144px: false
WARNING: No icons found in the manifest
-- Manifest contains short_name: false Installed web app will launch with custom splash screen: 0%
-- Manifest exists: false
Unable to retrieve manifest
-- Manifest contains name: false
-- Manifest contains background_color: false
-- Manifest contains theme_color: false
-- Manifest contains icons at least 192px: false
WARNING: No icons found in the manifest Address bar matches brand colors: 33%
-- Manifest exists: false
Unable to retrieve manifest
-- HTML has a theme-color <meta>: true (#2196F3)
-- Manifest contains theme_color: false Design is mobile-friendly: 100%
-- HTML has a viewport <meta>: true
-- Content is sized correctly for the viewport: true Name: Best Practices Description: These audits do not affect your score but are worth a look.
-- Element aria-* roles are valid: true
-- Element aria-* attributes are valid ARIA attributes: true
-- Background and foreground colors have a sufficient contrast ratio: false
Elements must have sufficient color contrast (Failed on 1 element)
Rating: critical
See: https://dequeuniversity.com/rules/axe/1.1/color-contrast
Nodes: 1 nodes identified (see HTML output for details)
-- Every image element has an alt attribute: true
-- Every form element has a label: true
-- Manifest's short_name won't be truncated when displayed on homescreen: false
-- Manifest's display property is set: false
Manifest display property should be set.
-- Service worker makes use of push notifications, if appropriate:
-- Tap targets are appropriately sized for touch:
github.com/GoogleChrome/lighthouse
questions? @sil
A summary of Google's new Lighthouse tool, for evaluating whether this PWA is doing everything right.
Here’s what was said about this presentation on social media.
for free. You
can too.