- Membahas perkembangan web dan aplikasi web - Kelebihan dan kekurangan mengembangkan aplikasi untuk web platform - Tentang PWA - Komponen utama PWA - Masa depan platform web

1. /rizafahmi22/rizafahmi
Web dan PWA
Di 2020

2. /rizafahmi22/rizafahmi
Halo, saya Riza

3. /rizafahmi22/rizafahmi
Tentang Aplikasi Web

4. /rizafahmi22/rizafahmi

5. /rizafahmi22/rizafahmi

6. /rizafahmi22/rizafahmi
Berbagi Aplikasi Web

7. /rizafahmi22/rizafahmi

8. /rizafahmi22/rizafahmi
Berbagi Aplikasi Native

9. /rizafahmi22/rizafahmi

10. /rizafahmi22/rizafahmi

11. /rizafahmi22/rizafahmi

12. /rizafahmi22/rizafahmi

13. /rizafahmi22/rizafahmi

14. /rizafahmi22/rizafahmi

15. /rizafahmi22/rizafahmi

16. /rizafahmi22/rizafahmi
Tentang Aplikasi Web

17. /rizafahmi22/rizafahmi
Tentang Aplikasi Web
•Mengembangkan aplikasi web dan peluncuran
(deployment) sangat mudah!
•Lebih mudah disebarkan atau dibagikan
•Bisa diakses di laptop/pc, ponsel, dsb

18. /rizafahmi22/rizafahmi
Kenapa Web tidak belum menjadi
Prioritas Utama?

19. /rizafahmi22/rizafahmi
Aplikasi Web itu Lemot?

20. /rizafahmi22/rizafahmi

21. /rizafahmi22/rizafahmi
Akses ke Perangkat Keras Masih Terbatas

22. /rizafahmi22/rizafahmi
whatwebcando.today

23. /rizafahmi22/rizafahmi
Aplikasi Web kurang Memikat

24. /rizafahmi22/rizafahmi
UX lebih keren di aplikasi mobile

25. /rizafahmi22/rizafahmi

26. /rizafahmi22/rizafahmi
Kenapa Web belum menjadi Prioritas
Utama?

27. /rizafahmi22/rizafahmi
Kenapa Web Belum Menjadi Prioritas Utama?
• Aplikasi web cenderung lebih lambat?
• Akses ke perangkat keras terbatas?
• Kurang memikat?
• Aplikasi mobile memiliki UX yang lebih menarik?

28. /rizafahmi22/rizafahmi
Progressive Web Apps

29. /rizafahmi22/rizafahmi

30. /rizafahmi22/rizafahmi
Google Memperkenalkan Istilah PWA di 2015

31. /rizafahmi22/rizafahmi
“Build better experiences across
devices and contexts within a single
codebase.”
Alex Russell
Software Engineer, Google
Frances Berriman
Designer

32. /rizafahmi22/rizafahmi
Progressive Web Apps
Progresif
Dapat berjalan di berbagai device dan
fungsi bertambah secara progresif.
Performa Bagus
Secepat atau bahkan lebih cepat daripada
aplikasi native.
Mudah Dibagikan
Kemampuan untuk tetap mempertahankan
state ketika tautan dibagikan.
Responsif
Dapat dibuka di berbagai ukuran layar,
baik laptop/pc ataupun ponsel.
App-like
Mirip seperti aplikasi native. Menggunakan
arsitektur app shell, SPA, dl.
Connectivity-agnostic
Dapat berjalan dengan konektifitas yang
terbatas atau bahkan ketika tidak ada
koneksi sama sekali.

33. /rizafahmi22/rizafahmi
Progressive Web Apps
Installable
Dapat di-install di home screen
dan dapat langsung digunakan.
Selalu Update
Aplikasi selalu up to date ketika
terkoneksi ke internet.
Lebih Memikat
Memberikan pengalaman menarik dengan
fitur seperti push notification.
Mudah Ditemukan
Lebih mudah ditemukan dan mudah
dicari melalui mesin pencari.

34. /rizafahmi22/rizafahmi

35. /rizafahmi22/rizafahmi
Google
Memperkenalkan PWA
2015

36. /rizafahmi22/rizafahmi
Google
Memperkenalkan PWA
2015 2017
Android
First-class PWA experience

37. /rizafahmi22/rizafahmi
Google
Memperkenalkan PWA
2015 2017 2018
Android
First-class PWA experience
Microsoft
Dukungan penuh PWA di
Windows

38. /rizafahmi22/rizafahmi
Google
Memperkenalkan PWA
2015 2017 2018 Jan,
2019
Android
First-class PWA experience
Microsoft
Dukungan penuh PWA di
Windows
Microsoft
MS Office versi PWA

39. /rizafahmi22/rizafahmi
Google
Memperkenalkan PWA
2015 2017 2018 Jan,
2019
Mar,
2019
Android
First-class PWA experience
Microsoft
Dukungan penuh PWA di
Windows
Microsoft
MS Office versi PWA
Apple
Dukungan iOS 12.2 untuk
PWA
Android
Play store PWA via
Trusted Web Activity
Google
PWA dapat diinstalasi
dengan Chrome

40. /rizafahmi22/rizafahmi
PWA di 2020

41. /rizafahmi22/rizafahmi
93%
dari pengguna internet saat ini dapat
mengakses web

42. /rizafahmi22/rizafahmi
86%
dari 93% tadi dapat melakukan
instalasi PWA

43. /rizafahmi22/rizafahmi

44. /rizafahmi22/rizafahmi
Komponen PWA

45. /rizafahmi22/rizafahmi
Web App Manifest

