I/O Extended 2019 WebTech - New capabilities for the web

1. 장 한보람
Organizer, @GDG Korea WebTech
Front-End Engineer, @Peer
New Capabilities for the Web

2. 장 한보람
Organizer, @GDG Korea WebTech
Front-End Engineer, @Peer
새로운 웹의 기능 - 웹의 확장성

3. •GDG Korea WebTech Organizer
•Front-End Engineer @Peer

4. 📱 What is App Gap

5. 📱 What is App Gap
🐡 Introduce Project Fugu

6. 📱 What is App Gap
🐡 Introduce Project Fugu
⚡ New Capabilities
- Use Case
- How it works

7. What is App Gap
📱

8. 현재 지구에 사는 사람들의 수
7,714,406,567
2019.07.07 11:00:00 pm
🌐👥

9. 인터넷 사용 인구는 ?

10. 4B 50%

11. 하얀 천이랑
바람만 있으면
어디든 갈 수 있어.
하얀 천
바람

12. 브라우저랑
인터넷만 있으면
무엇이든 할 수 있어.
브라우저
인터넷

13. VS
App
Web
Native
App
Gap

14. Introduce Project Fugu
🐡

15. Project fugu

16. Project fugu
- Project Fugu
“ Web can do everything ”

22. New Capabilities
⚡

23. Sharing Content
and
Receiving Shares

24. Web Share API
- https
- 사용자의 액션 필요
예) Click

25. if ('share' in navigator) {
const shareOpts = {
title: 'Unlocking New Capabilities for the Web',
text: 'One of the most exciting talks at I/O',
url: 'https: // www.google.com',
}
navigator.share(shareOpts)
.then(() => { ...})
.catch((e) => { ...})
}

26. if ('share' in navigator) {
const shareOpts = {
title: 'Unlocking New Capabilities for the Web',
text: 'One of the most exciting talks at I/O',
url: 'https: // www.google.com',
}
navigator.share(shareOpts)
.then(() => { ...})
.catch((e) => { ...})
}

27. if ('share' in navigator) {
const shareOpts = {
title: 'Unlocking New Capabilities for the Web',
text: 'One of the most exciting talks at I/O',
url: 'https: // www.google.com',
}
navigator.share(shareOpts)
.then(() => { ...})
.catch((e) => { ...})
}

28. if ('share' in navigator) {
const shareOpts = {
files: [ ...]
};
navigator.share(shareOpts)
.then(() => { ...})
.catch((e) => { ...})
}

29. 🥺

30. Sharing sheet
/ Share picker
Web Share Target API

31. "share_target": {
"action": "/share-target/",
"method": "GET",
"enctype" : "application/x- www-form-urlencoded",
"parmas": {
"title": "title",
"text": "text",
"url": "url"
}
}

32. "share_target": {
"action": "/share-target/",
"method": "GET",
"enctype" : "application/x- www-form-urlencoded",
"parmas": {
"title": "title",
"text": "text",
"url": "url"
}
}

33. Web Share and
Web Share Target
Shipped

34. Web Share
Target v2
In Development

35. Media Session API◀

36. if ('mediaSession' in navigator) {
navigator.mediaSession.metadata
= new MediaMetadata({
title: ‘Never Gonna Give Up',
artist: ‘Rick Astley',
album: ‘Whenever You Need Somebo…',
artwork: [
{ src: 'https: //dummyimage.com/96x96', sizes:
'96x96', type: 'image/png' },
{…},
{ src: 'https: //dummyimage.com/512x512', sizes:
'512x512', type: 'image/png' },
]
});
}

37. navigator.mediaSession.setActionHandler('previoustrack', () => {
// User hit "Previous Track" key.
});
navigator.mediaSession.setActionHandler('nexttrack', () => {
// User hit "Next Track" key.
});
navigator.mediaSession.setActionHandler('play', () => {
// User hit "Play" key.
});
navigator.mediaSession.setActionHandler('pause', () => {
// User hit "Pause" key.
});

38. Media Session API
Shipped
◀

39. Detecting
Barcodes and
Faces
👪

40. Shape Detection API
Type
1.Face Detector
2.Barcode Detector
3.Text Detector

42. if ('FaceDetector' in window) {
const faces = await new FaceDetector().detect(img);
} else {
// Use fallback
}
if ('BarcodeDetector' in window) {
const codes = await new BarcodeDetector().detect(img);
} else {
// Use fallback
}

43. Perception Toolkit

44. Perception Toolkit
1. Sensing
2. Meaning
3. UX

