Learn about the newest trends on the web platform, such as progressive web apps and the link

1. New trends on the Web Platform
Kenneth R. Christiansen

2. Hi! I am Kenneth

4. Our team mission
Move the Web Platform forward

5. Why the web matters

7. The web is awesome
Great reach, low friction
safe
ephemeral
(deep) linkable
indexable
composable

8. How did the Web beat native
applications on the desktop?
But you might ask yourself...

9. Distribution is
The Hardest Problem
In Software

10. But mobile is a different beast than the desktop
➫ Unreliable network
➫ Slower hardware
➫ Less screen real-estate
➫ Different input methods
➫ Different set of expectations

11. And for a long time...
Great sadness
Lots of dinosaurs, slowness, hard to re-engage with
users, hard to pay on mobile
...really a
second grade experience
Source: funnycatsite.com

12. Year 2010

13. Reliable, Fast & Engaging
But there is good news, because today the web can be

14. Year 2016 (6 years later)

15. The mobile landscape changed
a lot in recent years
But we need to keep in mind that

16. ➫ People don't proactively look for new apps to install
➫ On average, a user in the US installs 0 new apps per month
➫ People hate to get updates for apps they don't use
Mobile evolved

17. I don't want to download your app,
I just want to do stuff

19. With many devices around usapps don't scale well

20. Too many icons!
Lack of overview
Lots of updates pending for stuff I never use!

21. Too many icons!
➫ Lack of overview
➫ Updates pending for stuff I
never use!

22. Is there a better model?

23. We want low friction and engaging,
easy to use experiences

24. ➫ Low friction with a continuous focus on time to interactive
➫ Great performance with browser optimizations and good
developer primitives
➫ Reliability with new APIs allowing apps to work offline
➫ Easy distribution as you can link even to sub sites (say a
specific tweet on Twitter)
The web on mobile can offer

25. ➫ Engaging and allow to re-engage with users with push
messages or by placing an icon right on the user home
screen
➫ Ephemeral by only updating app resources when accessing
it and remove least used resources
The web on mobile can be

26. Low friction with a continuous focus on time to interactive
➫ Smart code splitting with ECMAScript modules and HTTP 2.0 Push
➫ Service Worker caching
➫ Google's PRPL (Push, Render, Pre-cache, Lazy-load) pattern
➫ Google Lighthouse and Microsoft Sonarwhal
The web evolved

27. Great performance with browser optimizations and good
developer primitives
➫ Lots of browser optimizations all over for touch/rendering etc
➫ CSS contain: strict to avoid doing unnecessary work
➫ Encapsulation and shareability with web components
➫ Classes and better language primitives with ES2015+
The web evolved

28. Reliability with new APIs allowing apps to work offline
➫ Service Workers supply a proxy between the browser and the server
➫ Allows for flexible, programmatically programming
➫ A separate process which only runs when needed
➫ Can run when browser is closed as a result of events
➫ A new primitive for the web (for push etc)
The web evolved

29. Easy distribution as you can link even to sub sites
➫ Apps and sites can be shared with just a link
➫ Deep-linking can be used to share a specific view in the app or state
○ For instance a deep link to a specific tweet on Twitter
○ Ie. https://twitter.com/IntelSoftware/status/930853470952759296
➫ Sites can still be distributed via stores, with proper infra or packaged
The web evolved

30. Engaging and allow to re-engage with users with push
messages or by placing an icon right on the user home screen
➫ Push messages (via Service Worker) allows sites to re-engage with users
➫ Web App Manifest, allows configuring an app-like experience
○ Show no chrome (standalone), lock to portrait, theme-color, start URL etc
○ Add to homescreen experience with icon and integration with host OS
The web evolved

31. Ephemeral by only updating app resources when accessing it
and remove least used resources
➫ Resources (Service Worker cache etc) are updated when site is visited
➫ Caches gets removed when out of space, least used first
➫ Permanent storage can be requested for apps added to homescreen
The web evolved

32. https://www.youtube.com/watch?v=Dsv5NT4PYG0

33. But that can't be web?!
No address bar - super fast - icon on homescreen

34. We call that experience
https://developers.google.com/web/progressive-web-apps/

36. Great for one-time use
The low friction of the web

37. Always handy if I want it to be
Add to homescreen

38. No clutter
Looks and acts like an app

