Building a
better web for everyone
Henry Lim @henrylim96
Slide 2
Slide 2 text
Kamusta! Ako diay si
Henry
#DevFest18
Slide 3
Slide 3 text
#DevFest18
Slide 4
Slide 4 text
#DevFest18
Slide 5
Slide 5 text
#DevFest18
#DevFest18
Slide 6
Slide 6 text
#DevFest18
#DevFest18
Slide 7
Slide 7 text
#DevFest18
#DevFest18
#1 Browser in
North Korea !
Slide 8
Slide 8 text
#DevFest18
Slide 9
Slide 9 text
#DevFest18
19 seconds
average mobile
web page load on 3G
Slide 10
Slide 10 text
#DevFest18
40%
of mobile connections
worldwide are 2G
Source: GSMA - The Mobile Economy 2018
Slide 11
Slide 11 text
#DevFest18
3 tips to build a better web
Slide 12
Slide 12 text
#DevFest18
1
2
3
Progressive Web Apps
Accessibility
User Experience
3 tips to build a better web
Slide 13
Slide 13 text
#DevFest18
Tips 1
Progressive
Web Apps
Slide 14
Slide 14 text
#DevFest18
#DevFest18
Electron
Slide 15
Slide 15 text
#DevFest18
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
#DevFest18
1
2
3
PWA
Accessibility
User Experience
Desktop
Progressive Web Apps
Slide 18
Slide 18 text
#DevFest18
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
#DevFest18
open.spotify.com/?pwa=1
Slide 21
Slide 21 text
#DevFest18
1
2
3
PWA
Accessibility
User Experience
Desktop PWA are supported
on the following platforms:
●Chrome OS (Chrome 67+)
●Linux (Chrome 70+)
●Windows (Chrome 70+)
Slide 22
Slide 22 text
#DevFest18
Slide 23
Slide 23 text
#DevFest18
1
2
3
PWA
Accessibility
User Experience
HTTPS
Slide 24
Slide 24 text
#DevFest18
1
2
3
PWA
Accessibility
User Experience
#DevFest18
Slide 25
Slide 25 text
#DevFest18
1
2
3
PWA
Accessibility
User Experience
Chrome 70+
Slide 26
Slide 26 text
#DevFest18 Source: https://twitter.com/jaffathecake/status/1044121129848377344
1
2
3
PWA
Accessibility
User Experience
Slide 27
Slide 27 text
#DevFest18
1
2
3
PWA
Accessibility
User Experience
PWACompat
Slide 28
Slide 28 text
#DevFest18
1
2
3
PWA
Accessibility
User Experience
PWACompat
The Web App Manifest for all browsers
Slide 29
Slide 29 text
#DevFest18
1
2
3
PWA
Accessibility
User Experience
Current problem:
Safari doesn't show splash screen for PWA
Slide 30
Slide 30 text
#DevFest18
1
2
3
PWA
Accessibility
User Experience
#DevFest18
1
2
3
PWA
Accessibility
User Experience
What else PWACompat can do?
- Create meta icon tags for all icons
- Create fallback meta tags for various browsers
- Sets the theme color based on the manifest
- And more …
Slide 33
Slide 33 text
#DevFest18
1
2
3
PWA
Accessibility
User Experience
Slide 34
Slide 34 text
#DevFest18
1
2
3
PWA
Accessibility
User Experience
Slide 35
Slide 35 text
#DevFest18
1
2
3
PWA
Accessibility
User Experience
#DevFest18
Slide 36
Slide 36 text
#DevFest18
1
2
3
PWA
Accessibility
User Experience
Slide 37
Slide 37 text
#DevFest18
Tips 2
Accessibility
Slide 38
Slide 38 text
#DevFest18
Slide 39
Slide 39 text
#DevFest18
visual
impairments
1
2
3
PWA
Accessibility
User Experience
Slide 40
Slide 40 text
#DevFest18
visual
impairments
1
2
3
PWA
Accessibility
User Experience
Slide 41
Slide 41 text
#DevFest18
Slide 42
Slide 42 text
#DevFest18
Slide 43
Slide 43 text
#DevFest18
Slide 44
Slide 44 text
#DevFest18
motor
impairments
#DevFest18
Slide 45
Slide 45 text
#DevFest18
#DevFest18
Let’s talk about hearing impairments,
Slide 46
Slide 46 text
#DevFest18
#DevFest18
our hearing tends to degrade with age.
Let’s talk about hearing impairments,
Slide 47
Slide 47 text
#DevFest18
#DevFest18
No hearing aids? No problem!
our hearing tends to degrade with age.
Let’s talk about hearing impairments,
Slide 48
Slide 48 text
#DevFest18
#DevFest18
cognitive
impairments
Slide 49
Slide 49 text
#DevFest18
#DevFest18
Slide 50
Slide 50 text
#DevFest18
1 PWA
Accessibility
User Experience
2
3
Slide 51
Slide 51 text
#DevFest18
1 PWA
Accessibility
User Experience
2
3
Slide 52
Slide 52 text
#DevFest18
1 PWA
Accessibility
User Experience
2
3
“The old Lighthouse logo is better than the current logo” - Henry
Slide 53
Slide 53 text
#DevFest18
1 PWA
Accessibility
User Experience
2
3
#DevFest18
Credential Management
API
1
2
3
PWA
Accessibility
User Experience
Slide 57
Slide 57 text
#DevFest18
1
2
3
PWA
Accessibility
User Experience
Slide 58
Slide 58 text
#DevFest18
1
2
3
PWA
Accessibility
User Experience
Chrome 70+
Slide 59
Slide 59 text
#DevFest18
Payment Request
API
1
2
3
PWA
Accessibility
User Experience
Slide 60
Slide 60 text
#DevFest18
1
2
3
PWA
Accessibility
User Experience
Slide 61
Slide 61 text
#DevFest18
Payment Request API are supported
on the following browsers:
● Edge
● Chrome
● Safari
● Opera
● Samsung Internet
1
2
3
PWA
Accessibility
User Experience
Slide 62
Slide 62 text
#DevFest18
Picture-in-Picture
1
2
3
PWA
Accessibility
User Experience