Akhir-akhir ini, ada banyak diskusi tentang Progressive Web App. Model tersebut masih relatif baru, tetapi prinsipnya juga dapat meningkatkan kualitas aplikasi yang dibangun dengan JS vanila, React, Polymer, Angular, atau framework lainnya. Dalam postingan ini, saya akan merangkum beberapa opsi dan aplikasi referensi untuk memulai progressive web app Anda sendiri saat ini.
Apa itu Progressive Web App?
Perlu diingat bahwa Progressive Web App dapat digunakan di mana saja, tetapi ditingkatkan kualitasnya di browser modern. Progressive enhancement 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 candy shell-shell. Lapisan ini dapat bervariasi dalam warna dan pengalaman dapat bervariasi tergantung pada kemampuan browser yang menggunakannya.
Bayangkan candy shell ini sebagai tempat tinggal banyak fitur Progressive Web App. Pengalaman iklan ini menggabungkan yang terbaik dari web dan yang terbaik dari aplikasi. Hal ini berguna bagi pengguna sejak kunjungan pertama di tab browser, tidak perlu penginstalan.
Saat pengguna membangun hubungan dengan aplikasi ini melalui penggunaan berulang, mereka membuat candy shell semakin manis - dimuat dengan sangat cepat pada koneksi jaringan yang lambat (berkat pekerja layanan), 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 instal aplikasi web yang cerdas.
Progressive Web App adalah
- Progresif - Berfungsi untuk setiap pengguna, apa pun pilihan browsernya, karena dibuat dengan progressive enhancement sebagai tenant inti.
- Responsif - Sesuai dengan faktor bentuk, desktop, seluler, tablet, atau apa pun yang ada berikutnya.
- Konektivitas independen - Disempurnakan dengan pekerja layanan agar dapat bekerja secara offline atau pada jaringan berkualitas rendah.
- Seperti aplikasi - Menggunakan model shell aplikasi untuk memberikan navigasi dan interaksi gaya aplikasi.
- Baru - Selalu terbaru berkat proses update pekerja layanan.
- 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.
- Berinteraksi kembali - Permudah interaksi kembali melalui fitur seperti notifikasi push.
- Dapat diinstal - Memungkinkan pengguna untuk “menyimpan” aplikasi yang menurut mereka paling berguna di layar utama tanpa perlu repot dengan app store.
- Dapat ditautkan - Dapat dibagikan dengan mudah melalui URL dan tidak memerlukan penginstalan 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 penyimpanan cache Tambahkan ke layar utama dan pekerja layanan awal berjalan dengan baik.
Salah satu aspek bagus dari sifat "progresif" pada model ini adalah fitur dapat dibuka secara bertahap saat vendor browser mengirimkan dukungan yang lebih baik untuk model ini. Progressive Web App seperti Pokedex juga tentu saja berfungsi dengan baik di Opera di Android juga dengan beberapa perbedaan menonjol 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 patut dicoba.
Prinsip
Manifes aplikasi web
Manifes memungkinkan aplikasi web Anda memiliki kehadiran yang lebih mirip native di layar beranda pengguna. Hal ini memungkinkan aplikasi diluncurkan dalam mode layar penuh (tanpa kolom URL), memberikan kontrol atas orientasi layar, dan dalam versi Chrome terbaru di Android mendukung penentuan Layar Pembuka dan warna tema untuk kolom URL. Atribut ini juga digunakan untuk menentukan kumpulan ikon berdasarkan ukuran dan kepadatan yang digunakan untuk Layar pembuka dan ikon layar utama yang disebutkan di atas.
Contoh file manifes dapat ditemukan di Web Starter Kit dan di sampel Google Chrome. Bruce Lawson menulis Generator Manifes dan Mounir Lamouri juga telah menulis validator Manifes Web praktis yang layak untuk dilihat.
Dalam project pribadi, saya mengandalkan realfavicongenerator untuk membuat ikon dengan ukuran yang tepat bagi manifes aplikasi web dan untuk digunakan di iOS, desktop, dan sebagainya. Modul Node favicons juga dapat mencapai output serupa sebagai bagian dari proses build Anda.
Browser berbasis Chromium (Chrome, Opera, dll.) saat ini mendukung manifes aplikasi web. Firefox secara aktif mengembangkan dukungan dan Edge mencantumkannya sebagai dalam pertimbangan. WebKit/Safari belum memposting sinyal publik tentang intent mereka untuk menerapkan fitur tersebut.
Untuk mengetahui detail selengkapnya, baca Aplikasi Web yang Dapat Diinstal dengan Manifes Aplikasi Web di Chrome untuk Android tentang Dasar-Dasar Web.
Banner "Tambahkan ke Layar Utama"
Chrome di Android mendukung penambahan situs Anda ke layar utama untuk sementara waktu, tetapi versi terbaru juga mendukung secara proaktif saran situs yang ditambahkan menggunakan banner instal Aplikasi Web native.
Agar dialog penginstalan aplikasi menampilkan aplikasi Anda harus:
- Memiliki manifes aplikasi web yang valid
- Disajikan melalui HTTPS (lihat letsencrypt untuk sertifikat gratis)
- Memiliki pekerja layanan yang valid dan telah terdaftar
- Dikunjungi dua kali, dengan setidaknya 5 menit antarkunjungan
Tersedia sejumlah contoh banner Penginstalan Aplikasi, yang mencakup banner dasar hingga kasus penggunaan yang lebih kompleks seperti menampilkan aplikasi terkait.
Pekerja layanan untuk penyimpanan cache offline
Pekerja layanan adalah skrip yang berjalan di latar belakang, terpisah dari halaman web Anda. Layanan ini merespons peristiwa, termasuk permintaan jaringan yang dibuat dari halaman yang dilayaninya. Service worker sengaja memiliki masa aktif singkat.
Metode ini aktif saat mendapatkan peristiwa dan hanya berjalan selama diperlukan untuk memprosesnya. Pekerja layanan memungkinkan Anda menggunakan Cache API untuk meng-cache resource dan dapat digunakan untuk memberikan pengalaman offline kepada pengguna.
Service worker sangat ampuh untuk menyimpan cache secara offline, tetapi juga menawarkan keunggulan 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 pekerja layanan yang lengkap tersedia di beberapa contoh Google Chrome. Buku resep offline Jake Archibald adalah bacaan yang harus dibaca dan saya sangat menyarankan untuk mencoba panduan aplikasi web offline pertama Anda dari Paul Kinlan jika Anda baru mengenal pekerja layanan.
Tim kami juga mengelola sejumlah utilitas pembantu pekerja layanan dan membuat alat yang kami anggap berguna untuk mengurangi overhead dalam mendapatkan penyiapan pekerja layanan. Library tersebut tercantum di Library Service Worker. Dua hal utama adalah:
- sw-precache: alat waktu build yang menghasilkan skrip pekerja layanan yang berguna untuk melakukan precache shell aplikasi web
- sw-toolbox: library yang menyediakan cache runtime untuk resource yang jarang digunakan
Jeff Posnick menulis penjelasan singkat tentang sw-precache yang disebut Offline-first, fast, with the sw-precache module dan codelab tentang alat sama yang mungkin berguna bagi Anda.
Chrome, Opera, dan Firefox telah mengimplementasikan dukungan untuk pekerja layanan dengan Edge yang memiliki sinyal publik yang positif tentang minat pada fitur tersebut. Safari secara singkat menyebutkan minatnya melalui rencana lima tahun yang diusulkan seorang engineer.
Notifikasi push untuk re-engagement
Secara efektif, Anda dapat membangun aplikasi web yang dapat melibatkan pengguna di luar tab. Browser dapat ditutup dan mereka 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 dirangkum sebelumnya.
Push API diterapkan di Chrome, dalam pengembangan di Firefox, dan dalam pertimbangan di Edge. Belum ada sinyal publik dari Safari tentang niat mereka untuk menerapkan fitur ini.
Notifikasi Push di Open Web adalah pengantar komprehensif untuk mendapatkan penyiapan Push oleh Matt Gaunt, dan codelab Notifikasi Push juga tersedia di Dasar-Dasar Web.
Michael van Ouwerkerk dari tim Chrome juga memiliki pembuka 6 menit untuk Push jika Anda lebih menyukai video.
Pelapisan dalam fitur lanjutan
Ingat, pengalaman pengguna Anda dapat memiliki berbagai tingkat manis, bergantung pada browser yang digunakan untuk melihat aplikasi web Anda. Anda yang mengontrol hard candy shell.
Fitur tambahan yang akan tersedia di platform web, seperti Sinkronisasi Latar Belakang (untuk sinkronisasi data dengan server bahkan saat aplikasi web ditutup) dan Web Bluetooth (untuk berkomunikasi dengan perangkat Bluetooth dari aplikasi web Anda) juga dapat disertakan ke dalam Progressive Web App dengan cara ini.
Sinkronisasi Latar Belakang satu kali telah diaktifkan di Chrome dan Jake Archibald memiliki video aplikasi wikipedia offline dan artikelnya yang menunjukkan cara kerjanya. Francois Beaufort juga memiliki sejumlah sampel Web Bluetooth yang tersedia jika tertarik untuk mencoba API tersebut.
Ramah framework
Tidak ada yang menghentikan Anda untuk menerapkan prinsip-prinsip di atas ke aplikasi atau kerangka kerja yang ada saat Anda sedang membangun. Beberapa prinsip lain yang perlu diingat saat membangun Progressive Web App adalah model performa yang berfokus pada pengguna RAIL dan animasi berbasis FLIP.
Semoga selama tahun 2016, kita akan melihat peningkatan jumlah boilerplate dan project seed yang dihasilkan secara organik dalam mendukung Progressive Web App sebagai fitur inti. Sampai saat itu, hambatan untuk menambahkan fitur ini ke aplikasi Anda sendiri tidak terlalu tinggi dan bersifat IMHO, cukup sepadan dengan upaya yang dilakukan.
Arsitektur
Ada berbagai tingkatan terkait cara kerja "all-in" pada model Progressive Web App, tetapi satu pendekatan umum yang diambil adalah merancangnya menggunakan Shell Aplikasi. Ini bukan persyaratan yang sulit, tetapi memiliki beberapa manfaat.
Arsitektur Shell Aplikasi mendorong penyimpanan dalam cache shell aplikasi (Antarmuka Pengguna) agar berfungsi secara offline dan mengisi kontennya menggunakan JavaScript. Pada kunjungan berulang, hal ini memungkinkan Anda menampilkan piksel yang signifikan di layar dengan sangat cepat tanpa jaringan, meskipun konten Anda akhirnya berasal dari jaringan tersebut. Hal ini disertai dengan peningkatan performa yang signifikan.
Jeremy Keith baru-baru ini memberi komentar bahwa dalam jenis model ini, mungkin rendering sisi server tidak boleh dianggap sebagai pengganti, tetapi rendering sisi klien harus dianggap sebagai peningkatan. Ini masukan yang bagus.
Dalam model Shell Aplikasi, 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 mendekati hal ini.
Rekomendasi saya adalah membaca penjelasan kami tentang arsitektur dan mengevaluasi bagaimana prinsip-prinsip serupa dapat diterapkan pada aplikasi dan stack Anda sendiri.
Boilerplate untuk memulai
Shell aplikasi
Repositori app-shell berisi implementasi yang hampir selesai dari arsitektur Shell Aplikasi. Library ini memiliki backend yang ditulis dalam Express.js dan front-end yang ditulis dalam ES2015.
Mengingat model ini mencakup bagian sisi klien dan sisi server dari model serta ada cukup banyak hal yang terjadi, maka perlu waktu untuk membiasakan diri dengan codebase. Sebaliknya, ini adalah titik awal Progressive Web App yang paling komprehensif untuk saat ini. Dokumen akan menjadi fokus kami berikutnya untuk proyek ini.
Starter kit polimer
Titik awal resmi untuk aplikasi web Polymer mendukung fitur Progressive Web App berikut:
- Manifes Aplikasi Web
- Layar pembuka 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 memiliki dukungan untuk beberapa pola performa yang lebih canggih (misalnya model Application Shell, pemuatan asinkron) yang Anda temukan di beberapa aplikasi web Progressive Polymer.
Kami ingin mencoba menerapkan pola ini ke dalam PSK pada tahun 2016, tetapi eksperimen awal seputar hal ini dapat ditemukan di aplikasi Polymer Zuperkulblog oleh Rob Dodson dan Polymer Perf Patterns yang luar biasa oleh Eric Bidelman.
Kit Pemula Web
Titik awal opini kami untuk proyek baru yang menarik mencakup fitur Progressive Web App berikut:
- Manifes Aplikasi Web
- Layar pembuka Chrome untuk Android
- Pra-caching pekerja layanan berkat sw-precache
Jika Anda memiliki preferensi untuk bekerja dengan vanilla JS/ES2015 dan tidak dapat menggunakan Polymer, Web Starter Kit mungkin terbukti berguna sebagai titik referensi yang dapat Anda gunakan kembali atau 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 sedang mencari inspirasi, repositori di bawah ini mungkin terbukti berguna sebagai referensi. Mereka juga merupakan aplikasi yang sangat bagus.
JavaScript Vanila
- Voice Memos oleh Paul Lewis dibuat menggunakan arsitektur yang mirip dengan
app-shell(penulisan) - Wikipedia Offline oleh Jake Archibald (video)
- Air Horner oleh Paul Kinlan
- Guitar Tuner oleh Paul Lewis (write-up)
Polymer
- Zuperkulblog oleh Rob Dodson (slide)
Reaksi
DOM Virtual
- Pokedex oleh Nolan Lawson - aplikasi web progresif luar biasa yang menerapkan pendekatan "do everything in a web worker" untuk membantu rendering progresif. (penulisan)
Angular.js
- Timey.in oleh Kenneth Auchenberg - juga menggunakan
sw-precacheuntuk precaching resource
Catatan penutup
Seperti yang telah disebutkan, Progressive Web App masih dalam masa pertumbuhan, tetapi ini adalah waktu yang menyenangkan untuk bermain-main dengan metodologi di baliknya dan melihat seberapa baik penerapannya pada aplikasi web Anda sendiri.
Paul Kinlan saat ini merencanakan panduan Dasar-Dasar Web tentang Progressive Web App dan jika Anda memiliki masukan tentang area 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 Merupakan Masa Depan Pengembangan Web
- Progressive Web App: siap digunakan
- Membuat Progressive App dengan ServiceWorker
- Progressive Web App Adalah Masa Depan
- Progressive Web App: Cara Baru untuk Menikmati Pengalaman Seluler
- Memperkenalkan Pokedex.org: aplikasi web progresif untuk penggemar Pokémon
- Rangkuman Chrome Developer Summit: Progressive Web App