Akhir-akhir ini, banyak diskusi yang membahas Progressive Web App. Ini masih merupakan model yang relatif baru, tetapi prinsipnya dapat meningkatkan aplikasi yang dibuat dengan vanilla JS, React, Polymer, Angular, atau framework lainnya. Dalam postingan ini, saya akan merangkum beberapa opsi dan aplikasi referensi untuk memulai progressive web app Anda sendiri sekarang.
Apa yang dimaksud dengan Progressive Web App?
Perlu diingat bahwa Progressive Web Apps berfungsi di mana saja, tetapi lebih optimal di browser modern. Peningkatan progresif adalah tulang punggung model.
Aaron Gustafson menyamakan progressive enhancement dengan M&M kacang. Kacang adalah konten Anda, lapisan cokelat adalah lapisan presentasi Anda, dan JavaScript Anda adalah cangkang permen yang keras. Warna lapisan ini dapat bervariasi dan pengalamannya dapat bervariasi bergantung pada kemampuan browser yang menggunakannya.
Bayangkan candy shell sebagai tempat tinggal banyak fitur Progressive Web App. Progressive Web App adalah pengalaman yang menggabungkan yang terbaik dari web dan yang terbaik dari aplikasi. Pengalaman ini bermanfaat untuk pengguna dari kunjungan pertamanya di tab browser, tanpa harus melakukan pemasangan.
Saat pengguna membangun hubungan dengan aplikasi ini melalui penggunaan berulang, aplikasi tersebut akan membuat pengalaman pengguna menjadi lebih baik - dimuat dengan sangat cepat pada koneksi jaringan yang lambat (berkat pekerja layanan), mengirimkan Pemberitahuan Push yang relevan, dan memiliki ikon kelas satu di layar utama pengguna yang dapat memuat aplikasi sebagai pengalaman aplikasi layar penuh. Mereka juga dapat memanfaatkan spanduk penginstalan aplikasi web yang cerdas.
Progressive Web App adalah
- Progresif - Berfungsi untuk setiap pengguna, apa pun pilihan browser mereka karena dibangun dengan progressive enhancement sebagai konsep intinya.
- Responsif - Cocok dengan faktor bentuk apa pun, desktop, ponsel, tablet, atau apa pun yang akan datang.
- Konektivitas independen - Disempurnakan dengan service worker agar dapat bekerja offline atau di jaringan berkualitas rendah.
- Seperti aplikasi - Gunakan model shell aplikasi untuk menyediakan navigasi dan interaksi bergaya aplikasi.
- Segar - Selalu terkini berkat proses update service worker.
- Aman - Disediakan melalui TLS untuk mencegah snooping dan memastikan konten belum dirusak.
- Dapat ditemukan - Dapat diidentifikasi sebagai “aplikasi” berkat manifes W3C dan cakupan pendaftaran pekerja layanan yang memungkinkan mesin telusur menemukannya.
- Dapat dilibatkan kembali - Kemudahan untuk melibatkan kembali dengan fitur seperti notifikasi push.
- Dapat diinstal - Memungkinkan pengguna untuk “menyimpan” aplikasi yang mereka anggap paling berguna di layar utama tanpa perlu repot menggunakan app store.
- Dapat ditautkan - Mudah dibagikan melalui URL dan tidak memerlukan pemasangan yang rumit.
Progressive Web App juga tidak unik untuk Chrome untuk Android. Di bawah ini, kita dapat melihat Progressive Web App Pokedex yang berfungsi di Firefox untuk Android (Beta) dengan fitur Tambahkan ke layar utama dan cache service worker awal yang berjalan dengan baik.
Salah satu aspek bagus dari sifat "progresif" pada model ini adalah fitur dapat diaktifkan secara bertahap saat vendor browser mengirimkan dukungan yang lebih baik untuk fitur tersebut. Progressive Web App seperti Pokedex juga berfungsi dengan baik di Opera pada Android dengan beberapa perbedaan yang penting dalam penerapannya:
Untuk mempelajari Progressive Web App secara lebih mendalam, baca postingan blog asli Alex Russell yang memperkenalkan mereka. Paul Kinlan juga memulai tag Stack Overflow yang sangat berguna untuk Progressive Web App yang patut dicoba.
Prinsip
Manifes aplikasi web
Manifes memungkinkan aplikasi web Anda memiliki kehadiran yang lebih mirip dengan aplikasi native di layar utama pengguna. Hal ini memungkinkan aplikasi diluncurkan dalam mode layar penuh (tanpa adanya kolom URL), memberikan kontrol atas orientasi layar, dan dalam versi Chrome terbaru di Android mendukung penentuan Layar Pembuka dan warna tema untuk kolom URL. IPS juga digunakan untuk mendefinisikan sekumpulan ikon berdasarkan ukuran dan kepadatan yang digunakan untuk ikon layar pembuka dan layar beranda 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 praktis yang layak dilihat.
Dalam project pribadi, saya mengandalkan realfavicongenerator untuk membuat ikon dengan ukuran yang benar 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.) mendukung manifes aplikasi web saat ini 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 sejak beberapa waktu lalu, tetapi versi terbaru juga mendukung saran proaktif untuk menambahkan situs menggunakan spanduk 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 service worker yang valid dan terdaftar
- Dikunjungi dua kali, dengan jarak waktu setidaknya 5 menit antar kunjungan
Sejumlah contoh banner Instal Aplikasi tersedia, yang mencakup banner dasar hingga kasus penggunaan yang lebih kompleks seperti menampilkan aplikasi terkait.
Pekerja layanan untuk penyimpanan ke cache offline
Service worker adalah skrip yang berjalan di latar belakang, terpisah dari halaman web Anda. Fungsi ini merespons peristiwa, termasuk permintaan jaringan yang dibuat dari halaman yang ditayangkannya. Pekerja layanan sengaja memiliki masa pakai singkat.
Fungsi ini aktif saat mendapatkan 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.
Pekerja layanan sangat berguna untuk caching offline dan juga menawarkan peningkatan performa yang signifikan dalam bentuk pemuatan instan untuk kunjungan berulang ke situs atau aplikasi web Anda. Anda dapat meng-cache shell aplikasi agar dapat berfungsi secara offline dan mengisi kontennya menggunakan JavaScript.
Kumpulan contoh service worker yang komprehensif tersedia di contoh Google Chrome. Cookbook offline Jake Archibald adalah bacaan wajib dan saya sangat merekomendasikan untuk mencoba panduan aplikasi web offline pertama Anda dari Paul Kinlan jika Anda baru menggunakan pekerja layanan.
Tim kami juga mengelola sejumlah utilitas helper dan alat build pekerja layanan yang menurut kami berguna untuk mengurangi overhead dalam menyiapkan pekerja layanan. Pustaka tersebut tercantum di Pustaka Service Worker. Dua hal utama adalah:
- sw-precache: alat build-time yang menghasilkan skrip service worker yang berguna untuk melakukan precache shell aplikasi web Anda
- sw-toolbox: library yang menyediakan cache runtime untuk resource yang jarang digunakan
Jeff Posnick menulis pengantar 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 dengan Edge memiliki sinyal publik positif tentang minat pada fitur tersebut. Safari secara singkat menyebutkan minatnya melalui rencana lima tahun yang diusulkan oleh seorang engineer.
Notifikasi push untuk re-engagement
Secara efektif, Anda bisa membangun aplikasi web yang dapat diakses pengguna di luar tab. Browser dapat ditutup dan pengguna bahkan tidak perlu aktif menggunakan aplikasi web Anda untuk berinteraksi dengan pengalaman Anda. Fitur ini memerlukan pekerja layanan dan manifes aplikasi web, yang dibuat berdasarkan beberapa fitur yang diringkas sebelumnya.
Push API diterapkan 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.
Push Notifications on the Open Web adalah pengantar komprehensif untuk menyiapkan Push oleh Matt Gaunt dan codelab Push Notifications juga tersedia di Web Fundamentals.
Michael van Ouwerkerk dari tim Chrome juga memiliki pengantar berdurasi 6 menit tentang Push jika Anda lebih menyukai video.
Menambahkan lapisan fitur lanjutan
Ingat, pengalaman pengguna Anda dapat memiliki tingkat manis yang berbeda-beda, bergantung pada browser yang digunakan untuk melihat aplikasi web Anda. Anda yang mengontrol cangkang permen keras.
Fitur tambahan yang akan hadir di platform web, seperti Sinkronisasi Latar Belakang (untuk sinkronisasi data dengan server bahkan saat aplikasi web Anda ditutup) dan Bluetooth Web (untuk berbicara dengan perangkat Bluetooth dari aplikasi web Anda) juga dapat ditambahkan 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 menghentikan Anda untuk menerapkan prinsip-prinsip di atas ke aplikasi atau kerangka kerja yang sedang Anda bangun. Beberapa prinsip lain yang perlu diingat saat mem-build Progressive Web App adalah model performa yang berfokus pada pengguna RAIL dan animasi berbasis FLIP.
Saya berharap selama tahun 2016, kita akan melihat peningkatan jumlah boilerplate dan project inti yang disiapkan secara organik untuk mendukung Progressive Web App sebagai fitur inti. Sampai saat itu, hambatan untuk menambahkan fitur ini ke aplikasi Anda sendiri tidak terlalu tinggi dan IMHO, cukup sepadan dengan usahanya.
Arsitektur
Ada berbagai tingkat "all-in" yang digunakan pada model Progressive Web App, tetapi salah satu pendekatan umum yang dilakukan adalah merancangnya di sekitar Shell Aplikasi. Ini bukan persyaratan mutlak, tetapi memiliki beberapa manfaat.
Arsitektur Shell Aplikasi mendorong penyimpanan dalam cache shell aplikasi Anda (Antarmuka Pengguna) sehingga dapat berfungsi secara offline dan mengisi kontennya menggunakan JavaScript. Pada kunjungan berulang, hal ini memungkinkan Anda menampilkan piksel yang penting di layar dengan sangat cepat tanpa jaringan, meskipun pada akhirnya konten Anda berasal dari jaringan tersebut. Hal ini disertai dengan peningkatan performa yang signifikan.
Jeremy Keith baru-baru ini mengomentari bahwa dalam jenis model ini, rendering sisi server mungkin tidak boleh dilihat sebagai penggantian, tetapi rendering sisi klien harus dilihat sebagai peningkatan. Ini adalah masukan yang adil.
Dalam model Application Shell, rendering sisi server harus digunakan sebanyak mungkin dan rendering progresif sisi klien harus digunakan sebagai peningkatan kualitas dengan cara yang sama seperti kita "meningkatkan" pengalaman saat pekerja layanan didukung. Ada banyak cara untuk melakukannya.
Sebaiknya baca artikel kami tentang arsitektur dan evaluasi bagaimana prinsip serupa dapat diterapkan dengan sebaik mungkin ke aplikasi dan stack Anda sendiri.
Boilerplate memulai
Shell aplikasi
Repositori app-shell berisi implementasi arsitektur Application Shell yang hampir lengkap. Aplikasi ini memiliki backend yang ditulis dalam Express.js dan frontend yang ditulis dalam ES2015.
Mengingat bahwa kode ini mencakup bagian sisi klien dan server, serta ada banyak hal yang terjadi di sana, Anda perlu meluangkan waktu untuk memahami codebase. Jika tidak, ini adalah titik awal Progressive Web App kami yang paling komprehensif. Dokumen akan menjadi fokus kami berikutnya untuk proyek ini.
Kit awal Polymer
Titik awal resmi untuk aplikasi web Polymer mendukung fitur Progressive Web App berikut:
- Manifes Aplikasi Web
- Layar Splash Chrome untuk Android
- Cache offline pekerja layanan dengan elemen Platinum SW
- Notifikasi Push (penyiapan manual diperlukan) dengan elemen Push Platinum
Versi PSK saat ini tidak mendukung beberapa pola performa yang lebih canggih (mis.model Application Shell, pemuatan asinkron) yang Anda temukan di beberapa aplikasi web Progressive Polymer.
Kami ingin mencoba menerapkan pola ini ke PSK di tahun 2016, tetapi eksperimen awal seputar hal ini dapat ditemukan di aplikasi Polymer Zuperkulblog oleh Rob Dodson dan pembahasan Polymer Perf Patterns yang luar biasa oleh Eric Bidelman.
Web Starter Kit
Titik awal yang kami pilih untuk project vanilla baru mencakup fitur Progressive Web App berikut:
- Manifes Aplikasi Web
- Layar Pembuka Chrome untuk Android
- Pra-cache pekerja layanan berkat sw-precache
Jika Anda lebih suka menggunakan JS/ES2015 vanilla dan tidak dapat menggunakan Polymer, Web Starter Kit mungkin berguna sebagai titik referensi yang dapat Anda gunakan kembali atau dari mana Anda dapat mencuri cuplikan kode.
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 mencari inspirasi, repo di bawah mungkin berguna sebagai referensi. Mereka juga merupakan aplikasi yang sangat bagus.
JavaScript Vanilla
- Voice Memos oleh Paul Lewis dibuat menggunakan arsitektur yang mirip dengan
app-shell(tulisan ulang) - Offline Wikipedia oleh Jake Archibald (video)
- Air Horner oleh Paul Kinlan
- Guitar Tuner oleh Paul Lewis (tulisan)
Polymer
- Zuperkulblog oleh Rob Dodson (slide)
React
Virtual-DOM
- Pokedex oleh Nolan Lawson - aplikasi web progresif yang sangat baik yang menerapkan pendekatan "lakukan semuanya di pekerja web" untuk membantu rendering progresif. (tulisan)
Angular.js
- Timey.in oleh Kenneth Auchenberg - juga menggunakan
sw-precacheuntuk pra-cache resource
Catatan penutup
Seperti yang disebutkan, Progressive Web App masih dalam tahap awal, tetapi ini adalah waktu yang tepat untuk mencoba metodologi di baliknya dan melihat seberapa baik metodologi tersebut dapat diterapkan ke aplikasi web Anda sendiri.
Paul Kinlan saat ini merencanakan panduan Dasar-Dasar Web tentang Progressive Web App dan jika Anda memiliki masukan tentang bidang yang ingin dibahas, jangan ragu untuk mengomentari rangkaian pesan.
Bacaan lebih lanjut
- Progressive Web App: Keluar dari Tab Tanpa Kehilangan Jiwa
- Alasan Progressive Web App Adalah Masa Depan Pengembangan Web
- Progressive Web App: siap untuk primetime
- Membuat Progressive App dengan ServiceWorker
- Progressive Web App adalah Masa Depan
- Progressive Web App: Cara Baru untuk Mengalami Perangkat Seluler
- Memperkenalkan Pokedex.org: aplikasi web progresif untuk penggemar Pokémon
- Rekap Chrome Developer Summit: Progressive Web App