45. Perception Toolkit
npm install perception-toolkit

46. <script type="application/ld+json">
{
"arTarget": {
"@type": "Barcode",
"text": "Some value"
},
"arContent": {
"@type": "WebPage",
"url": "http: //example.com",
"name": "Result name",
"description": "Result description",
"image": "http: //exmaple.com/result.jpg"
}
}
</script>

47. <script type="application/ld+json">
{
"arTarget": {
"@type": "Barcode",
"text": "Some value"
},
"arContent": {
"@type": "WebPage",
"url": "http: //example.com",
"name": "Result name",
"description": "Result description",
"image": "http: //exmaple.com/result.jpg"
}
}
</script>

48. window.PerceptionToolkit = window.PerceptionToolkit || {};
window.PerceptionToolkit.config = {
// Where the toolkit is installed.
root: '/node_modules/perception-toolkit',
//The element to use to launch.
button: document.getElementById('get-started'),
//The container for generated cards.
cardContainer,
}

49. <!-- Toolkit CSS -->
<link rel="stylesheet" href="/path/to/the/toolkit.css">
<!-- Toolkit JS -->
<script src="/path/to/the/toolkit.js"> </script>

50. System Wake
Lock and
Screen Wake Lock
In Development
💻🔒

51. Keeping an App Alive
💻🔒

52. Type A.
System Wake
Lock⚙🔒

53. Type B.
Screen Wake
Lock📱🔒

54. // Getting a "screen" wake lock
let wakeLock = await navigator.getWakeLock('screen');
// Listening for active changes
wakeLock.addEventListener('activeChange', (e) -> {
console.log(e.target);
})
// Requesting the wake lock to become active
let wakeLockRequest = wakeLock.createRequest();
// Canceling the wake lock after 1min
setTimeout(() => {
wakeLockRequest.cancel();
wakeLockRequest = null;
}, 60 * 1000 );

55. // Getting a "screen" wake lock
let wakeLock = await navigator.getWakeLock('screen');
// Listening for active changes
wakeLock.addEventListener('activeChange', (e) -> {
console.log(e.target);
})
// Requesting the wake lock to become active
let wakeLockRequest = wakeLock.createRequest();
// Canceling the wake lock after 1min
setTimeout(() => {
wakeLockRequest.cancel();
wakeLockRequest = null;
}, 60 * 1000 );

56. // Getting a "screen" wake lock
let wakeLock = await navigator.getWakeLock('screen');
// Listening for active changes
wakeLock.addEventListener('activeChange', (e) -> {
console.log(e.target);
})
// Requesting the wake lock to become active
let wakeLockRequest = wakeLock.createRequest();
// Canceling the wake lock after 1min
setTimeout(() => {
wakeLockRequest.cancel();
wakeLockRequest = null;
}, 60 * 1000 );

57. // Getting a "screen" wake lock
let wakeLock = await navigator.getWakeLock('screen');
// Listening for active changes
wakeLock.addEventListener('activeChange', (e) -> {
console.log(e.target);
})
// Requesting the wake lock to become active
let wakeLockRequest = wakeLock.createRequest();
// Canceling the wake lock after 1min
setTimeout(() => {
wakeLockRequest.cancel();
wakeLockRequest = null;
}, 60 * 1000 );

58. System Wake
Lock and
Screen Wake Lock
In Development
💻🔒

59. NEW
Badge API

60. NEW
Do it self- Demo

61. Demo -1
https://airhorner.com/ 에서 앱을 다운로드 합니다

62. Demo -2
해당 기능의 flag를 enabled 상태로 바꿔줍니다.
* 설정을 변경한 후, 브라우저를 껐다가 다시 켭니다.

63. let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
ExperimentalBadge.set( ++hornCounter);
});
Demo -3
설치된 air horner를 실행하고,
console창에 다음 코드를 붙여넣습니다.

64. Demo -?
어떤 결과가 나올까요?

65. Demo -4
air horner를 신나게 클릭한 후,
실행할 때 눌렀던 아이콘이 어떻게 변했는지 확인합니다.
기대한 결과와 일치하나요?

66. Reference
- Unlocking New Capabilities for the Web(Google I/O ’19)
https://youtu.be/GSiUzuB-PoI
- Introduction to the Web Perception Toolkit
https://youtu.be/uj3oMwF2XIk
hdps://developers.google.com/web/updates/capabilities
hdps://codelabs.developers.google.com/codelabs/web-capabilities/#0

67. 마무리 끝.