Akhir-akhir ini, ada banyak diskusi yang menarik tentang Progressive Web App. Meskipun masih merupakan model yang relatif baru, prinsipnya dapat meningkatkan kualitas aplikasi yang dibuat dengan vanilla JS, React, Polymer, Angular, atau framework lainnya. Dalam postingan ini, saya akan merangkum beberapa opsi dan aplikasi referensi untuk mulai menggunakan progressive web app Anda sendiri sekarang.
Apa yang dimaksud dengan Progressive Web App?
Penting untuk diingat bahwa Progressive Web App berfungsi di mana saja, tetapi dioptimalkan di browser modern. Progressive enhancement adalah tulang punggung model.
Aaron Gustafson mengibaratkan progressive enhancement seperti permen cokelat kacang M&M. Kacang adalah konten Anda, lapisan cokelat adalah lapisan presentasi, dan JavaScript adalah lapisan permen keras. Lapisan ini dapat bervariasi dalam warna dan pengalamannya dapat bervariasi bergantung pada kemampuan browser yang menggunakannya.
Anggap cangkang permen sebagai tempat berbagai fitur Progressive Web App dapat berada. PWA adalah pengalaman yang menggabungkan keunggulan web dan aplikasi. Aplikasi ini berguna bagi pengguna sejak kunjungan pertama di tab browser, tanpa perlu diinstal.
Saat pengguna membangun hubungan dengan aplikasi ini melalui penggunaan berulang, mereka membuat lapisan permen menjadi lebih manis - memuat dengan sangat cepat pada koneksi jaringan yang lambat (berkat service worker), mengirimkan Notifikasi Push yang relevan, dan memiliki ikon kelas satu di layar utama pengguna yang dapat memuatnya sebagai pengalaman aplikasi layar penuh. Mereka juga dapat memanfaatkan banner penginstalan aplikasi web yang cerdas.
Progressive Web App adalah
- Progresif - Berfungsi untuk setiap pengguna, apa pun pilihan browsernya karena dibuat dengan progressive enhancement sebagai prinsip inti.
- Responsif - Sesuai dengan faktor bentuk apa pun, desktop, seluler, tablet, atau apa pun yang akan datang.
- Independen terhadap konektivitas - Ditingkatkan dengan pekerja layanan untuk bekerja secara offline atau di jaringan berkualitas rendah.
- Seperti aplikasi - Gunakan model app shell untuk menyediakan navigasi dan interaksi bergaya aplikasi.
- Baru - Selalu terbaru berkat proses update service worker.
- Aman - Ditayangkan melalui TLS untuk mencegah pengintaian dan memastikan konten belum diubah.
- Dapat ditemukan - Dapat diidentifikasi sebagai “aplikasi” berkat manifes W3C dan cakupan pendaftaran pekerja layanan yang memungkinkan mesin telusur menemukannya.
- Dapat dijangkau kembali - Memudahkan engagement ulang melalui fitur seperti notifikasi push.
- Dapat diinstal - Memungkinkan pengguna “menyimpan” aplikasi yang menurut mereka paling berguna di layar utama tanpa repot menggunakan app store.
- Dapat ditautkan - Bagikan dengan mudah melalui URL dan tidak memerlukan penginstalan yang rumit.
Progressive Web App juga tidak hanya tersedia di Chrome untuk Android. Di bawah ini, kita dapat melihat Progressive Web App Pokedex berfungsi di Firefox untuk Android (Beta) dengan fitur awal Tambahkan ke layar utama dan caching pekerja layanan yang berjalan dengan baik.
Salah satu aspek positif dari sifat "progresif" model ini adalah fitur dapat dibuka secara bertahap seiring vendor browser memberikan dukungan yang lebih baik untuk fitur tersebut. Progressive Web App seperti Pokedex tentu saja juga berfungsi dengan baik di Opera di Android dengan beberapa perbedaan penting dalam penerapannya:
Untuk mempelajari Progressive Web App lebih dalam, baca postingan blog asli Alex Russell yang memperkenalkannya. Paul Kinlan juga memulai tag Stack Overflow yang sangat berguna untuk Progressive Web App yang layak untuk dicoba.
Prinsip
Manifes aplikasi web
Manifes memungkinkan aplikasi web Anda memiliki tampilan yang lebih mirip aplikasi native di layar utama pengguna. Hal ini memungkinkan aplikasi diluncurkan dalam mode layar penuh (tanpa kolom URL), memberikan kontrol atas orientasi layar, dan di versi Chrome terbaru di Android, mendukung penentuan Layar Pembuka dan warna tema untuk kolom URL. Elemen ini juga digunakan untuk menentukan kumpulan ikon berdasarkan ukuran dan kepadatan yang digunakan untuk ikon Layar pembuka dan layar utama yang disebutkan di atas.
Contoh file manifes dapat ditemukan di Web Starter Kit dan di contoh Google Chrome. Bruce Lawson menulis Manifest Generator dan Mounir Lamouri juga telah menulis validator Manifes Web yang praktis dan layak untuk dicoba.
Dalam project pribadi, saya mengandalkan realfavicongenerator untuk membuat ikon dengan ukuran yang tepat untuk manifes aplikasi web dan untuk digunakan di iOS, desktop, dan sebagainya. Modul Node favicons juga dapat mencapai output yang serupa sebagai bagian dari proses build Anda.
Browser berbasis Chromium (Chrome, Opera, dll.) saat ini mendukung manifes aplikasi web, dengan Firefox yang secara aktif mengembangkan dukungan dan Edge mencantumkannya sebagai sedang dipertimbangkan. WebKit/Safari belum memposting sinyal publik tentang niat mereka untuk menerapkan fitur ini.
Untuk mengetahui detail selengkapnya, baca Aplikasi Web yang Dapat Diinstal dengan Manifes Aplikasi Web di Chrome untuk Android di Dasar-Dasar Web.
Banner "Tambahkan ke Layar Utama"
Chrome di Android telah mendukung penambahan situs Anda ke layar utama selama beberapa waktu, tetapi versi terbaru juga mendukung saran proaktif untuk menambahkan situs menggunakan banner penginstalan Aplikasi Web native.
Agar perintah instal aplikasi ditampilkan, aplikasi Anda harus:
- Memiliki manifes aplikasi web yang valid
- Disajikan melalui HTTPS (lihat letsencrypt untuk mendapatkan sertifikat gratis)
- Memiliki pekerja layanan yang valid dan terdaftar
- Dikunjungi dua kali, dengan jeda minimal 5 menit di antara kunjungan
Tersedia sejumlah contoh banner Instal Aplikasi, yang mencakup banner dasar hingga kasus penggunaan yang lebih kompleks seperti menampilkan aplikasi terkait.
Service worker untuk caching offline
Service worker adalah skrip yang berjalan di latar belakang, terpisah dari halaman web Anda. Service worker merespons peristiwa, termasuk permintaan jaringan yang dibuat dari halaman yang ditayangkan. Service worker memiliki masa aktif yang sengaja dibuat singkat.
Fungsi ini aktif saat menerima peristiwa dan hanya berjalan selama diperlukan untuk memprosesnya. Service worker memungkinkan Anda menggunakan Cache API untuk meng-cache resource dan dapat digunakan untuk memberikan pengalaman offline kepada pengguna.
Service worker sangat efektif untuk caching offline, tetapi juga menawarkan peningkatan performa yang signifikan dalam bentuk pemuatan instan untuk kunjungan berulang ke situs atau aplikasi web Anda. Anda dapat meng-cache application shell agar berfungsi secara offline dan mengisi kontennya menggunakan JavaScript.
Serangkaian lengkap contoh pekerja layanan tersedia di contoh Google Chrome. Offline cookbook dari Jake Archibald wajib dibaca dan kami sangat merekomendasikan untuk mencoba panduan aplikasi web offline pertama Anda dari Paul Kinlan jika Anda baru mengenal pekerja layanan.
Tim kami juga mengelola sejumlah utilitas bantuan pekerja layanan dan alat build yang kami anggap berguna untuk mengurangi overhead dalam menyiapkan pekerja layanan. Library tersebut tercantum di Library Service Worker. Dua yang utama adalah:
- sw-precache: alat waktu build yang menghasilkan skrip service worker yang berguna untuk melakukan precache pada shell aplikasi web Anda
- sw-toolbox: library yang menyediakan penyimpanan cache runtime untuk resource yang jarang digunakan
Jeff Posnick menulis panduan singkat tentang sw-precache yang disebut Offline-first, fast, with the sw-precache module dan codelab tentang alat yang sama yang mungkin berguna bagi Anda.
Chrome, Opera, dan Firefox telah menerapkan dukungan untuk pekerja layanan, sedangkan Edge memiliki sinyal publik yang positif terkait minat terhadap fitur ini. Safari sempat menyebutkan minatnya terhadap hal ini melalui rencana lima tahun yang diusulkan oleh salah satu engineer.
Notifikasi push untuk re-engagement
Secara efektif, Anda dapat membangun aplikasi web yang dapat digunakan pengguna di luar tab. Browser dapat ditutup dan pengguna bahkan tidak perlu menggunakan aplikasi web Anda secara aktif untuk berinteraksi dengan pengalaman Anda. Fitur ini memerlukan pekerja layanan dan manifes aplikasi web, yang dibuat berdasarkan beberapa fitur yang diringkas sebelumnya.
Push API diimplementasikan di Chrome, sedang dalam pengembangan di Firefox, dan sedang dipertimbangkan di Edge. Belum ada sinyal publik dari Safari tentang niat mereka untuk menerapkan fitur ini.
Notifikasi Push di Web Terbuka adalah pengantar komprehensif untuk menyiapkan Push oleh Matt Gaunt dan codelab Notifikasi Push juga tersedia di Dasar-Dasar Web.
Michael van Ouwerkerk dari tim Chrome juga memiliki pengantar Push berdurasi 6 menit jika Anda lebih menyukai video.
Menambahkan fitur lanjutan
Ingat, pengalaman pengguna Anda dapat memiliki tingkat kemanisan yang berbeda bergantung pada browser yang digunakan untuk melihat aplikasi web Anda. Anda yang mengontrol lapisan permen kerasnya.
Fitur tambahan yang akan hadir di platform web seperti Sinkronisasi Latar Belakang (untuk sinkronisasi data dengan server meskipun aplikasi web Anda ditutup) dan Web Bluetooth (untuk berkomunikasi dengan perangkat Bluetooth dari aplikasi web Anda) juga dapat dilapisi ke Progressive Web App Anda dengan cara ini.
Sinkronisasi Latar Belakang satu kali telah diaktifkan di Chrome dan Jake Archibald memiliki video tentang aplikasi Wikipedia offline dan artikel yang menunjukkan cara kerjanya. François Beaufort juga memiliki sejumlah contoh Web Bluetooth yang tersedia jika Anda tertarik untuk mencoba API tersebut.
Ramah framework
Tidak ada yang menghalangi Anda untuk menerapkan prinsip-prinsip di atas ke aplikasi atau framework yang sudah ada yang Anda gunakan untuk membangun. Beberapa prinsip lain yang perlu diingat saat membangun Progressive Web App adalah model performa yang berfokus pada pengguna RAIL dan animasi berbasis FLIP.
Saya berharap bahwa selama tahun 2016, kita akan melihat peningkatan jumlah boilerplate dan project awal yang secara organik mendukung Progressive Web App sebagai fitur inti. Sebelum itu, hambatan untuk menambahkan fitur ini ke aplikasi Anda sendiri tidak terlalu tinggi dan menurut saya, cukup sepadan dengan usahanya.
Arsitektur
Ada berbagai tingkat "all-in" yang digunakan dalam model Progressive Web App, tetapi salah satu pendekatan umum yang diambil adalah merancangnya di sekitar Application Shell. Hal ini bukan persyaratan mutlak, tetapi memberikan beberapa manfaat.
Arsitektur Application Shell mendorong penyimpanan ke cache shell aplikasi Anda (Antarmuka Pengguna) sehingga berfungsi secara offline dan mengisi kontennya menggunakan JavaScript. Pada kunjungan berulang, hal ini memungkinkan Anda mendapatkan piksel yang bermakna di layar dengan sangat cepat tanpa jaringan, meskipun konten Anda pada akhirnya berasal dari sana. Hal ini memberikan peningkatan performa yang signifikan.
Jeremy Keith baru-baru ini berkomentar bahwa dalam jenis model ini, mungkin rendering sisi server tidak boleh dilihat sebagai pengganti, tetapi rendering sisi klien harus dilihat sebagai peningkatan. Masukan ini wajar.
Dalam model Application Shell, rendering sisi server harus digunakan sebanyak mungkin dan rendering progresif sisi klien harus digunakan sebagai peningkatan dengan cara yang sama seperti kita "meningkatkan" pengalaman saat pekerja layanan didukung. Ada banyak cara untuk melakukan pendekatan ini.
Sebaiknya baca artikel kami tentang arsitektur dan evaluasi bagaimana prinsip serupa dapat diterapkan dengan baik pada aplikasi dan stack Anda sendiri.
Boilerplate untuk memulai
Application shell
Repositori app-shell berisi implementasi arsitektur Application Shell yang hampir lengkap. Aplikasi ini memiliki backend yang ditulis dalam Express.js dan front-end yang ditulis dalam ES2015.
Mengingat bahwa model ini mencakup bagian sisi klien dan sisi server serta ada banyak hal yang terjadi di sana, perlu waktu untuk memahami codebase-nya. Jika tidak, ini adalah titik awal Progressive Web App kami yang paling komprehensif saat ini. Dokumen akan menjadi fokus kami berikutnya untuk project ini.
Starter kit Polymer
Titik awal resmi untuk aplikasi web Polymer mendukung fitur Progressive Web App berikut:
- Manifes Aplikasi Web
- Layar Pembuka Chrome untuk Android
- Caching offline service worker dengan elemen Platinum SW
- Notifikasi Push (perlu penyiapan manual) dengan elemen Platinum Push
Versi PSK saat ini tidak mendukung beberapa pola performa yang lebih canggih (misalnya, model Application Shell, pemuatan asinkron) yang Anda temukan di beberapa aplikasi web Progressive Polymer.
Kami berencana untuk mencoba menerapkan pola ini ke PSK pada tahun 2016, tetapi eksperimen awal terkait hal ini dapat ditemukan di aplikasi Polymer Zuperkulblog oleh Rob Dodson dan presentasi Polymer Perf Patterns yang luar biasa oleh Eric Bidelman.
Web Starter Kit
Titik awal kami yang berpendirian untuk project vanilla baru mencakup fitur Progressive Web App berikut:
- Manifes Aplikasi Web
- Layar Pembuka Chrome untuk Android
- Pra-cache service worker berkat sw-precache
Jika Anda lebih suka menggunakan vanilla JS/ES2015 dan tidak dapat menggunakan Polymer, Web Starter Kit dapat berguna sebagai titik referensi yang dapat Anda gunakan kembali atau ambil cuplikan kodenya.
Progressive Web App dengan dan tanpa framework
Sejumlah Progressive Web App open source telah dibuat oleh anggota komunitas, baik dengan maupun tanpa library dan framework JS. Jika Anda sedang mencari inspirasi, repositori di bawah mungkin berguna sebagai referensi. Aplikasi ini juga sangat bagus.
Vanilla JavaScript
- Voice Memos oleh Paul Lewis dibuat menggunakan arsitektur yang mirip dengan
app-shell(artikel) - Wikipedia Offline oleh Jake Archibald (video)
- Air Horner oleh Paul Kinlan
- Guitar Tuner oleh Paul Lewis (artikel)
Polymer
- Zuperkulblog oleh Rob Dodson (slide)
React
DOM Virtual
- Pokedex oleh Nolan Lawson - progressive web app yang sangat baik yang menerapkan pendekatan "lakukan semuanya di web worker" untuk membantu rendering progresif. (laporan)
Angular.js
- Timey.in oleh Kenneth Auchenberg - juga menggunakan
sw-precacheuntuk pra-cache resource
Catatan penutup
Seperti yang telah disebutkan, Progressive Web App masih dalam tahap awal, tetapi ini adalah saat yang tepat untuk mencoba metodologi di baliknya dan melihat seberapa baik metodologi tersebut dapat diterapkan ke aplikasi web Anda sendiri.
Paul Kinlan saat ini sedang merencanakan panduan Dasar-Dasar Web tentang Progressive Web App dan jika Anda memiliki masukan tentang area yang ingin Anda bahas, silakan beri komentar di rangkaian pesan.
Bacaan lebih lanjut
- Progressive Web App: Keluar dari Tab Tanpa Kehilangan Jiwa Kita
- Why Progressive Web Apps Are The Future Of Web Development
- Progressive Web App: siap untuk primetime
- Membuat Aplikasi Progresif dengan ServiceWorker
- Progressive Web App Adalah Masa Depan
- Progressive Web App: Cara Baru untuk Menggunakan Perangkat Seluler
- Memperkenalkan Pokedex.org: aplikasi web progresif untuk penggemar Pokémon
- Rekap Chrome Developer Summit: Progressive Web App