Men-debug Progressive Web App

Kayce Basques

Sofia Emelianova

Gunakan panel Application untuk memeriksa, mengubah, dan men-debug manifes aplikasi web, pekerja layanan, dan cache pekerja layanan.

Progressive Web App (PWA) adalah aplikasi modern dan berkualitas tinggi yang dibangun menggunakan teknologi web. PWA menawarkan kemampuan yang serupa dengan aplikasi iOS, Android, dan desktop. Bagian-bagian tersebut adalah:

• Dapat diandalkan bahkan dalam kondisi jaringan yang tidak stabil.
• Dapat diinstal untuk meluncurkan platform sistem operasi, seperti folder Applications di Mac OS X, menu Start di Windows, dan layar utama di Android dan iOS.
• Muncul di pengalih aktivitas, mesin telusur perangkat seperti Spotlight, dan di sheet berbagi konten.

Panduan ini hanya membahas fitur Progressive Web App dari panel Application. Jika Anda mencari bantuan di panel lain, lihat bagian terakhir panduan ini, Panduan panel Aplikasi Lainnya.

Ringkasan

• Gunakan tab Manifest untuk memeriksa manifes aplikasi web Anda.
• Gunakan tab Service Workers untuk berbagai tugas terkait pekerja layanan, seperti membatalkan pendaftaran atau memperbarui layanan, mengemulasikan peristiwa push, beralih offline, atau menghentikan pekerja layanan.
• Lihat cache service worker Anda dari tab Cache Storage.
• Batalkan pendaftaran pekerja layanan dan hapus semua penyimpanan serta cache dengan sekali klik tombol dari tab Hapus penyimpanan.

Manifes aplikasi web

Jika Anda ingin pengguna dapat menambahkan aplikasi ke folder Applications di Mac OS X, menu Start di Windows, dan layar utama di Android dan iOS, Anda memerlukan manifes aplikasi web. Manifes menentukan cara aplikasi muncul di layar utama, tempat mengarahkan pengguna saat meluncurkan dari layar utama, dan tampilan aplikasi saat diluncurkan.

Setelah menyiapkan manifes, Anda dapat menggunakan tab Manifest di panel Application untuk memeriksanya.

• Untuk melihat sumber manifes, klik link di bawah label Manifes Aplikasi (manifest.webmanifest di screenshot di atas).
• Bagian Identity dan Presentation hanya menampilkan kolom dari sumber manifes dengan cara yang lebih mudah digunakan.
• Bagian Pengendali Protokol memungkinkan Anda menguji pendaftaran pengendali protokol URL PWA Anda dengan mengklik tombol. Untuk mempelajari lebih lanjut, lihat Menguji pendaftaran pengendali protokol URL.
• Bagian Ikon menampilkan setiap ikon yang telah Anda tentukan dan memungkinkan Anda memeriksa mask-nya.
• Kumpulan bagian Pintasan #N menampilkan informasi tentang semua objek pintasan Anda.
• Kumpulan bagian Screenshot #N menampilkan screenshot untuk UI penginstalan aplikasi Anda yang lebih lengkap.

Selain itu, jika DevTools mengalami error, seperti ikon yang tidak dapat dimuat, tab Manifest akan menampilkan bagian Installability yang menjelaskan error tersebut.

Melihat dan memeriksa ikon maskable

Bagian Icons pada tab Manifest menampilkan semua ikon aplikasi Anda. Di bagian ini, Anda juga dapat memeriksa area aman untuk ikon maskable, format ikon yang beradaptasi dengan platform.

Untuk memangkas ikon agar hanya area aman minimum yang terlihat, centang Hanya tampilkan area aman minimum untuk ikon yang dapat disamarkan.

Jika seluruh logo Anda terlihat di area aman, Anda sudah siap.

Penginstalan pemicu

Chrome memungkinkan Anda mengaktifkan dan mempromosikan penginstalan PWA langsung dari antarmuka penggunanya. Pelajari Cara memberikan pengalaman penginstalan dalam aplikasi untuk Anda sendiri.

Untuk memicu alur penginstalan PWA Anda:

1. Buka halaman landing PWA di Chrome.

2. Di sisi kanan kolom URL di bagian atas, klik Instal.

   

3. Ikuti petunjuk di layar.

Poin penting: Biarkan panel samping Console tetap terbuka saat Anda memicu penginstalan. Konsol akan memberi tahu Anda jika manifes Anda mengalami masalah dan mencatat log informasi lain tentang daur hidup penginstalan.

