Membangun Progressive Web Apps
4.92

Membangun Progressive Web Apps

Teknologi:

Web
Level: Menengah - Mahir
Level: Menengah - Mahir 70 Jam Belajar
6.831

Siswa Terdaftar

Pelajari strategi single page application, offline caching, dan push notification agar web Anda memiliki fungsi layaknya aplikasi native.

Kelas sudah tidak aktif


Informasi kelas Lihat silabus
Apa yang akan Anda dapatkan

Modul Tutorial

Materi bacaan elektronik disajikan dengan bahasa yang mudah dipahami.

Forum Diskusi

Diskusikan materi belajar dengan siswa lainnya.
Level Menengah
Memahami konsep dasar secara mendalam dan luas. Di sejumlah kelas mempelajari teknik khusus untuk pemahaman praktis.
Level Mahir
Menguasai materi dan latihan tingkat lanjut. Kelas ini mensyaratkan sejumlah penguasaan landasan pengetahuan yang baik.

Deskripsi

Kelas Membangun Progressive Web Apps hanya menerima pendaftaran sampai Minggu, 31 Januari 2021 Jam 23:59.
Terhitung Senin, 1 Februari 2021, kelas akan ditutup.

20201117113138325e81abde4ebd097559c9784f04e898.jpg


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.

Kontributor

2

Curriculum Developer yang membangun kelas ini:

CodePolitan

CodePolitan

Sidiq Permana

Sidiq Permana

Lead Innovation and Technology at NBS

Reviewer

15

Code Reviewer yang akan me-review tugas dan kode Anda:

Lihat semua kontributor dan reviewer

Lihat semua kontributor dan reviewer

Kontributor & Reviewer

Kontributor kelas

Curriculum Developer yang membangun kelas ini:

CodePolitan

CodePolitan

Sidiq Permana

Sidiq Permana

Lead Innovation and Technology at NBS


Tim Reviewer

Code Reviewer yang akan me-review tugas dan kode Anda:

Raka Adi Nugroho
Nasrul Gunawan
Khofidin
Khofidin

Khofidin

IT & Traceability Manager at Austrex

  • Google Certified Associate Android Developer
  • Multi stack developer
Luthfi Alfarisi
Tio Misbaqul Irawan
Tio Misbaqul Irawan

Tio Misbaqul Irawan

External Code Reviewer at Dicoding Indonesia

  • Mobile and Web Enthusiast
  • Unix/Linux Enthusiast
Agista Septiyanto
Alvin Indra Pratama
Alfian Yusuf Abdullah
Alfian Yusuf Abdullah

Alfian Yusuf Abdullah

Head of Reviewer at Dicoding Indonesia

  • Associate Android Developer
  • Kotlin Enthusiast
  • UI/UX Enthusiast
Fahmi Jabbar
Dimas Maulana Dwi Saputra
Alexzander Purwoko
Alexzander Purwoko

Alexzander Purwoko

Code Reviewer at Dicoding Indonesia

  • Associate Android Developer
  • Android, Web & IoT Enthusiast
Ananda Dwi Prayoga
Shaddam Amru
Shaddam Amru

Shaddam Amru

Frontend Engineer

  • React Frontend Engineer
  • Product & UX
  • Linux Enthusiast
Rian Mandala Putra
Tatang Kuswandi
Raka Adi Nugroho

Raka Adi Nugroho

Lead Software Engineer - Mobile at Kitalulus.com

  • Dicoding Graduate
Nasrul Gunawan

Nasrul Gunawan

Elixir Backend Developer at Global IT Support

  • Web & Mobile Enthusiast
  • UI/UX Enthusiast
Khofidin

Khofidin

IT & Traceability Manager at Austrex

  • Google Certified Associate Android Developer
  • Multi stack developer
Luthfi Alfarisi

Luthfi Alfarisi

External Code Reviewer at Dicoding Indonesia

Tio Misbaqul Irawan

Tio Misbaqul Irawan

External Code Reviewer at Dicoding Indonesia

  • Mobile and Web Enthusiast
  • Unix/Linux Enthusiast
Agista Septiyanto

Agista Septiyanto

Product Engineer at Dicoding

Alvin Indra Pratama

Alvin Indra Pratama

Product Engineer at Dicoding Indonesia

  • Front-End Developer
Alfian Yusuf Abdullah

Alfian Yusuf Abdullah

Head of Reviewer at Dicoding Indonesia

  • Associate Android Developer
  • Kotlin Enthusiast
  • UI/UX Enthusiast
Fahmi Jabbar

Fahmi Jabbar

External Code Reviewer at Dicoding Indonesia

Alexzander Purwoko

Alexzander Purwoko

Code Reviewer at Dicoding Indonesia

  • Associate Android Developer
  • Android, Web & IoT Enthusiast
Ananda Dwi Prayoga

Ananda Dwi Prayoga

Android Engineer at Vidio.com

  • Android Dev
  • Web Dev
Shaddam Amru

Shaddam Amru

Frontend Engineer

  • React Frontend Engineer
  • Product & UX
  • Linux Enthusiast
Rian Mandala Putra

Rian Mandala Putra

External Code Reviewer at Dicoding Indonesia

  • Mobile and Web Enthusiast
Tatang Kuswandi

Tatang Kuswandi

External Code Reviewer at Dicoding Indonesia

  • Mobile and Web Enthusiast

Testimoni Siswa

Ribuan siswa sukses belajar di Dicoding Academy. Apa kata mereka? Berikut adalah testimoni asli mereka.

Ferdy Ciputra
Ferdy Ciputra
PT Bumi Amartha Teknologi Mandiri
Membangun Progressive Web Apps
Pokoknya dijamin dapat ilmu baru dan pengetahuan baru di bidang web developer, terutama materi di kelas ini yang bisa membuat website yang bahkan bisa di instal di perangkat smartphone layaknya aplikasi native mobile. Terimakasih Dicoding.
Baca selengkapnya
Lihat semua testimoni

Kelas sudah tidak aktif

Silabus

Materi yang akan Anda pelajari pada kelas ini.