Kursus yang menguraikan setiap aspek pengembangan progressive web app modern.
Kursus ini membahas dasar-dasar pengembangan Progressive Web App dalam bagian yang mudah dipahami. Dalam modul berikut ini, Anda akan mempelajari apa yang dimaksud dengan Progressive Web App, cara membuat atau mengupgrade konten web yang sudah ada, dan cara menambahkan semua bagian untuk aplikasi offline yang dapat diinstal. Gunakan panel menu untuk menavigasi modul. (Menu ada di sebelah kiri pada desktop atau di belakang menu hamburger pada perangkat seluler.)
Anda akan mempelajari dasar-dasar PWA seperti Manifes Aplikasi Web, pekerja layanan, cara mendesain dengan mempertimbangkan aplikasi, cara menggunakan alat lain untuk menguji dan men-debug PWA Anda. Setelah dasar-dasar tersebut, Anda akan mempelajari integrasi dengan platform dan sistem operasi, cara meningkatkan pengalaman penginstalan dan penggunaan PWA, serta cara menawarkan pengalaman offline.
Setiap modul mencakup demo interaktif dan penilaian mandiri untuk menguji pengetahuan Anda. Anda akan dapat menguji dan mencoba demo di ponsel, tablet, atau laptop sambil bermain dengan kode untuk memahami dasar-dasar pembuatan Progressive Web App.
Kursus ini dibuat untuk developer web pemula dan lanjutan. Anda dapat mempelajari rangkaian ini dari awal hingga akhir untuk mendapatkan pemahaman umum tentang PWA dari atas ke bawah, atau Anda dapat menggunakannya sebagai referensi untuk subjek tertentu. Bagi mereka yang baru mengenal pengembangan web, Anda memerlukan landasan dalam HTML, CSS, dan JavaScript untuk mengikutinya. Lihat Mempelajari CSS, serta kursus HTML dan JavaScript di MDN.
Inilah yang akan Anda pelajari:
Memulai
Jika Anda ingin membuat Progressive Web App, Anda mungkin bertanya-tanya dari mana harus memulai, apakah mungkin untuk mengupgrade situs ke PWA tanpa memulai dari awal, atau bagaimana cara berpindah dari aplikasi khusus platform ke PWA. Artikel ini akan membantu Anda menjawab pertanyaan-pertanyaan tersebut.
Dasar-dasar
Semua Progressive Web App adalah, pada intinya, situs web modernnya, jadi penting bahwa situs web Anda memiliki dasar yang kuat dalam desain responsif, seluler dan semuanya terlebih dahulu, desain intrinsik, dan kinerja web.
Desain aplikasi
Salah satu perbedaan utama antara Progressive Web App dan situs klasik serta aplikasi web adalah kemampuan penginstalan. Hal ini menciptakan pengalaman mandiri yang lebih terintegrasi ke dalam platform dan sistem operasi. Penginstalan memungkinkan fleksibilitas baru dan tanggung jawab baru, karena kami tidak memiliki antarmuka pengguna browser di sekitar konten kami.
Aset dan data
Progressive Web App adalah sebuah situs web; semua asetnya sama seperti yang ada di web, tetapi dengan alat baru untuk membuat aset tersebut dimuat dengan cepat saat online dan tersedia saat offline.
Pekerja layanan
Pekerja layanan adalah bagian mendasar dari PWA. Chromebook memungkinkan pemuatan cepat (terlepas dari jaringan), akses offline, notifikasi push, dan kemampuan lainnya.
Menyimpan ke cache
Anda dapat menggunakan Cache Storage API untuk mendownload, menyimpan, menghapus, atau memperbarui aset di perangkat. Kemudian aset ini dapat ditayangkan di perangkat tanpa memerlukan permintaan jaringan.
Aktif
Dengan menggunakan peristiwa pengambilan pekerja layanan, Anda dapat menangkap permintaan jaringan dan memberikan respons menggunakan teknik yang berbeda.
Workbox
Workbox adalah sekumpulan modul yang menyederhanakan interaksi pekerja layanan umum seperti perutean dan cache. Setiap modul membahas aspek spesifik dari pengembangan pekerja layanan. Workbox bertujuan untuk mempermudah penggunaan pekerja layanan sekaligus memungkinkan fleksibilitas untuk mengakomodasi persyaratan aplikasi yang kompleks jika diperlukan.
Data offline
Untuk membangun pengalaman offline yang solid, Anda perlu mengimplementasikan pengelolaan penyimpanan. Alat seperti IndexedDB, Cache, Storage Manager, Persistent Storage, dan Content Indexing dapat membantu.
Penginstalan
Aplikasi yang terinstal mudah diakses dan dapat memanfaatkan beberapa integrasi yang lebih mendalam dengan OS. Pelajari cara membuat PWA dapat diinstal dan mendapatkan manfaat tersebut.
Manifes aplikasi web
Manifes aplikasi web adalah file JSON yang mendefinisikan bagaimana PWA harus diperlakukan sebagai aplikasi terinstal, termasuk tampilan dan nuansa serta perilaku dasar dalam sistem operasi.
Perintah penginstalan
Untuk situs yang lulus kriteria penginstalan PWA, browser akan memicu peristiwa untuk meminta pengguna menginstalnya. Kabar baiknya, Anda bisa menggunakan peristiwa ini untuk menyesuaikan dialog Anda dan mengundang pengguna untuk menginstal aplikasi Anda.
Update
Kemungkinan PWA Anda perlu diperbarui. Bab ini menjelaskan alat-alat untuk mengupdate berbagai bagian PWA Anda, mulai dari aset hingga metadata.
Peningkatan
Pengguna Anda mengharapkan pengalaman yang baik. Dalam bab ini, Anda akan melihat cara meningkatkan PWA dengan layar pembuka, pintasan aplikasi, dan cara kerja sesi.
Deteksi
Mengidentifikasi bagaimana pengguna berinteraksi dengan aplikasi Anda akan berguna dalam menyesuaikan dan meningkatkan pengalaman pengguna. Misalnya, Anda dapat memeriksa apakah aplikasi sudah diinstal pada perangkat pengguna dan mengimplementasikan fitur seperti mentransfer navigasi ke aplikasi mandiri dari browser.
Integrasi OS
PWA Anda kini berfungsi di luar browser. Bab ini membahas cara mengintegrasikan lebih lanjut dengan sistem operasi setelah pengguna menginstal aplikasi Anda.
Pengelolaan jendela
PWA di luar browser akan mengelola jendelanya sendiri. Dalam bab ini, Anda akan memahami API dan kemampuan mengelola jendela dalam sistem operasi.
Fitur eksperimental
Ada kemampuan PWA yang masih dalam proses pembuatan dan Anda dapat menjadi bagian dari pengembangannya. Dalam bab ini, Anda akan mempelajari project Fugu, cara mendaftar ke uji coba origin, dan cara menggunakan API eksperimental
Alat dan debug
Kita akan mempelajari alat yang tersedia untuk mengembangkan, men-debug, dan menguji Progressive Web App Anda.
Arsitektur
Anda membuat beberapa keputusan saat mengembangkan PWA, seperti apakah akan membuat aplikasi web satu halaman atau aplikasi multi-halaman, dan apakah Anda akan menghostingnya di root domain atau dalam folder.
Pengelolaan kerumitan
Menjaga aplikasi web tetap sederhana bisa menjadi sangat rumit. Dalam modul ini, Anda akan mempelajari cara kerja API web dengan threading dan cara menggunakannya untuk pola PWA umum seperti pengelolaan status.
Kemampuan
PWA tidak hanya terkait dengan layar. Bab ini membahas kemampuan yang dimiliki PWA saat ini dalam hal penggunaan hardware, sensor, dan platform.
Kesimpulan
Langkah selanjutnya dan referensi.
Jadi, apakah Anda siap mempelajari PWA?