46. /rizafahmi22/rizafahmi
{
"short_name": "Weather",
"name": "Weather: Do I need an umbrella?",
"description": "Weather forecast information",
"icons": [{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}],
"start_url": "/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6"
} manifest.json

47. /rizafahmi22/rizafahmi
Service Worker

48. /rizafahmi22/rizafahmi
if ('caches' in window) {
self.addEventListener('fetch', function (event) {
e.respondWith(
caches.match(event.request).then(function (response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
} service-worker.js

49. /rizafahmi22/rizafahmi
if ('caches' in window) {
self.addEventListener('fetch', function (event) {
e.respondWith(
caches.match(event.request).then(function (response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
} service-worker.js

50. /rizafahmi22/rizafahmi
if ('caches' in window) {
self.addEventListener('fetch', function (event) {
e.respondWith(
caches.match(event.request).then(function (response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
} service-worker.js

51. /rizafahmi22/rizafahmi
Trusted Web Activity

52. /rizafahmi22/rizafahmi
$ npm i -g @bubblewrapcli
$ bubblewrap init --manifest https://mytwa.com/manifest.json
$ bubblewrap build
$ adb install app-release-signed.apk

53. /rizafahmi22/rizafahmi
PWA dan Prekembangan Selanjutnya

54. /rizafahmi22/rizafahmi
Project Fugu

55. /rizafahmi22/rizafahmi
“Sebuah usaha untuk mendekatkan
jurang pemisah antara platform web
dengan dunia native.”

56. /rizafahmi22/rizafahmi
Native File API

57. Face Detection API
const fd = new window.FaceDetector();
const img = document.querySelector('img');
fd.detect(img).then(function(faces) {
faces.forEach(function(face) {
const { top, left, width, height } = face.boundingBox;
const div = document.createElement('div');
div.classList.add('face');
div.style.cssText = `
top: ${top}px;
left: ${left}px;
width: ${width}px;
height: ${height}px;
border: 0.25em solid yellow;
position: absolute;
`;
document.querySelector('body').appendChild(div);
})
});

58. Face Detection API
const fd = new window.FaceDetector();
const img = document.querySelector('img');
fd.detect(img).then(function(faces) {
faces.forEach(function(face) {
const { top, left, width, height } = face.boundingBox;
const div = document.createElement('div');
div.classList.add('face');
div.style.cssText = `
top: ${top}px;
left: ${left}px;
width: ${width}px;
height: ${height}px;
border: 0.25em solid yellow;
position: absolute;
`;
document.querySelector('body').appendChild(div);
})
});

59. Face Detection API
const fd = new window.FaceDetector();
const img = document.querySelector('img');
fd.detect(img).then(function(faces) {
faces.forEach(function(face) {
const { top, left, width, height } = face.boundingBox;
const div = document.createElement('div');
div.classList.add('face');
div.style.cssText = `
top: ${top}px;
left: ${left}px;
width: ${width}px;
height: ${height}px;
border: 0.25em solid yellow;
position: absolute;
`;
document.querySelector('body').appendChild(div);
})
});

60. const fd = new window.FaceDetector();
const img = document.querySelector('img');
fd.detect(img).then(function(faces) {
faces.forEach(function(face) {
const { top, left, width, height } = face.boundingBox;
const div = document.createElement('div');
div.classList.add('face');
div.style.cssText = `
top: ${top}px;
left: ${left}px;
width: ${width}px;
height: ${height}px;
border: 0.25em solid yellow;
position: absolute;
`;
document.querySelector('body').appendChild(div);
})
});
Face Detection API

61. /rizafahmi22/rizafahmi
let { code, type } = await navigator.credentials.get({
otp: {
transport: ['sms']
}
});
Web OTP API

62. /rizafahmi22/rizafahmi
const options = {
filters: [{ vendorId: 0x239a }]
};
const device = await
navigator.usb.requestDevice(options);
console.log(
device.productName,
device.manufacturerName
);
Web USB

63. /rizafahmi22/rizafahmi
Web Serial
if ('serial' in navigator) {
try {
const port = await
navigator.serial.requestPort();
await port.open({ baudrate: 9600 });
this.reader = port.readable.getReader();
this.writer = port.writable.getWriter();
} catch (err) {
console.error('There was an error opening
the serial port:', err);
}
} else {
console.error(
"The Web serial API doesn't seem to be en
abled in your browser."
);
}

64. /rizafahmi22/rizafahmi
https://goo.gle/fugu-api-tracker

65. /rizafahmi22/rizafahmi
WebAssembly

66. /rizafahmi22/rizafahmi
Dukungan Untuk Bahasa Pemrograman

67. /rizafahmi22/rizafahmi
https://earth.google.com/web/

68. /rizafahmi22/rizafahmi

69. /rizafahmi22/rizafahmi

70. /rizafahmi22/rizafahmi

71. /rizafahmi22/rizafahmi
Progressive Web Apps

72. /rizafahmi22/rizafahmi
Progressive Web Apps
• Sebuah movement untuk mendorong developer web membangun aplikasi
dengan lebih baik
• Hampir semua orang di dunia dapat mengakses aplikasi web
• Komponen utama PWA: manifest, worker dan TWA
• Project Fugu adalah sebuah upaya menutup jarak dengan pengembangan
aplikasi native
• Web dapat bekerja maksimal dengan bantuan WebAssembly

73. /rizafahmi22/rizafahmi
Mari jadikan platform Web kembali berjaya!

74. Terimakasih!
/rizafahmi22
/rizafahmi
/rizafahmi
/rizafahmi
/rizafahmi