Web dan Progressive Web Apps di 2020
0 likes276 views
Dokumen ini membahas tentang Progressive Web Apps (PWA) yang diperkenalkan oleh Google pada 2015, yang menawarkan kemudahan akses dan performa mirip aplikasi native. PWA memungkinkan aplikasi berjalan di berbagai perangkat, mudah disebarkan, dan selalu diperbarui secara otomatis. Juga dijelaskan tentang proyek Fugu yang berupaya mendekatkan pengembangan aplikasi web dengan aplikasi native.
![/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](https://image.slidesharecdn.com/webdanpwadi2020-201027030344/85/Web-dan-Progressive-Web-Apps-di-2020-46-320.jpg)
![/rizafahmi22/rizafahmi
let { code, type } = await navigator.credentials.get({
otp: {
transport: ['sms']
}
});
Web OTP API](https://image.slidesharecdn.com/webdanpwadi2020-201027030344/85/Web-dan-Progressive-Web-Apps-di-2020-61-320.jpg)
![/rizafahmi22/rizafahmi
const options = {
filters: [{ vendorId: 0x239a }]
};
const device = await
navigator.usb.requestDevice(options);
console.log(
device.productName,
device.manufacturerName
);
Web USB](https://image.slidesharecdn.com/webdanpwadi2020-201027030344/85/Web-dan-Progressive-Web-Apps-di-2020-62-320.jpg)
Web dan Progressive Web Apps di 2020
- 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?
- 21. /rizafahmi22/rizafahmi Akses ke Perangkat Keras Masih Terbatas
- 23. /rizafahmi22/rizafahmi Aplikasi Web kurang Memikat
- 24. /rizafahmi22/rizafahmi UX lebih keren di aplikasi mobile
- 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?
- 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.
- 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
- 41. /rizafahmi22/rizafahmi 93% dari pengguna internet saat ini dapat mengakses web
- 42. /rizafahmi22/rizafahmi 86% dari 93% tadi dapat melakukan instalasi PWA
- 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
- 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
- 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
- 55. /rizafahmi22/rizafahmi “Sebuah usaha untuk mendekatkan jurang pemisah antara platform web dengan dunia native.”
- 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." ); }
- 66. /rizafahmi22/rizafahmi Dukungan Untuk Bahasa Pemrograman
- 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!