Deskripsi

Buatlah website yang canggih dan modern dengan menerapkan Progressive Web Apps. Materi disusun oleh Dicoding dan Codepolitan sebagai partner dalam pengembangan akademi.

Membangun Progressive Web Apps (PWA) memiliki manfaat yang luar biasa, website Anda dapat diinstal pada mobile devices dan dijalankan secara offline. Selain itu, ServiceWorker sebagai salah satu komponen PWA dapat membantu meringankan traffic transaksi hingga 84% pada website Anda. Dengan menerapkan PWA, website Anda dapat menggunakan fitur push notification yang dapat menarik konsumen untuk kembali mengunjungi website Anda. Penerapan PWA sudah terbukti membantu AliExpress, bagian dari Alibaba Group, dalam meningkatkan konversi untuk pengguna baru di semua browser sebesar 104% dan di iOS sebesar 82%.

Kelas ini membahas tuntas mengenai komponen yang dibutuhkan untuk menerapkan Progressive Web Apps seperti App Shell, Service Worker, Web Push, dan Web Apps Manifest. Disusun dan diverifikasi oleh Codepolitan sebagai partner kami dalam mengembangkan akademi, materi yang disajikan terstruktur dan komprehensif.

Kenapa saya harus belajar kelas ini?

• Website yang dibangun dengan PWA memiliki sifat aplikasi native, sehingga Anda tidak perlu menyiapkan biaya lebih untuk membuat aplikasi native.
• PWA dapat berfungsi secara offline, sehingga pengguna dapat menggunakan website walaupun tanpa koneksi internet.
• PWA dapat mempercepat proses pemuatan website dan mengurangi beban server.
• PWA sudah banyak diterapkan oleh industri contohnya Twitter, Facebook, Bukalapak, Tokopedia, dsb. Ia terbukti dapat meningkatkan performa web terutama ketika diakses melalui perangkat mobile devices.
• PWA menggunakan pendekatan mobile-first, ini berarti website yang dikembangkan dengan PWA akan berfungsi pada mobile devices tanpa masalah.

Materi apa saja yang akan dipelajari?

• Promises and Fetch : API modern yang dapat kita gunakan untuk menulis blok kode dengan lebih mudah dan intuitif.
• Service Worker : JavaScript yang dijalankan oleh browser di background, yang terpisah dengan kode lain di halaman web browser. Dengan menggunakan service worker, kita dapat memanfaatkan resource yang telah disimpan di dalam cache untuk ditampilkan kembali bahkan dalam mode jaringan offline.
• Application Shell : Kerangka antarmuka aplikasi yang dibangun oleh beberapa komponen halaman dan aset lainnya. Ia disimpan lebih dahulu di dalam cache sehingga dapat tampil secara instan saat aplikasi dibuka.
• Cache API : Cache terpisah dari cache biasa yang dikelola oleh browser. Cache jenis inilah yang dapat digunakan untuk menyimpan resource dan digunakan kembali bahkan dalam mode jaringan offline melalui service worker.
• Indexed DB : Sistem penyimpanan lokal berbasis NoSQL di browser. Kita dapat menyimpan data apa pun di browser pengguna untuk keperluan aplikasi. Anda dapat melakukan aksi pencarian, pembaharuan dan penghapusan data.
• Web Push : API yang dapat menerima pesan pemberitahuan dari server di background. Web Push dapat dikombinasikan dengan sistem notifikasi yaitu pesan pop-up yang muncul di perangkat pengguna. Aplikasi PWA dapat menerima event push dan menampilkan pesan pop-up meskipun pengguna sedang tidak membuka aplikasi tersebut.
• Workbox : Koleksi library dan tool yang dapat kita gunakan untuk menghasilkan berkas service worker, precaching, routing dan runtime-caching. Workbox memudahkan kita dalam menulis kode PWA dengan sintaks yang lebih sederhana dan mudah dikelola.
• Submission : Membuat aplikasi informasi sepak bola berbasis web dengan menerapkan sifat PWA seperti apps shell, offline capability, push notification, dan installable web apps.

Anda tentukan sendiri berapa lama waktu belajar materi kelas ini. Materi kelas didesain untuk diselesaikan dalam waktu 70 jam. Jika Anda meluangkan waktu sedikitnya 10 jam saja dalam seminggu, maka sangat dimungkinkan Anda bisa menuntaskan kelas ini dalam waktu 50 hari. Namun tidak menutup kemungkinan Anda menyelesaikan dalam waktu yang jauh lebih cepat.

Prasyarat mengikuti kelas ini adalah:

• Memahami dasar HTML, CSS dan JavaScript. Untuk memahami ketiga pilar pengetahuan tersebut, Anda dapat mengikuti kelas Belajar Dasar Pemrograman Web terlebih dahulu.
• Anda diharapkan sudah menyelesaikan kelas Belajar Fundamental Front-End Web Development.
• Anda harus mandiri, berkomitmen, benar-benar punya rasa ingin tahu dan tertarik pada subjek.
• Anda harus gigih, temukan topik yang menarik, bermain-main dan mengotak-atik ilmu yang Anda dapatkan. 
• Sebaik apa pun materi struktur kelas ini, tak akan berguna tanpa keseriusan Anda untuk belajar, berlatih, dan mencoba. 

Spesifikasi minimal Komputer/Laptop:

• Resolusi layar 1366 x 768 (Rekomendasi Full HD 1920 x 1080).
• Prosesor Intel Celeron (Rekomendasi Core i3 ke atas).
• RAM 1GB (Rekomendasi 2GB).
• Sistem operasi Windows, Linux, atau MacOS.

Tools yang digunakan:

• Teks Editor (VSCode, Atom, atau Teks Editor lainnya).
• Google Chrome Web Browser.
• Web Server for Chrome.