39. As you interact with a PWA experience, gradually you become
more engaged
➫ PWAs are web sites that progressively becomes more app-like
➫ If you use on a regular basis, you might want app on your homescreen
➫ A browser engagement threshold allows sites prompting to install after a while
➫ No door slammers, no prompt for things you seldom use
➫ User always in control
➫ When launched from homescreen, it can act more like a real app
Progressive Web Apps

40. Great success stories so far!

43. 76% increase in conversions
+14% iOS
+30% Android
monthly active users

44. 26%increase in average spend
per visit by members arriving
via a push notification
72%increase in time spent for users
visiting via a push notification
+50%repeat visits within 3 months

45. And many, many more...
Checkout https://www.pwastats.com/ and https://developers.google.com/web/showcase/
for more statistics and success stories

46. Size of Twitter Clients
214 MB
24 MB
600 KB

47. Twitter NativeTwitter Lite

48. Mini dive!

49. Service Worker 101

50. Service Worker 101

51. Fast with Service Worker, serve from cache

52. Service Workers work on second load
➫ Progressive enhancement
➫ Site much work without
➫ Provides an update mechanism

53. Service Workers are flexible!
➫ They are a specialized web worker
➫ Programmable!
➫ Choose your own caching mechanism
➫ Even different one depending on URL!

54. Cache, Falling Back to Network
Page
Service Worker
Network
Cache

55. Network, Falling Back to Cache
Page
Service Worker Network
Cache

56. Cache, then Network
Page
Service Worker Network
Cache

57. Generic Fallback
Page
Service Worker Network
Cache

58. Service Workers are much more
Background sync
Push messages
…
See separate SSG Learning session about
Progressive Web Apps and Service Workers

59. Web App Manifest 101

60. The easiest part of PWAs
Add a manifest file
{
"short_name": "Flipkart",
"name": "Flipkart Lite",
"start_url": "/?start_url=homescreenicon",
"display": "standalone",
"orientation": "portrait",
"icons": [{
"src": "icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
}]
}

61. Add to homescreen
Discovery is easy on the web
Remembering URLs isn't

62. Add to homescreen
Can prompt users to install
Requires* some engagement
*Requirements may change over time

63. Web APK improved experience
➫ Accessible in launcher
➫ Launchable from other apps
➫ Better Android integration

64. Push notifications
System level notifications,
like apps
Ask to notify users with
specific information
Can send notifications even
when page closed

65. How to evaluate?
How to know how I am performing with my PWA'ness

66. Lighthouse
Guiding you on the path towards
progressive web app-iness.
goo.gl/zzopnG

68. Sonarwhal
Linting tool for the web, built by Microsoft
https://sonarwhal.com/
https://sonarwhal.com/docs/user-guide/rules/#pwas

69. Browser support?
Is this all Chrome and mobile only?

70. Google is a big supporter
➫ Very good support on Android
➫ Working on desktop + Chrome OS support
➫ Working on extending standards and matching Electron
features on desktop

71. PWAs on Android
➫ Requires HTTPS, Offline experience, manifest
➫ Engagement criteria
➫ Add to homescreen dialog
➫ Installs generated Web APK from Google server

72. PWAs in the Play Store?
➫ Not directly supported
➫ New Trusted Web Activity
○ Abide to Play store rules (payment etc)
○ Needs a file on server linking to app to show relationship
○ Runs in Chrome (not WebView) like Custom Tabs
○ Can be extended in Java with a onmessage/postmessage API

73. Early preview of desktop support

74. ServiceWorker
Cache API
Push API
Manifest
Microsoft is all-in on PWAs

75. Microsoft PWA support is strategic
➫ Deeply integrated into Windows
➫ Web Assembly allows native code to run at near native
speed on the web
➫ PWAs in store have access to all WinRT APIs
○ Polyfills will be available for some not-implemented APIs like Web
Bluetooth

76. PWAs in the Microsoft Store

77. PWAs in the Microsoft Store

78. What about
Apple?

79. ServiceWorker
Cache API
Push API
Manifest
Apple very recently started on PWA support

80. Related APIs
Making those PWAs even more native like with new powerful features

