1 of 62

Integrated Experiences

Progressive Web App Roadshow

2 of 62

Presenters Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

3 of 62

Fast

Engaging

Reliable

Integrated

4 of 62

Fast

Engaging

Reliable

Integrated

5 of 62

Add to�Home Screen

6 of 62

80%

Source: comScore Custom Survey, U.S., Age 18+, 2017 Wave

intentionally moved apps to their home screen

7 of 62

Broken Experience

Required user interaction�Buried deep in menus

​

Where would it start?�Dependent on bookmark

​

Would it work offline?�Users didn't expect offline

8 of 62

Web App Manifest

<link rel="manifest" href="/manifest.json">

9 of 62

<link rel="manifest" href="/manifest.json">

{

"name": "CNET Tech Today",

"short_name": "Tech Today",

"icons": [{

"src": "icon-512x512.png",

"sizes": "512x512",

"type": "image/png"

}, {...}],

"start_url": "/index.html",

"display": "standalone",

"orientation": "portrait",

"background_color": "#FF0000",

"theme_color": "#FF0000"

}

10 of 62

Home Screen Name & Icons

{

"name": "CNET Tech Today",

"short_name": "Tech Today",

"icons": [{

"src": "icon-512x512.png",

"sizes": "512x512",

"type": "image/png"

}, {...}],

"start_url": "/index.html",

"display": "standalone",

"orientation": "portrait",

"background_color": "#FF0000",

"theme_color": "#FF0000"

}

11 of 62

Splash Screen

{

"name": "CNET Tech Today",

"short_name": "Tech Today",

"icons": [{

"src": "icon-512x512.png",

"sizes": "512x512",

"type": "image/png"

}, {...}],

"start_url": "/index.html",

"display": "standalone",

"orientation": "portrait",

"background_color": "#FF0000",

"theme_color": "#FF0000"

}

12 of 62

Start Up Options

{

"name": "CNET Tech Today",

"short_name": "Tech Today",

"icons": [{

"src": "icon-512x512.png",

"sizes": "512x512",

"type": "image/png"

}, {...}],

"start_url": "/index.html",

"display": "standalone",

"orientation": "portrait",

"background_color": "#FF0000",

"theme_color": "#FF0000"

}

13 of 62

Task Switcher Colors

{

"name": "CNET Tech Today",

"short_name": "Tech Today",

"icons": [{

"src": "icon-512x512.png",

"sizes": "512x512",

"type": "image/png"

}, {...}],

"start_url": "/index.html",

"display": "standalone",

"orientation": "portrait",

"background_color": "#FF0000",

"theme_color": "#FF0000"

}

14 of 62

Good, but what about

Prompt to Install?

15 of 62

Prompt to Install

16 of 62

Prompt to Install

  • Web App Manifest

17 of 62

Prompt to Install

  • Web App Manifest
  • Offline support�(with service worker)

18 of 62

Prompt to Install

  • Web App Manifest
  • Offline support�(with service worker)
  • Engaged User

19 of 62

Why are the requirements

so strict?

20 of 62

A Promise to the User

Fast

Engaging

Reliable

Integrated

21 of 62

Web Payments

22 of 62

66%

of purchases on mobile are on the web

23 of 62

66%

Fewer conversions on mobile websites

24 of 62

Checkout Forms Today

Manual

Tedious

Slow

n-Taps

25 of 62

Autofill

​

Fill web forms with a

single click

26 of 62

Tell the browser with

autocomplete attributes

27 of 62

30%

faster form completion with autocomplete

28 of 62

Autocomplete Attributes

<label for="frmNameCC">Name on card</label>

<input name="ccname" autocomplete="cc-name">

​

<label for="frmCCNum">Card Number</label>

<input name="cardnumber" autocomplete="cc-number">

​

<label for="frmCCCVC">CVC</label>

<input name="cvc" autocomplete="cc-csc">

​

<label for="frmCCExp">Expiry</label>

<input name="cc-exp" autocomplete="cc-exp">

29 of 62

https://goo.gl/5mLti2

30 of 62

Checkout Forms Today

Slow

n-Taps

Manual

Tedious

Automatic

Simple

31 of 62

Imagine a world�without forms...

32 of 62

PaymentRequest API

A new payments API

built for the web

33 of 62

34 of 62

PaymentRequest

  1. Create paymentRequest
  2. Request payment details
  3. Collect payment

35 of 62

PaymentRequest

  1. Create paymentRequest
  2. Request payment details
  3. Collect payment

36 of 62

