Membuat PWA Anda terasa lebih seperti sebuah aplikasi

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.

iPhone dan MacBook berdampingan, keduanya menjalankan aplikasi Podcast.
Apple Podcasts di iPhone dan macOS (Sumber).

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 menampilkan pesan info 'Tidak dapat tersambung saat ini' saat tidak ada koneksi jaringan.
Aplikasi podcast tanpa koneksi jaringan.
Cara melakukannya di web

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.

Aplikasi podcast dengan episode podcast yang didownload sedang diputar.
Episode podcast yang didownload dapat diputar bahkan tanpa jaringan.
Cara melakukannya di web

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.

Aplikasi Podcast mendownload episode terbaru podcast segera setelah berlangganan.
Setelah berlangganan podcast, episode terbaru akan langsung didownload.
Cara melakukannya di web

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.

Menu konteks aplikasi Podcast yang dipanggil pada episode podcast dengan opsi 'Bagikan Episode → Pesan' dipilih.
Membagikan episode podcast ke aplikasi Message.
Cara melakukannya di web

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.

Menu setelan aplikasi Podcast di bagian 'Umum' tempat opsi 'Muat Ulang Podcast' ditetapkan ke 'Setiap Jam'.
Podcast dikonfigurasi untuk memeriksa episode podcast baru setiap jam.
Cara melakukannya di web

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.

Menu setelan aplikasi Podcast di bagian 'Lanjutan' tempat opsi 'Sinkronkan langganan di seluruh perangkat' diaktifkan.
Status disinkronkan melalui cloud.
Cara melakukannya di web

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.

Keyboard Ajaib Apple MacBook Pro dengan tombol media yang dianotasi.
Tombol media memungkinkan pengontrolan aplikasi Podcast (Sumber).
Cara melakukannya di web

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.

Pengalih tugas macOS dengan sejumlah ikon aplikasi yang dapat dipilih, salah satunya aplikasi Podcast.
Melakukan multitasking kembali ke aplikasi Podcast.
Cara melakukannya di web

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.

Menu konteks ikon aplikasi Podcast yang menampilkan opsi 'Telusuri' dan 'Periksa Episode Baru'.
Tindakan cepat langsung tersedia dari ikon aplikasi.
Cara melakukannya di web

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.

Browser Chrome menampilkan dialog konfirmasi yang menanyakan kepada pengguna apakah mereka ingin membuka aplikasi Podcast.
Aplikasi Podcast dapat dibuka langsung dari browser.
Cara melakukannya di web

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.

macOS Finder membuka direktori sistem aplikasi Podcast.
Episode podcast disimpan dalam folder aplikasi sistem khusus.
Cara melakukannya di web

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.

Aplikasi Podcast dalam mode gelap.
Aplikasi Podcast mendukung mode terang dan gelap.
Aplikasi Podcast dalam mode terang.
Aplikasi menggunakan font sistem default.
Cara melakukannya di web

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.

Bilah alat dan bilah ubin yang terintegrasi dari browser Safari.
Panel judul terpisah yang disesuaikan untuk aplikasi Podcast.
Panel judul yang disesuaikan untuk Safari dan Podcast.
Cara melakukannya di web

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.

Aplikasi Podcast dengan panel samping 'Catatan Episode' diluaskan.
Animasi dalam aplikasi seperti saat membuka panel samping terlihat cepat.
Cara melakukannya di web

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.

Tampilan Widget iOS yang menampilkan aplikasi Podcast yang menyarankan episode baru dari podcast.
Konten aplikasi muncul di luar aplikasi Podcast utama.
Cara melakukannya di web

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.

Widget pemutaran media iOS di layar kunci yang menampilkan episode podcast dengan metadata lengkap.
Media yang diputar di aplikasi dapat dikontrol dari layar kunci.
Cara melakukannya di web

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.

Aplikasi Podcast iOS di layar setelan 'Notifikasi' yang menampilkan tombol notifikasi 'Episode Baru' diaktifkan.
Aplikasi dapat mengirimkan notifikasi push untuk memberi tahu pengguna tentang konten baru.
Cara melakukannya di web

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.

Layar setelan iOS menampilkan tombol 'Badge' yang diaktifkan.
Badge adalah cara sederhana yang digunakan aplikasi untuk memberi tahu pengguna tentang konten baru.
Cara melakukannya di web

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.

Preferensi macOS di bagian 'Energy Saver'.
Aplikasi dapat membuat layar tetap aktif.
Cara melakukannya di web

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.

Penelusuran 'podcast' di App Store iOS menampilkan aplikasi Podcast.
Pengguna telah belajar untuk menemukan aplikasi di app store.
Cara melakukannya di web

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.

Fitur Referensi yang berguna untuk melakukan hal ini di web
Mampu berjalan secara offline
Konten offline yang tersedia dan media yang dapat diputar
Download di latar belakang proaktif
Berbagi dan berinteraksi dengan aplikasi lain
Pemuatan ulang aplikasi latar belakang
Status disinkronkan melalui cloud
Kontrol tombol media hardware
Multitasking dan pintasan aplikasi
Tindakan cepat di menu konteks
Bertindak sebagai aplikasi default
Integrasi sistem file lokal
Tampilan dan nuansa platform
Panel judul yang disesuaikan
Animasi yang cepat
Konten yang muncul di luar aplikasi
Widget kontrol media layar kunci
Notifikasi push
Badge ikon aplikasi
Pemutaran media mengalahkan setelan penghemat energi
Penemuan aplikasi melalui app store

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