Men-debug Progressive Web App

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

Progressive Web App (PWA) adalah aplikasi modern berkualitas tinggi yang dibuat menggunakan teknologi web. PWA menawarkan kemampuan yang mirip dengan aplikasi iOS, Android, dan desktop. PWA adalah:

• Dapat diandalkan bahkan dalam kondisi jaringan yang tidak stabil.
• Dapat diinstal ke platform peluncuran 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 terkait panel lainnya, 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 service worker, seperti membatalkan pendaftaran atau memperbarui layanan, mengemulasi peristiwa push, beralih ke offline, atau menghentikan service worker.
• Lihat cache service worker Anda dari tab Cache Storage.
• Batalkan pendaftaran service worker dan hapus semua penyimpanan dan cache dengan satu klik tombol dari tab Clear storage.

Manifes aplikasi web

Jika Anda ingin pengguna dapat menambahkan aplikasi Anda 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 tampilan aplikasi di layar utama, tempat mengarahkan pengguna saat meluncurkan dari layar utama, dan tampilan aplikasi saat diluncurkan.

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

• Untuk melihat sumber manifes, klik link di bawah label App Manifest (manifest.webmanifest di screenshot di atas).
• Bagian Identity dan Presentation hanya menampilkan kolom dari sumber manifes dengan cara yang lebih mudah digunakan.
• Bagian Protocol Handlers memungkinkan Anda menguji pendaftaran pengendali protokol URL PWA dengan sekali klik tombol. Untuk mempelajari lebih lanjut, lihat Menguji pendaftaran pengendali protokol URL.
• Bagian Icons section menampilkan setiap ikon yang telah Anda tentukan dan memungkinkan Anda memeriksa maskernya.
• Kumpulan bagian Shortcut #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 yang dapat disamarkan

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

Untuk memangkas ikon sehingga hanya area aman minimum yang terlihat, centang Show only the minimum safe area for maskable icons.

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

Memicu penginstalan

Chrome memungkinkan Anda mengaktifkan dan mempromosikan penginstalan PWA langsung dalam antarmuka penggunanya. Pelajari Cara memberikan pengalaman penginstalan dalam aplikasi 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 Install.

   

3. Ikuti petunjuk di layar.

Fitur Install app (atau Add to home screen di beberapa perangkat) 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 tersebut juga akan berfungsi untuk perangkat seluler.

Jika ingin menguji pengalaman seluler yang sebenarnya, Anda dapat menghubungkan perangkat seluler asli ke DevTools melalui proses debug jarak jauh. Untuk memicu penginstalan di perangkat seluler yang terhubung, buka menu tiga titik , lalu klik Install app (atau Add to home screen).

Memeriksa pintasan

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

Untuk memeriksa pintasan yang Anda tentukan dalam file manifes, scroll ke bagian Shortcut #N dari tab Manifest.

Memeriksa screenshot untuk UI penginstalan yang lebih lengkap

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

Untuk memeriksa screenshot, scroll ke bagian Screenshot #N dari tab Manifest.

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 Anda:

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 diuji oleh pengendali, lalu klik Test protocol. Dalam contoh ini, pengendali dapat memproses americano, chai, dan latte-macchiato.
4. Saat Chrome bertanya apakah Chrome dapat membuka aplikasi, konfirmasi dengan mengklik Open Protocol Handler.
5. Di dialog berikutnya, izinkan aplikasi menangani link web+coffee.

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

Service worker

Service worker adalah teknologi mendasar di platform web masa depan. Service worker 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 Akurat

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

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

• Tabel Update Cycle menampilkan aktivitas service worker dan waktu yang berlalu, seperti penginstalan, tunggu, dan aktivasi. Untuk melihat stempel waktu yang tepat dari setiap aktivitas, klik tombol Expand.

  

  Untuk mengetahui informasi selengkapnya, lihat Siklus proses service worker.

Jika service worker menyebabkan error, tab Service Workers akan menampilkan ikon Error dengan jumlah error di samping baris Source. Link dengan angka akan mengarahkan Anda ke Console dengan semua error yang dicatat dalam log.

Untuk melihat informasi tentang semua service worker, klik See all registrations di bagian bawah tab Service Workers. Link ini akan mengarahkan Anda ke chrome://serviceworker-internals/?devtools tempat Anda dapat men-debug service worker lebih lanjut.

Cache service worker

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

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

Jika Anda membuka dua cache atau lebih, cache tersebut akan tercantum di bawah drop-down Cache Storage.

Penggunaan kuota

Beberapa respons dalam tab Cache Storage mungkin ditandai sebagai "opaque". Hal ini mengacu pada respons yang diambil dari asal yang berbeda, seperti dari CDN atau API jarak jauh, saat CORS tidak diaktifkan.

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

Detail padding ini bervariasi dari browser ke browser, tetapi untuk Google Chrome, hal ini berarti ukuran minimum yang diberikan oleh satu respons opaque yang di-cache ke penggunaan penyimpanan keseluruhan adalah sekitar 7 megabyte. Anda harus mengingat hal ini saat menentukan jumlah respons opaque 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 opaque.

Panduan Terkait:

• Stack Overflow: Batasan apa yang berlaku untuk respons opaque?
• 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 menghapus semua cache dan penyimpanan dengan satu klik tombol. Lihat bagian di bawah untuk mempelajari lebih lanjut.

Panduan Terkait:

• Hapus Penyimpanan

Panduan panel Aplikasi lainnya

Lihat panduan di bawah untuk mendapatkan bantuan lebih lanjut terkait panel Application lainnya.

Panduan Terkait:

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