PaymentRequest

  1. Create paymentRequest
  2. Request payment details
  3. Collect payment

37 of 62

PaymentRequest

  1. Create paymentRequest
  2. Request payment details
  3. Collect payment

38 of 62

PaymentRequest

  1. Create paymentRequest
  2. Request payment details
  3. Collect payment

39 of 62

PaymentRequest

  1. Create paymentRequest
  2. Request payment details
  3. Collect payment

40 of 62

PaymentRequest

  1. Create paymentRequest
  2. Request payment details
  3. Collect payment

41 of 62

PaymentRequest

  1. Create paymentRequest
  2. Request payment details
  3. Collect payment

42 of 62

Cross Browser

Cross Platform

Open Ecosystem

43 of 62

PaymentRequest is NOT

a new payment method

44 of 62

Slow

n-Taps

Automatic

Simple

Fast

1-tap

45 of 62

PaymentRequest

  1. Create paymentRequest
  2. Request payment details
  3. Collect payment

46 of 62

Create the PaymentRequest

let pr = new

PaymentRequest(paymentMethods, txInfo, options);

47 of 62

Payment Methods

let paymentMethods = [{

supportedMethods: ['basic-card'],

data: {

supportedNetworks: ['visa', 'mastercard', '...']

}

}, {

supportedMethods: ['https://android.pay/pay'],

data: {

merchantID: '12345'

...

}

}];

48 of 62

Transaction Details

let txInfo = {

total: {

label: 'Total',

amount: {currency: 'USD', value: '50.00'}

},

displayItems: [{

label: 'Subtotal',

amount: {currency: 'USD', value: '50.00'}

}]

};

49 of 62

Optional: Shipping Methods

txInfo.shippingOptions = [{

id: 'standard',

label: 'Standard shipping',

amount: {currency: 'USD', value: '10.00'},

selected: true

}, {

id: 'express',

label: 'Express shipping',

amount: {currency: 'USD', value: '20.00'}

}];

50 of 62

Optional: Extra Info

let options = {

requestShipping: true,

requestPayerEmail: true,

requestPayerPhone: true

requestPayerName: true,

shippingType: 'shipping'

}

51 of 62

PaymentRequest

  1. Create paymentRequest
  2. Request payment details
  3. Collect payment

52 of 62

Show the Payment Request Interface

pr.show().then(function(paymentResponse) {

// send paymentResponse to payment processor

return collectPayment(paymentResponse)

.then(res => {

paymentResponse.complete('success');

})

.catch(err => {

paymentResponse.complete('fail');

});

});

53 of 62

PaymentRequest

  1. Create paymentRequest
  2. Request payment details
  3. Collect payment

54 of 62

Get Payment Details

pr.show().then(function(paymentResponse) {

// send paymentResponse to payment processor

return collectPayment(paymentResponse)

.then(res => {

paymentResponse.complete('success');

})

.catch(err => {

paymentResponse.complete('fail');

});

});

55 of 62

PaymentResponse

{

"methodName": "basic-card",

"details": {

"cardholderName": "Larry Page",

"cardNumber": "4111111111111111",

"expiryMonth": "12",

"expiryYear": "2020",

"cardSecurityCode": "111",

"billingAddress": { ... }

},

"shippingAddress": { ... }

"shippingOption": "express",

"payerName": "Larry Page",

"payerPhone": "212-555-1212",

"payerEmail": "user@example.com"

}

56 of 62

Collect the Payment

pr.show().then(function(paymentResponse) {

// send paymentResponse to payment processor

return collectPayment(paymentResponse)

.then(res => {

paymentResponse.complete('success');

})

.catch(err => {

paymentResponse.complete('fail');

});

});

57 of 62

Show Completion UX

pr.show().then(function(paymentResponse) {

// send paymentResponse to payment processor

return processPayment(paymentResponse)

.then(res => {

paymentResponse.complete('success');

})

.catch(err => {

paymentResponse.complete('fail');

});

});

58 of 62

A W3C standard to eliminate forms for users and standardize payment collection for sites.

59 of 62

Enable autofill with

autocomplete attributes

+

Progressively enhance with PaymentRequest

60 of 62

More Integration Points

  • Media Session
  • Media Capture
  • Casting Support
  • Web Bluetooth
  • Web Share
  • Device Sensors

61 of 62

Resources

Add to Home Screen and the Web App Manifest�https://goo.gl/GHZXqb

Introduction to the PaymentRequest API�https://goo.gl/ZKupju

List of Auto-complete Attributes�https://goo.gl/5mLti2

62 of 62

Thank You!