Upload
robert-nyman
View
6.479
Download
1
Embed Size (px)
Citation preview
Confidential & Proprietary
9 million people
If I lived in South Korea, I would:
- Be 60.49% less likely to be unemployed - Spend 67.99% less money on health care - Use 34.47% less electricity - Be 11.11% less likely to be murdered
50 million people
If you lived in Sweden, you would:
- Have 28.87% more free time - Make 23.19% more money - Consume 30.7% less oil - Live 2.09 years longer
South Korea - Sweden
XMLHTTP
web.archive.org/web/20070623125327/http://www.alexhopmann.com/xmlhttp.htm
19911993
19961997
2004 2007 20142005 2008
A brief history lesson 2016
Mobile hits town with the iPhone
19911993
19961997
2004 2007 20142005 2008
A brief history lesson 2016
Confidential & ProprietaryReducing friction
Every Step Costs You 20% of Users
- Gabor Cselle
Confidential & Proprietary
Impact of speed on bounce rates
Source: SOASTA; September, 2015
2.4 2.7 3.0 3.3 3.6 3.9 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9
180,000
140,000
100,000
60,000
0
20,000
58
45
32
19
0
6
Sess
ions
Load time (in seconds)
Boun
ce ra
te (%
)
Sessions Bounce rate
13%bounce
rate
20%bounce
rate
58%bounce
rate
Performance
Confidential & Proprietary
RAIL: Instant loading and smooth navigation
For first visitors, load pages in <10s on 3G net
Aspirational goal: <3s to first paint
For repeat visitors, loading of page in <500 ms Always scrolling at 60 frames/second Content shouldn’t jump as images are loaded
Performance
Confidential & Proprietary
Build instantly engaging sites and apps without the need for a
mandatory app download
SLICE
Confidential & Proprietary
Performance Offline access Periodic background processing Notifications Sensors OS-specific features
From Brett Cannon
Why do developers need a native app?
Confidential & Proprietary
Performance Offline access Periodic background processing Notifications Sensors OS-specific features
Why do developers need a native app?
Confidential & Proprietary
Reliable: Fast loading, works on flaky networksFast: Smooth animation, scrolling and navEngaging and integrated
On the home screen, no URL bar, icons, splash Re-engaging with push notifications
Consistent experience across browsers(still in progress, though)
The Progressive Web App Experience
Progressive Web Apps
Confidential & Proprietary
Client-side proxy in JavaScript
Net requests, but also push & sync
Service Workers
Progressive Web Apps
Confidential & Proprietary
Web App Manifests
Progressive Web Apps
<meta name="theme-color" content="#303F9F"><link rel="manifest" href="manifest.json">
Confidential & Proprietary
Web App Manifests
Progressive Web Apps
{ "short_name": "Air Horner", "name": "Air Horner", "start_url": "/", "display": "standalone", "orientation": "portrait", "icons": [{ "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" }]}
Confidential & Proprietary
Add to Homescreen and launch in full-screen mode
User who visits 2x in a given time period will be prompted with “add to homescreen”
One tap to add to homescreen
Opens full screen (no URL bar)
Progressive Web Apps
Confidential & Proprietary
Web push notifications
System level notifications, like apps
Ask to notify users with specific information
Can send notifications even when page closed
Progressive Web Apps
Confidential & Proprietary
Progressive Web App technologies
Required Recommended Features
Service Worker Push notifications
Web App Manifest App shell caching
Splash screen
Advanced Offline Support
Smooth navigation
“Progressive enhancement” with cross browser support
Progressive Web Apps
Confidential & Proprietary
PWAs can work across browsers
PWAs should work across all modern browsers
Service Worker available in Chrome, Opera, and Firefox; “High priority roadmap” for Microsoft Edge, Safari and UC Web exploring
7
Progressive Web Apps
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Do you know if any ISP’s or other services are injecting Ads or anything else in to your site? Paul Kinlan | bit.ly/content-injection
“”
Source: https://paul.kinlan.me/detecting-injected-content/Security - HTTPS
Features
Service workers ● Offline ● Push ● Background Sync ● ....???
Source: https://paul.kinlan.me/detecting-injected-content/Security - HTTPS
Features
Add to homescreen HTTP2 Brotli getUserMedia() Geolocation
Source: https://paul.kinlan.me/detecting-injected-content/Security - HTTPS
More Info
Security Docs
bit.ly/security-docs
HTTPS: The Green Lock and Beyond
bit.ly/green-lock-beyond
Adding HTTPS to your web site
Confidential & Proprietary
Flipkart: Early results
App
3x time spent on site, from 1 minute to 3.5 minutes
Seeing 40% visitors return week over week
Users love smooth experience on 2G & flaky networks
Use cases
Confidential & Proprietary
GitHub contributions to open source projects
StackOverflow reputation
Conference Speaker
Event Organizer
Well versed in the fundamentals of Web Development
Familiarity with new standards as they’re coming into web browsers