Membuat Progressive Web App Anda tidak terasa seperti situs web, melainkan seperti aplikasi yang "sebenarnya"
Saat Anda memainkan bingo kata kunci Progressive Web App, sebaiknya tetapkan "PWA hanyalah situs". Dokumentasi PWA Microsoft menyetujui, kami menyampaikannya di situs ini, dan bahkan nominator PWA, Frances Berriman dan Alex Russell, juga menulisnya. Ya, PWA hanyalah situs web, tetapi juga lebih dari itu. Jika dilakukan dengan benar, PWA tidak akan terasa seperti situs, melainkan aplikasi yang "sebenarnya". Sekarang, apa yang dimaksud dengan terasa seperti aplikasi sungguhan?
Untuk menjawab pertanyaan ini, saya akan menggunakan aplikasi Podcast Apple sebagai contoh. Fitur ini tersedia di macOS di desktop dan di iOS (dan iPadOS masing-masing) di perangkat seluler. Meskipun Podcast adalah aplikasi media, ide inti yang saya ilustrasikan dengan bantuannya juga berlaku untuk kategori aplikasi lainnya.
Mampu berjalan secara offline
Jika Anda mundur selangkah dan memikirkan aplikasi khusus platform yang Anda miliki di ponsel atau komputer desktop, satu hal yang jelas terlihat: Anda tidak pernah mendapatkan apa pun. Di aplikasi Podcast, selalu ada sesuatu meskipun saya offline. Ketika tidak ada koneksi jaringan, aplikasi secara alami tetap terbuka. Bagian Paling Populer tidak menampilkan konten apa pun, tetapi kembali ke pesan Tidak dapat terhubung saat ini yang disambungkan dengan tombol Coba lagi. Ini mungkin bukan pengalaman yang paling menyenangkan, tetapi saya mendapatkan sesuatu.
Aplikasi Podcast mengikuti apa yang disebut model shell aplikasi. Semua konten statis yang diperlukan untuk menampilkan aplikasi inti disimpan dalam cache secara lokal, termasuk gambar dekoratif seperti ikon menu sebelah kiri dan ikon UI pemutar inti. Konten dinamis seperti data Paling Populer hanya dimuat sesuai permintaan, dengan tersedianya konten penggantian yang di-cache secara lokal jika pemuatan gagal. Baca artikel Model Shell Aplikasi untuk mempelajari cara menerapkan model arsitektur ini ke aplikasi web Anda.
Konten offline tersedia dan media yang dapat diputar
Saat offline, melalui panel samping kiri, saya masih dapat membuka bagian Didownload dan menikmati episode podcast yang didownload yang siap diputar dan ditampilkan dengan semua metadata seperti poster dan deskripsi.
Konten media yang didownload sebelumnya dapat ditayangkan dari cache, misalnya menggunakan urutan langkah Menayangkan audio dan video yang di-cache dari library Workbox. Konten lainnya selalu dapat disimpan di cache, atau di IndexedDB. Baca artikel Penyimpanan untuk web untuk mengetahui semua detail dan mengetahui kapan harus menggunakan teknologi penyimpanan tertentu. Jika Anda memiliki data yang harus disimpan secara persisten tanpa risiko dihapus permanen saat jumlah memori yang tersedia hampir habis, Anda dapat menggunakan Persistent Storage API.
Download latar belakang proaktif
Saat kembali online, tentu saya dapat menelusuri konten dengan kueri seperti http 203, dan saat saya memutuskan untuk berlangganan hasil penelusuran tersebut, podcast HTTP 203, episode terbaru serial tersebut langsung didownload, tanpa ada pertanyaan yang diajukan.
Mendownload episode podcast adalah operasi yang mungkin dapat memerlukan waktu lebih lama. Background Fetch API memungkinkan Anda mendelegasikan download ke browser, yang akan menanganinya di latar belakang. Di Android, browser bahkan bisa mendelegasikan download ini ke sistem operasi, sehingga browser tidak perlu terus berjalan. Setelah download selesai, pekerja layanan aplikasi akan diaktifkan dan Anda dapat memutuskan apa yang harus dilakukan dengan responsnya.
Berbagi dan berinteraksi dengan aplikasi lain
Aplikasi Podcast terintegrasi secara alami dengan aplikasi lain. Misalnya, saat saya mengklik kanan episode yang saya suka, saya dapat membagikannya ke aplikasi lain di perangkat saya, seperti aplikasi Message. Episode ini juga secara alami terintegrasi dengan papan klip sistem. Saya dapat mengklik kanan episode mana pun dan menyalin linknya.
Web Share API dan Web Share Target API memungkinkan aplikasi Anda berbagi dan menerima teks, file, serta link ke dan dari aplikasi lain di perangkat. Meskipun belum mungkin bagi aplikasi web untuk menambahkan item menu ke menu klik kanan bawaan sistem operasi, ada banyak cara lain untuk menautkan ke dan dari aplikasi lain di perangkat. Dengan Async Clipboard API, Anda dapat secara terprogram membaca dan menulis data teks dan gambar (gambar PNG) ke papan klip sistem. Di Android, Anda dapat menggunakan Contact Picker API untuk memilih entri dari pengelola kontak perangkat. Jika menawarkan aplikasi khusus platform dan PWA, Anda dapat menggunakan Dapatkan Penginstalan Aplikasi Terkait API untuk memeriksa apakah aplikasi khusus platform telah diinstal, yang dalam hal ini Anda tidak perlu mendorong pengguna untuk menginstal PWA atau menerima notifikasi push web.
Muat ulang aplikasi latar belakang
Di setelan aplikasi Podcast, saya dapat mengonfigurasi aplikasi tersebut agar otomatis mendownload episode baru. Dengan begitu, saya tidak perlu memikirkannya, konten yang diperbarui akan selalu ada di sana. Menakjubkan.
Periodic Background Sync API memungkinkan aplikasi Anda untuk me-refresh kontennya secara rutin di latar belakang tanpa harus menjalankannya. Artinya, konten baru tersedia secara proaktif, sehingga pengguna Anda dapat langsung mulai mempelajarinya kapan pun mereka memutuskan.
Status disinkronkan melalui cloud
Pada saat yang sama, langganan saya disinkronkan di semua perangkat yang saya miliki. Demi kelancaran streaming, saya tidak perlu repot menjaga sinkronisasi langganan podcast secara manual. Demikian pula, saya tidak perlu takut kalau memori perangkat seluler saya akan habis dengan episode yang sudah saya dengarkan di desktop. Status pemutaran disimpan secara sinkron, dan episode yang didengarkan akan dihapus secara otomatis.
Menyinkronkan data status aplikasi adalah tugas yang dapat Anda delegasikan ke Background Sync API. Operasi sinkronisasi itu sendiri tidak harus terjadi dengan segera, hanya pada akhirnya, dan bahkan mungkin ketika pengguna telah menutup aplikasi lagi.
Kontrol tombol media hardware
Saat saya sibuk dengan aplikasi lain, misalnya membaca halaman berita di browser Chrome, saya masih bisa mengontrol aplikasi Podcast dengan tombol media di laptop. Anda tidak perlu beralih ke aplikasi hanya untuk melewati atau mengulangi bagian berikutnya.
Tombol media didukung oleh Media Session API. Dengan begitu, pengguna dapat menggunakan tombol media hardware di keyboard fisik, headphone, atau bahkan mengontrol aplikasi web dari tombol media software di smartwatch. Ide tambahan untuk kelancaran operasi pencarian adalah dengan mengirimkan pola getaran saat pengguna mencari bagian penting konten, misalnya, melewati kredit pembuka atau batas bab.
Multitasking dan pintasan aplikasi
Tentu saja saya selalu bisa melakukan multitasking kembali ke aplikasi Podcast dari mana saja. Aplikasi ini memiliki ikon yang dapat dibedakan dengan jelas yang juga dapat saya pasang di desktop atau dok aplikasi sehingga Podcast dapat langsung diluncurkan saat saya menginginkannya.
Progressive Web App di desktop dan seluler dapat diinstal ke layar utama, menu mulai, atau dok aplikasi. Penginstalan dapat terjadi berdasarkan perintah proaktif, atau dikontrol sepenuhnya oleh developer aplikasi. Artikel Apa yang diperlukan agar dapat diinstal? membahas semua hal yang perlu Anda ketahui. Saat multitasking, PWA tampak terpisah dari browser.
Tindakan cepat di menu konteks
Tindakan aplikasi yang paling umum, Search untuk konten baru dan Check for New Episodes, tersedia langsung dari menu konteks aplikasi di Dok. Melalui menu Opsi, saya juga dapat memutuskan untuk membuka aplikasi pada saat login.
Dengan menentukan pintasan ikon aplikasi di manifes aplikasi web PWA, Anda dapat mendaftarkan rute cepat ke tugas umum yang dapat dijangkau pengguna langsung dari ikon aplikasi. Pada sistem operasi seperti macOS, pengguna juga dapat mengklik kanan ikon aplikasi dan menyetel aplikasi untuk diluncurkan pada waktu login. Terdapat pekerjaan yang sedang berlangsung terkait proposal untuk dijalankan saat login.
Bertindak sebagai aplikasi default
Aplikasi iOS lainnya, bahkan situs, atau email dapat terintegrasi dengan aplikasi Podcast dengan memanfaatkan skema URL podcasts://. Jika saya membuka link seperti podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903 saat berada di browser, saya akan langsung diarahkan ke aplikasi Podcast dan dapat memutuskan untuk berlangganan atau mendengarkan podcast.
Menangani skema URL kustom belum dapat dilakukan, tetapi ada pekerjaan berkelanjutan terkait proposal Penanganan Protokol URL untuk PWA. Saat ini, registerProtocolHandler() dengan awalan skema web+ adalah alternatif terbaik.
Integrasi sistem file lokal
Anda mungkin tidak langsung memikirkannya, tetapi aplikasi Podcast secara alami terintegrasi dengan sistem file lokal. Saat saya mendownload episode podcast, di laptop saya menyimpan episode tersebut dalam ~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache. Tidak seperti, misalnya ~/Documents, direktori ini tentu saja tidak dimaksudkan untuk diakses langsung oleh pengguna biasa, tetapi direktori ini ada di sana.
Mekanisme penyimpanan lain selain file dirujuk di bagian konten offline.
File System Access API memungkinkan developer mendapatkan akses ke sistem file lokal perangkat. Anda dapat menggunakannya secara langsung atau melalui support library browser-fs-access yang secara transparan memberikan fallback untuk browser yang tidak mendukung API. Untuk alasan keamanan, direktori sistem tidak dapat diakses dari web.
Tampilan dan nuansa platform
Ada hal lebih halus yang terlihat jelas untuk aplikasi iOS seperti Podcast: tidak ada label teks yang dapat dipilih dan semua teks menyatu dengan font sistem mesin. Selain itu, pilihan tema warna sistem (mode gelap) saya juga akan dipatuhi.
Dengan memanfaatkan properti CSS user-select dengan nilai none, Anda dapat melindungi elemen UI agar tidak dipilih secara tidak sengaja.
Namun, pastikan untuk tidak menyalahgunakan properti ini dengan membuat konten aplikasi tidak dapat dipilih.
Elemen ini hanya boleh digunakan untuk elemen UI seperti teks tombol, dll.
Nilai system-ui
untuk properti CSS font-family memungkinkan Anda
menentukan font UI default sistem yang akan digunakan untuk aplikasi Anda.
Terakhir, aplikasi Anda dapat mematuhi preferensi skema warna pengguna dengan mengikuti pilihan prefers-color-scheme mereka, dengan tombol mode gelap opsional
untuk menggantinya.
Hal lain yang perlu dipertimbangkan mungkin adalah apa yang harus dilakukan browser saat mencapai batas area scroll, misalnya, untuk menerapkan tarik untuk memuat ulang kustom.
Hal ini dapat dilakukan dengan properti CSS overscroll-behavior.
Panel judul khusus
Saat melihat jendela aplikasi Podcast, Anda melihat bahwa jendela aplikasi tidak memiliki panel judul dan toolbar klasik yang terintegrasi, seperti, misalnya, jendela browser Safari, tetapi pengalaman yang disesuaikan yang terlihat seperti sidebar yang terpasang di jendela pemutar utama.
Meskipun saat ini belum dapat dilakukan, penyesuaian panel judul sedang dilakukan.
Namun, Anda dapat (dan sebaiknya), menentukan properti display dan
theme-color dari manifes aplikasi web untuk
menentukan tampilan dan nuansa jendela aplikasi serta menentukan kontrol browser default mana—kemungkinan tidak ada satu pun—yang harus ditampilkan.
Animasi tajam
Animasi dalam aplikasi tampak ringkas dan lancar di Podcast. Misalnya, saat saya membuka panel samping Catatan Episode di sebelah kanan, panel akan bergeser masuk dengan elegan. Jika saya menghapus satu episode dari hasil download, episode yang tersisa akan muncul dan memakai ruang layar yang dibebaskan oleh episode yang dihapus.
Animasi berperforma tinggi di web dapat dimungkinkan jika Anda memperhitungkan sejumlah praktik terbaik yang diuraikan dalam artikel Animasi dan Performa. Animasi scroll seperti yang biasa terlihat di konten yang diberi nomor halaman atau carousel media dapat ditingkatkan secara signifikan menggunakan fitur Snap Scroll CSS. Untuk kontrol penuh, Anda dapat menggunakan Web Animations API.
Konten muncul di luar aplikasi
Aplikasi Podcast di iOS dapat menampilkan konten di lokasi selain aplikasi yang sebenarnya, misalnya, dalam tampilan Widget sistem, atau dalam bentuk Saran Siri. Pesan ajakan (CTA) berbasis penggunaan yang proaktif yang hanya memerlukan satu ketukan untuk berinteraksi dapat meningkatkan rasio re-engagement aplikasi seperti Podcast secara signifikan.
Content Index API memungkinkan aplikasi Anda memberi tahu browser konten PWA mana yang tersedia secara offline. Hal ini memungkinkan browser menampilkan konten ini di luar aplikasi utama. Dengan me-markup konten menarik di aplikasi Anda sebagai sesuai untuk pemutaran audio speakable dan dengan menggunakan markup terstruktur secara umum, Anda dapat membantu mesin telusur dan asisten virtual seperti Asisten Google menampilkan penawaran Anda dalam cahaya yang ideal.
Widget kontrol media layar kunci
Saat episode podcast diputar, aplikasi Podcast akan menampilkan widget kontrol yang menarik di layar kunci yang menampilkan metadata seperti poster episode, judul episode, dan nama podcast.
Media Session API memungkinkan Anda menentukan metadata seperti karya seni, judul trek, dll. yang kemudian ditampilkan di layar kunci, smartwatch, atau widget media lainnya di browser.
Notifikasi push
Notifikasi push menjadi sedikit mengganggu di web (meskipun permintaan notifikasi sekarang jauh lebih tenang). Namun, jika digunakan dengan benar, mereka dapat menambah banyak nilai. Misalnya, aplikasi Podcast iOS dapat memberi tahu saya tentang episode baru podcast langganan saya atau merekomendasikan episode baru, serta memberi tahu saya tentang fitur aplikasi baru.
Push API memungkinkan aplikasi menerima notifikasi push sehingga Anda dapat memberi tahu pengguna tentang peristiwa penting terkait PWA. Untuk notifikasi yang harus diaktifkan pada waktu yang diketahui di masa mendatang dan yang tidak memerlukan koneksi jaringan, Anda dapat menggunakan Notification Triggers API.
Badge ikon aplikasi
Setiap kali ada episode baru yang tersedia untuk salah satu podcast langganan saya, badge ikon aplikasi di ikon layar utama Podcast muncul, sekali lagi mendorong saya untuk berinteraksi kembali dengan aplikasi dengan cara yang tidak mengganggu.
Anda dapat menetapkan badge ikon aplikasi dengan Badging API. Hal ini sangat berguna saat PWA Anda memiliki beberapa gagasan tentang item yang "tidak dibaca" atau saat Anda membutuhkan cara untuk menarik perhatian pengguna kembali ke aplikasi secara tidak mencolok.
Pemutaran media lebih diprioritaskan daripada setelan penghemat energi
Ketika media podcast sedang diputar, layar mungkin akan mati, tetapi sistem tidak akan masuk ke mode standby. Aplikasi juga dapat membuat layar tetap aktif, misalnya untuk menampilkan lirik atau teks.
Screen Wake Lock API memungkinkan Anda mencegah layar nonaktif. Pemutaran media di web secara otomatis mencegah sistem masuk ke mode standby.
Penemuan aplikasi melalui app store
Meskipun aplikasi Podcast adalah bagian dari pengalaman desktop macOS, aplikasi harus diinstal dari App Store di iOS.
Penelusuran cepat untuk podcast, podcasts, atau apple podcasts akan langsung menampilkan aplikasi di App Store.
Meskipun Apple tidak mengizinkan PWA di App Store, di Android, Anda dapat mengirimkan PWA
yang digabungkan dalam Aktivitas Web Tepercaya.
Skrip bubblewrap menjadikannya operasi yang mudah.
Skrip ini juga mendukung fitur ekspor aplikasi Android PWABuilder secara internal, yang dapat Anda gunakan tanpa menyentuh command line.
Ringkasan fitur
Tabel di bawah menampilkan ringkasan ringkas tentang semua fitur dan menyediakan daftar referensi yang berguna untuk mewujudkannya di web.
Kesimpulan
PWA telah berkembang pesat sejak diperkenalkan pada tahun 2015. Dalam konteks Project Fugu 🐡, tim Chromium lintas perusahaan sedang berupaya menutup celah terakhir yang tersisa. Dengan mengikuti hanya beberapa saran dalam artikel ini, Anda dapat selangkah demi selangkah lebih dekat dengan perasaan seperti aplikasi itu dan membuat pengguna lupa bahwa mereka berurusan dengan "hanya situs web", karena, sejujurnya, kebanyakan dari mereka tidak peduli bagaimana aplikasi Anda dibuat (dan mengapa harus mereka?), selama itu terasa seperti aplikasi yang sebenarnya.
Ucapan terima kasih
Artikel ini ditinjau oleh Kayce Basques, Joe Medley, Joshua Bell, Dion Almaer, Ade Oshineye, Pete LePage, Sam ThoroJegood, Reilly Grantyss, dan