Baparekraf Developer Day 2020-Web Track

1. Introduction to Trusted
Web Activities
Nasrul Gunawan
(Software Engineer-Nutrifood Indonesia)

3. Source: https://web.dev/what-are-pwas/

4. Progressive Web App
Memberikan pengalaman seperti aplikasi native di web

6. PWA Success Story
Source: https://www.pwastats.com

7. Web Android

8. Cara yang bisa digunakan untuk mengintegrasikan
content di dalam aplikasi Android.
WebView Custom Tab
Source: Google Chrome Developers

9. WebView
Kelebihan
● Mendukung full-screen
● Memungkinkan menggabungkan web
dan komponen native.
Kekurangan
● Tidak menyediakan akses lengkap ke
fitur platform web modern
● Tidak bisa sharing cookies, storage,
dan sharing saved password.
Source: Google Chrome Developers

10. Custom Tab
Kelebihan
● Mendukung full-screen.
● Bisa sharing cookies, storage, dan
sharing saved password.
● Selalu up-to-date
Keterbatasan
● Terdapat URL bar di bagian atas
halaman.
Source: Google Chrome Developers

11. Trusted Web Activity

12. Apa itu Trusted Web
Activity?
Trusted Web Activity adalah cara baru
untuk mengintegrasikan konten aplikasi
web seperti Progressive Web App (PWA)
di dalam aplikasi Android menggunakan
protokol yang didasarkan pada Custom
Tab.
https://web.dev/oyo-lite-twa/

13. Kelebihan
● Mendukung Full Screen
● Dapat mengakses semua fitur web
● Selalu up-to-date
● Bisa sharing cookies, storage dan
saved password.
● Mudah diimplementasikan
Keterbatasan
● Tidak bisa dikombinasikan dengan
component aplikasi native
Trusted
Web
Activity

14. Support on
of Android Devices
95%
Source: https://youtu.be/6lHBw3F4cWs

15. Kriteria Trusted Web Activity
● Harus mengikuti panduan dan peraturan dari
Google Play Store.
● Memenuhi kriteria PWA Installability checks
● Skor performa Lighthouse harus 80 atau
lebih tinggi

16. Lighthouse is an open-source, automated
tool for auditing performance & progressive
web apps and is useful both as a benchmark
and to help you build better websites.
Lighthouse

17. Kenapa memilih TWA daripada aplikasi
native?
● Dapat diperbarui dengan cepat.
● Memiliki semua fungsi yang diharapkan dari aplikasi native.
● Menawarkan performa yang lebih baik.
● Selalu memiliki APIs dan fitur terbaru.
● Menggunakan lebih sedikit storage dibandingkan full aplikasi native.

18. Belum terverifikasi Terverifikasi

19. Yuk Praktik!

24. Referensi
● https://developers.google.com/web/android/trusted-web-activity
● https://developers.google.com/web/android/trusted-web-activity/quick-start
● https://youtu.be/7JDFjeMvxos
● https://youtu.be/6lHBw3F4cWs
● https://youtu.be/V7YX4cZ_Cto
● https://dev.to/henrylim96/adding-splash-screen-to-trusted-web-activity-48p3
● https://web.dev/progressive-web-apps/
● https://medium.com/oyotech/a-complete-guide-to-trusted-web-activity-twa-oyo-case-study-3
dd327d7afc5
● https://blog.chromium.org/2019/02/introducing-trusted-web-activity-for.html
https://web.dev/lighthouse-whats-new-6.0/

25. Nasrul Gunawan
search.nasrul@gmail.com
IG: nasrul.gunawan