Fitur Instal aplikasi tidak dapat menyimulasikan alur kerja untuk perangkat seluler. Perhatikan bagaimana browser Chrome desktop menampilkan tombol penginstalan di kolom URL, meskipun DevTools berada dalam Mode Perangkat. Namun, jika Anda berhasil menambahkan aplikasi ke desktop, aplikasi juga akan berfungsi untuk perangkat seluler.

Jika ingin menguji pengalaman seluler yang asli, Anda dapat menghubungkan perangkat seluler sungguhan ke DevTools melalui proses debug dari jarak jauh. Untuk memicu penginstalan di perangkat seluler yang terhubung, buka menu tiga titik lalu klik Instal aplikasi.

Memeriksa pintasan

Pintasan aplikasi memungkinkan Anda memberikan akses cepat ke beberapa tindakan umum yang sering diperlukan pengguna.

Untuk memeriksa pintasan yang Anda tentukan di file manifes, scroll ke bagian Pintasan #N di tab Manifes.

Catatan: Catatan: Screenshot ini diambil dari halaman demo ini. Periksa untuk melihat contoh lainnya.

Memeriksa screenshot untuk UI penginstalan yang lebih kaya

Saat Anda menambahkan deskripsi dan serangkaian screenshot ke file manifes, aplikasi Anda akan mendapatkan dialog penginstalan yang lebih lengkap.

Untuk memeriksa screenshot, scroll ke bagian Screenshot #N di tab Manifes.

Menguji pendaftaran pengendali protokol URL

PWA dapat menangani link yang menggunakan protokol tertentu untuk pengalaman yang lebih terintegrasi. Untuk mempelajari cara membuat pengendali, lihat Pendaftaran pengendali protokol URL untuk PWA.

Untuk menguji pengendali:

1. Buka DevTools di halaman landing PWA Anda. Misalnya, lihat PWA demo ini.
2. Dari halaman demo, instal PWA dan muat ulang aplikasi setelah penginstalan. Browser kini telah mendaftarkan PWA sebagai pengendali untuk protokol web+coffee.
3. Di bagian Application > Manifest > Protocol Handler, masukkan URL yang ingin Anda uji oleh pengendali, lalu klik Test protocol. Dalam contoh ini, pengendali dapat memproses americano, chai, dan latte-macchiato.
4. Saat Chrome menanyakan apakah aplikasi dapat dibuka, konfirmasi dengan mengklik Open Protocol Handler.
5. Pada dialog berikutnya, izinkan aplikasi menangani link web+coffee.

Jika pengendali berhasil memproses link, Anda akan melihat gambar cangkir kopi terbuka di aplikasi.

Service worker

Service worker adalah teknologi fundamental di platform web masa depan. Skrip ini adalah skrip yang dijalankan browser di latar belakang, terpisah dari halaman web. Skrip ini memungkinkan Anda mengakses fitur yang tidak memerlukan halaman web atau interaksi pengguna, seperti notifikasi push, sinkronisasi latar belakang, dan pengalaman offline.

Panduan Terkait:

• Pengantar Service Worker
• Notifikasi Push: Tepat Waktu, Relevan, dan Presisi

Tab Service Workers di panel Application adalah tempat utama di DevTools untuk memeriksa dan men-debug pekerja layanan.