81. Server
Request index.html
Receive index.html
Request style.css
Receive style.css
Server
Request index.html
Receive index.html
Receive style.css
Receive app.js
HTTP 2.0 Push
HTTP 1.x HTTP 2.0
➫ Server Push lets the server bundle and send assets alongside a request
➫ This allows the server to do on-demand code splitting/bundling with ES modules
➫ Can reduce load times
➫ Less need to inline CSS, JS…
➫ Better caching in the browser
➫ Pillarstone in PRPL (Push critical resources, Render, Pre-cache, Lazy-load) pattern
1
2
3
4
1
2
BrowserBrowser

82. Seamless Sign-In
New Credential management API* for
seamless sign-in
AliExpress:
- 85% sign-in failure
+ 11% conversion
Pinterest:
+ 10% increase in desktop logins
*https://developers.google.com/web/updates/2016/04/credential-management-api
"Polyfill" depending on Google accounts: https://developers.google.com/identity/

83. Surfing random sites will stay safe
➫ Two new standards: Web Bluetooth and Web USB
➫ Only available from sites served over HTTPS
➫ Only accessible from top frame
➫ User gesture required to actually request and connect to a device
➫ Avoids fingerprinting: Device is selected by user, only that device is exposed
to the particular site
Security focused device access via Bluetooth and USB

84. Web Bluetooth
➫ Bluetooth 4+ (Low Energy) GATT
○ Easy to use, modern web API
○ Uses promises and typed arrays
(ie. Uint8Array etc)
➫ No Classic mode, only Low Energy protocol
➫ Only Central, eg. can connect to peripheral, but
not act like peripherals

85. Web Bluetooth

86. Puck.js
➫ Program Espruino devices in
JavaScript
➫ Web based IDE running in the
browser
➫ Uses Web Bluetooth for
communication

87. Web USB
➫ Securely access USB devices
connected to your computer
➫ Allows creating devices without the
need of expensive native drivers/sdk
➫ Web first experience possible
Polyfill will be available for
PWAs in the Microsoft Store

88. Medical CPR manikin connected via Web USB

89. https://medium.com/@kennethrohde/program-a-smart-device-directly-no-install-needed-cd8b29320d76#.nla4jzls9
https://www.youtube.com/watch?v=o7wGt9RfHVA
Web USB

90. Zephyr.JS
➫ Program Zephyr RTOS
devices in JavaScript
➫ Web based IDE running in the
browser
➫ Uses Web USB for
communication
➫ Created at Intel Open Source
Technology Center

91. Web Payments
➫ Making paying easy on the mobile
web, avoiding long form checkouts
➫ Use payment methods stored on
your Apple/Android/Samsung Pay
or in your browser
➫ Merchant doesn’t have access to
your payment details

92. Web VR
➫ Bringing Virtual Reality to the Web
➫ Easy to use API to access hardware
capabilities
○ Use WebGL (2) for rendering
○ GamePad support
➫ Progressive enhancement: works
without VR gear

93. Web Assembly
➫ Compile target for lang's used in native apps: C/
C++ / Rust
➫ Kind of an efficient, low-level bytecode for the web
➫ Small, fast to load and efficient to execute
➫ Bring existing libraries and code to the web
➫ Great for high-end games, CAD and professional
video editors
➫ Fast, portable and secure
https://medium.com/google-earth/earth-on-web-the-road-to-
cross-browser-7338e0f46278

94. Some important
improvements in
JavaScript

95. Classes
class Animal {
constructor(name) {
this.name = name;
}
static eat() {
return this;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
// Create an instance of Animal
let obj = new Animal();
obj.speak(); // Animal {}
➫ Built on JavaScript's existing
prototype-based inheritance
➫ Support short names
➫ Two inheritance trees (one for
regular and one for static
methods)
➫ Define and support inheritance
with extends keyword

96. Arrow function
function funcName(params) {
return params + 2;
}
funcName(2);
// 4
const funcName = (params) => params + 2
funcName(2);
// 4
➫ More concise syntax
➫ No need to re-bind <this>
function Person(){
this.age = 0;
setInterval(() => {
// |this| refers to the person object
this.age++;
}, 1000);
}
function Person() {
var that = this;
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}

97. ES Modules
export function sayName(name) {
console.log(`Hello ${name}`);
}
➫ Separate code into modules
➫ Import and export symbols
➫ Support for sync and async loading
➫ Improves code organization
➫ Great for external dependencies
mymodule.js
import { sayName } from './mymodule.js';
sayName('Sam');
// Hello Sam
app.js

98. Thank you