Men-debug Progressive Web App

Kayce Basques

Sofia Emelianova

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

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

• Andal 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 Aplikasi. Jika Anda mencari bantuan di panel lain, lihat bagian terakhir panduan ini, Panduan panel Aplikasi Lainnya.

Ringkasan

• Gunakan tab Manifes untuk memeriksa manifes aplikasi web Anda.
• Gunakan tab Pekerja Layanan untuk berbagai tugas terkait pekerja layanan, seperti membatalkan pendaftaran atau mengupdate layanan, mengemulasi peristiwa push, beralih ke offline, atau menghentikan pekerja layanan.
• Lihat cache pekerja layanan dari tab Penyimpanan Cache.
• Batalkan pendaftaran pekerja layanan dan hapus semua penyimpanan dan 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, ke mana pengguna harus diarahkan saat meluncurkan dari layar utama, dan seperti apa tampilan aplikasi saat diluncurkan.

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

• Untuk melihat sumber manifes, klik link di bawah label Manifes Aplikasi (manifest.webmanifest dalam 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 dengan mengklik satu tombol. Untuk mempelajari lebih lanjut, lihat Menguji pendaftaran pengendali protokol URL.
• Bagian Icons menampilkan setiap ikon yang telah Anda tentukan dan memungkinkan Anda memeriksa mask-nya.
• Kumpulan bagian Pintasan #N menampilkan informasi tentang semua objek pintasan Anda.
• Rangkaian bagian Screenshot #N menampilkan screenshot untuk UI penginstalan aplikasi yang lebih kaya.

Selain itu, jika DevTools mengalami error, seperti ikon yang tidak dapat dimuat, tab Manifest akan menampilkan bagian Penginstalan 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 maskable, yaitu format ikon yang beradaptasi dengan platform.

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

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

Penginstalan pemicu

Chrome memungkinkan Anda mengaktifkan dan mempromosikan penginstalan PWA secara langsung dari 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 Instal.

   

3. Ikuti petunjuk di layar.

Poin penting: Biarkan panel samping Konsol tetap terbuka saat Anda memicu penginstalan. Konsol memberi tahu apakah manifes Anda mengalami masalah dan mencatat informasi lain ke dalam log tentang siklus proses penginstalan.

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

Jika ingin menguji pengalaman seluler yang sebenarnya, Anda dapat menghubungkan perangkat seluler sungguhan ke DevTools melalui proses debug 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 dibutuhkan pengguna.

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

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

Memeriksa screenshot untuk UI penginstalan yang lebih lengkap

Saat menambahkan deskripsi dan serangkaian screenshot ke file manifes, aplikasi akan menampilkan dialog penginstalan yang lebih beragam.

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 Anda inginkan untuk diuji pengendalinya, lalu klik Test protocol. Dalam contoh ini, pengendali dapat memproses americano, chai, dan latte-macchiato.
4. Saat Chrome menanyakan apakah Anda dapat membuka aplikasi, 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 Tepat

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

• Jika pekerja layanan diinstal ke halaman yang sedang dibuka, Anda akan melihatnya tercantum di tab ini. Misalnya, dalam screenshot di atas, terdapat pekerja layanan 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 Command Menu.
• Kotak centang Update on reload memaksa pekerja layanan melakukan update pada setiap pemuatan halaman.
• Kotak centang Pengabaian untuk jaringan mengabaikan pekerja layanan dan memaksa browser masuk ke jaringan untuk mendapatkan resource yang diminta.
• Link Permintaan jaringan mengarahkan Anda ke panel Jaringan yang berisi daftar permintaan yang disadap terkait pekerja layanan (filter is:service-worker-intercepted).
• Link Update melakukan update satu kali untuk pekerja layanan tertentu.
• Tombol Push mengemulasi notifikasi push tanpa payload (juga dikenal sebagai tickle).
• Tombol Sync mengemulasi peristiwa sinkronisasi latar belakang.
• Link Batalkan pendaftaran membatalkan pendaftaran pekerja layanan yang ditentukan. Lihat Menghapus penyimpanan untuk mengetahui cara membatalkan pendaftaran pekerja layanan serta menghapus penyimpanan dan cache dengan sekali klik tombol.
• Baris Source memberi tahu Anda jika pekerja layanan yang sedang berjalan diinstal. Link-nya adalah nama file sumber pekerja layanan. Dengan mengklik link, Anda akan diarahkan ke sumber pekerja layanan.
• Baris Status memberi tahu Anda status pekerja layanan. Angka pada baris ini (#16 dalam screenshot) menunjukkan berapa kali pekerja layanan telah diperbarui. Jika Anda mengaktifkan kotak centang Update on reload, Anda akan melihat bahwa angkanya bertambah setiap kali halaman dimuat. Di sebelah status, Anda akan melihat link start (jika pekerja layanan dihentikan) atau link stop (jika pekerja layanan sedang berjalan). Service worker dirancang untuk dihentikan dan dimulai oleh browser kapan saja. Menghentikan pekerja layanan secara eksplisit menggunakan link stop dapat menyimulasikannya. Menghentikan pekerja layanan adalah cara yang tepat untuk menguji perilaku kode Anda saat pekerja layanan mulai mencadangkan lagi. Error ini sering kali melaporkan bug karena asumsi yang salah tentang status global yang persisten.
• Baris Klien memberi tahu Anda asal cakupan pekerja layanan. Tombol fokus sebagian besar berguna jika Anda memiliki beberapa pekerja layanan yang terdaftar. Jika Anda mengklik tombol focus di samping pekerja layanan yang berjalan di tab lain, Chrome akan berfokus pada tab tersebut.

• Tabel Update Cycle menampilkan aktivitas pekerja layanan dan waktu yang telah dilewati, seperti instal, tunggu, dan aktifkan. Untuk melihat stempel waktu yang tepat dari setiap aktivitas, klik tombol Expand.

  

  Untuk informasi selengkapnya, lihat Siklus proses pekerja layanan.

Jika pekerja layanan menyebabkan kesalahan, tab Pekerja Layanan akan menampilkan ikon Error dengan jumlah kesalahan di sebelah baris Source. Link dengan nomor tersebut akan membawa Anda ke Konsol dengan semua error yang dicatat.

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 untuk resource yang telah di-cache menggunakan Cache API (pekerja layanan).

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

Jika ada 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". Hal ini merujuk 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 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 diberikan oleh setiap respons buram yang di-cache yang berkontribusi pada penggunaan penyimpanan secara keseluruhan sekitar 7 megabyte. Anda harus memperhatikan hal ini saat menentukan jumlah respons buram yang ingin di-cache, karena Anda dapat dengan mudah melampaui batas kuota penyimpanan lebih cepat daripada yang diharapkan berdasarkan ukuran resource buram yang sebenarnya.

Panduan Terkait:

• Stack Overflow: Batasan apa yang berlaku untuk 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 pekerja layanan serta menghapus semua cache dan penyimpanan dengan sekali klik tombol. Lihat bagian di bawah ini untuk mempelajari lebih lanjut.

Panduan Terkait:

• Hapus Penyimpanan

Panduan panel Application lainnya

Lihat panduan di bawah untuk bantuan lebih lanjut tentang panel lain di panel Application.

Panduan Terkait:

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