• Jika pekerja layanan diinstal ke halaman yang sedang terbuka, Anda akan melihatnya tercantum pada tab ini. Misalnya, dalam screenshot di atas, ada pekerja layanan yang diinstal untuk cakupan https://airhorner.com/.
• Kotak centang Offline akan menempatkan DevTools ke mode offline. Mode ini setara dengan mode offline yang tersedia dari panel Jaringan, atau opsi Go offline di Menu Perintah.
• Kotak centang Update on reload memaksa service worker untuk diupdate setiap kali halaman dimuat.
• Kotak centang Bypass for network akan mengabaikan pekerja layanan dan memaksa browser untuk membuka jaringan guna mendapatkan resource yang diminta.
• Link Permintaan jaringan mengarahkan Anda ke panel Jaringan berisi daftar permintaan yang disadap yang terkait dengan pekerja layanan (filter is:service-worker-intercepted).
• Link Update melakukan update satu kali untuk pekerja layanan yang ditentukan.
• Tombol Push mengemulasikan notifikasi push tanpa payload (juga dikenal sebagai tickle).
• Tombol Sync mengemulasi peristiwa sinkronisasi latar belakang.
• Link Batalkan pendaftaran akan membatalkan pendaftaran pekerja layanan yang ditentukan. Lihat Hapus penyimpanan untuk mengetahui cara membatalkan pendaftaran pekerja layanan serta menghapus penyimpanan dan cache dengan sekali klik tombol.
• Baris Source memberi tahu Anda kapan pekerja layanan yang sedang berjalan telah diinstal. Link tersebut adalah nama file sumber pekerja layanan. Mengklik link akan mengarahkan Anda ke sumber pekerja layanan.
• Baris Status memberi tahu Anda status pekerja layanan. Angka pada baris ini (#16 dalam tangkapan layar) menunjukkan berapa kali pekerja layanan telah diperbarui. Jika mengaktifkan kotak centang Update on reload , Anda akan melihat bahwa angka tersebut bertambah setiap kali halaman dimuat. Di samping status, Anda akan melihat link start (jika service worker dihentikan) atau link stop (jika service worker sedang berjalan). Pekerja layanan dirancang untuk dihentikan dan dimulai oleh browser kapan saja. Menghentikan pekerja layanan secara eksplisit menggunakan link stop dapat menyimulasikan hal tersebut. Menghentikan pekerja layanan adalah cara yang tepat untuk menguji perilaku kode Anda saat pekerja layanan mulai mencadangkan lagi. Hal ini sering kali memunculkan bug karena asumsi yang salah tentang status global persisten.
• Baris Klien memberi tahu Anda tempat asal cakupan pekerja layanan. Tombol focus sebagian besar berguna saat Anda memiliki beberapa pekerja layanan terdaftar. Jika Anda mengklik tombol focus di samping pekerja layanan yang berjalan di tab berbeda, Chrome akan berfokus pada tab tersebut.

• Tabel Update Cycle menampilkan aktivitas pekerja layanan dan waktu berlalunya, seperti menginstal, menunggu, dan mengaktifkan. Untuk melihat stempel waktu persis setiap aktivitas, klik tombol Expand.

  

  Untuk informasi selengkapnya, lihat Siklus proses pekerja layanan.

Jika pekerja layanan menyebabkan error, tab Service Workers akan menampilkan ikon Error dengan jumlah error di samping baris Source. Link dengan nomor akan mengarahkan Anda ke Konsol dengan semua error yang dicatat ke dalam log.

Untuk melihat informasi tentang semua pekerja layanan, klik Lihat semua pendaftaran di bagian bawah tab Pekerja Layanan. Link ini mengarah ke chrome://serviceworker-internals/?devtools tempat Anda dapat men-debug pekerja layanan lebih lanjut.

Cache pekerja layanan

Tab Cache Storage menyediakan daftar hanya baca dari resource yang telah di-cache menggunakan Cache API (service worker).

Perlu diperhatikan bahwa saat pertama kali Anda membuka cache dan menambahkan resource ke dalamnya, DevTools mungkin tidak mendeteksi perubahan. Muat ulang halaman dan Anda akan melihat cache.

Jika Anda memiliki dua cache atau lebih yang terbuka, Anda akan melihatnya tercantum di bawah drop-down Cache Storage.

Penggunaan kuota

Beberapa respons dalam tab Penyimpanan Cache mungkin ditandai sebagai "buram". Respons ini mengacu pada respons yang diambil dari asal yang berbeda, seperti dari CDN atau API jarak jauh, jika CORS tidak diaktifkan.

Untuk menghindari kebocoran informasi lintas-domain, ada padding signifikan yang ditambahkan ke ukuran respons buram yang digunakan untuk menghitung batas kuota penyimpanan (yaitu apakah pengecualian QuotaExceeded ditampilkan) dan dilaporkan oleh navigator.storage API.

Detail padding ini bervariasi dari satu browser ke browser lainnya, tetapi untuk Google Chrome, ini berarti bahwa ukuran minimum yang dikontribusikan oleh satu respons buram yang di-cache terhadap keseluruhan penggunaan penyimpanan adalah sekitar 7 megabyte. Anda harus mengingat hal ini saat menentukan jumlah respons buram yang ingin di-cache, karena Anda dapat dengan mudah melampaui batasan kuota penyimpanan jauh lebih cepat dari yang Anda harapkan berdasarkan ukuran sebenarnya dari resource buram.

Panduan Terkait:

• Stack Overflow: Batasan apa yang berlaku pada respons buram?
• Workbox: Memahami Kuota Penyimpanan

Hapus penyimpanan

Tab Clear Storage adalah fitur yang sangat berguna saat mengembangkan progressive web app. Tab ini memungkinkan Anda membatalkan pendaftaran service worker dan mengosongkan semua cache dan penyimpanan dengan sekali klik tombol. Lihat bagian di bawah untuk mempelajari lebih lanjut.

Panduan Terkait:

• Hapus Penyimpanan

Panduan panel Aplikasi lainnya

Lihat panduan di bawah ini untuk bantuan lebih lanjut terkait panel lain pada panel Application.

Panduan Terkait:

• Memeriksa resource halaman
• Memeriksa dan mengelola penyimpanan lokal dan cache