Belakangan ini, ada banyak diskusi yang diterima tentang Progressive Web App. Keduanya masih merupakan model yang relatif baru, tetapi prinsip-prinsipnya dapat meningkatkan kualitas aplikasi yang dibangun dengan vanilla JS, React, Polymer, Angular, atau framework lainnya. Dalam postingan ini, saya akan merangkum beberapa opsi dan referensi aplikasi untuk memulai progressive web app Anda sendiri hari ini.
Apa itu Progressive Web App?
Penting untuk diingat bahwa Progressive Web App dapat digunakan di mana saja, tetapi fiturnya sangat canggih di browser modern. Progressive enhancement adalah tulang punggung model.
Aaron Gustafson menyamakan peningkatan progresif dengan M&M kacang. Kacang adalah konten Anda, lapisan cokelat adalah lapisan presentasi Anda, dan JavaScript Anda adalah cangkang permen yang keras. Lapisan ini dapat bervariasi warnanya dan pengalamannya dapat bervariasi bergantung pada kemampuan browser yang menggunakannya.
Bayangkan candy shell sebagai tempat tinggal banyak fitur Progressive Web App. Pengalaman ini adalah pengalaman yang menggabungkan yang terbaik dari web dan yang terbaik dari aplikasi. Cookie ini berguna bagi pengguna sejak kunjungan pertama di tab browser, tanpa perlu melakukan penginstalan.
Karena pengguna membangun hubungan dengan aplikasi ini melalui penggunaan berulang, mereka membuat candy shell semakin manis - pemuatannya sangat cepat pada koneksi jaringan yang lambat (berkat pekerja layanan), mengirim 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 cerdas.
Progressive Web App adalah
- Progresif - Berfungsi untuk setiap pengguna, apa pun pilihan browser karena mereka dibangun dengan progressive enhancement sebagai tenant inti.
- Responsif - Cocok dengan faktor bentuk apa pun, desktop, ponsel, tablet, atau apa pun yang akan datang.
- Konektivitas independen - Disempurnakan dengan pekerja layanan agar dapat bekerja secara offline atau di jaringan berkualitas rendah.
- Seperti aplikasi - Menggunakan model shell aplikasi untuk menyediakan navigasi dan interaksi gaya aplikasi.
- Segar - Selalu mendapatkan info terbaru berkat proses update pekerja layanan.
- Aman - Ditayangkan melalui TLS untuk mencegah snooping dan memastikan konten tidak dirusak.
- Dapat ditemukan - Dapat diidentifikasi sebagai “aplikasi” berkat manifes W3C dan cakupan pendaftaran pekerja layanan yang memungkinkan mesin telusur menemukannya.
- Dapat dilibatkan kembali - Permudah re-engagement melalui 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 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 Tambahkan ke layar utama dan fitur cache pekerja layanan awal yang berjalan dengan baik.
Salah satu aspek yang bagus dari sifat "progresif" pada model ini adalah bahwa fitur dapat dibuka secara bertahap seiring vendor browser memberikan dukungan yang lebih baik untuk mereka. Progressive Web App seperti Pokedex tentu saja 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 aplikasi tersebut. Paul Kinlan juga memulai tag Stack Overflow yang sangat berguna untuk Progressive Web App yang patut dicoba.
Prinsip
Manifes aplikasi web
Manifes ini memungkinkan aplikasi web Anda memiliki kehadiran yang lebih mirip native di layar beranda pengguna. API ini memungkinkan aplikasi diluncurkan dalam mode layar penuh (tanpa kolom URL), memberikan kontrol atas orientasi layar, dan di versi terbaru Chrome 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 proyek pribadi saya, 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 secara aktif mengembangkan dukungan dan Edge mencantumkannya sebagai dalam pertimbangan. WebKit/Safari belum memposting sinyal publik tentang maksud 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"
Untuk sementara waktu, Chrome di Android telah mendukung penambahan situs Anda ke layar utama, tetapi versi terbaru juga mendukung secara proaktif menyarankan penambahan situs menggunakan banner penginstalan Aplikasi Web native.
Agar dialog penginstalan aplikasi menampilkan aplikasi Anda harus:
- Memiliki manifes aplikasi web yang valid
- Ditayangkan melalui HTTPS (lihat letsencrypt untuk sertifikat gratis)
- Memiliki pekerja layanan yang valid dan terdaftar
- Dikunjungi dua kali, dengan jarak antar-kunjungan minimal 5 menit
Beberapa contoh banner Instal Aplikasi tersedia, 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. Pekerja layanan sengaja memiliki masa pakai singkat.
Properti gabungan aktif ketika mendapatkan peristiwa dan hanya berjalan selama perlu memprosesnya. Pekerja layanan 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.
Sekumpulan contoh pekerja layanan lengkap tersedia di contoh Google Chrome. Buku resep offline Jake Archibald wajib dibaca dan sebaiknya coba panduan aplikasi web offline pertama dari Paul Kinlan jika Anda baru mengenal pekerja layanan.
Tim kami juga memelihara sejumlah utilitas pembantu pekerja layanan dan membuat alat yang menurut kami berguna untuk mengurangi beban dalam mendapatkan penyiapan pekerja layanan. Library ini tercantum di Library Pekerja Layanan. Dua yang utamanya adalah:
- sw-precache: alat waktu build yang menghasilkan skrip pekerja layanan yang berguna untuk melakukan precache shell aplikasi web Anda
- sw-toolbox: library yang menyediakan caching runtime untuk resource yang jarang digunakan
Jeff Posnick menulis penjelasan singkat tentang sw-precache yang disebut Offline-first, fast, dengan modul sw-precache dan codelab tentang alat yang 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 sempat menyebutkan minat terhadap desain tersebut melalui proposal rencana lima tahun yang diajukan 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 bahkan tidak perlu aktif menggunakan aplikasi web Anda untuk berinteraksi dengan pengalaman Anda. Fitur ini memerlukan pekerja layanan dan manifes aplikasi web, dibangun berdasarkan beberapa fitur yang diringkas sebelumnya.
Push API diterapkan di Chrome, dalam pengembangan di Firefox, dan dalam pertimbangan di Edge. Belum ada sinyal publik dari Safari tentang maksud mereka untuk menerapkan fitur ini.
Notifikasi Push di Web Terbuka adalah pengantar yang 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 pengantar selama 6 menit untuk Push jika Anda lebih menyukai video.
Pelapisan di fitur lanjutan
Ingat, pengalaman pengguna Anda dapat memiliki tingkat kemanisan yang berbeda bergantung pada browser yang digunakan untuk melihat aplikasi web. Anda yang mengontrol hard candy shell.
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 dan artikel miliknya yang menunjukkan cara kerjanya. Francois Beaufort juga memiliki sejumlah contoh Bluetooth Web yang tersedia jika tertarik untuk mencoba API tersebut.
Sesuai framework
Tidak ada yang menghentikan Anda untuk menerapkan salah satu prinsip di atas ke aplikasi atau kerangka kerja yang sedang Anda bangun. 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 selama tahun 2016, kita akan melihat peningkatan jumlah boilerplate dan project inti yang disiapkan secara organik untuk mendukung Progressive Web App sebagai fitur inti. Sementara itu, hambatan untuk menambahkan fitur ini ke aplikasi Anda sendiri tidak terlalu tinggi dan IMHO, cukup sepadan dengan usaha yang dilakukan.
Arsitektur
Ada berbagai tingkatan tentang cara kerja "lengkap" pada model Progressive Web App, tetapi satu pendekatan yang umum digunakan adalah merancangnya berdasarkan Shell Aplikasi. Hal ini bukan persyaratan yang sulit, tetapi memiliki beberapa manfaat.
Arsitektur Shell Aplikasi mendorong cache shell aplikasi (Antarmuka Pengguna) agar 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 berkomentar bahwa dalam jenis model ini, mungkin rendering sisi server tidak boleh dianggap sebagai penggantian, tetapi rendering sisi klien harus dianggap sebagai peningkatan. Ini 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 mencapainya.
Rekomendasi saya adalah membaca penjelasan kami tentang arsitektur dan mengevaluasi bagaimana prinsip-prinsip serupa dapat diterapkan secara optimal pada aplikasi dan stack Anda sendiri.
Memulai boilerplate
Shell aplikasi
Repositori app-shell berisi implementasi yang hampir selesai dari arsitektur Application Shell. Alat ini memiliki backend yang ditulis dalam Express.js dan front-end yang ditulis dalam ES2015.
Mengingat bahwa kode ini mencakup bagian sisi klien dan sisi server dari model dan ada cukup banyak hal yang terjadi di sana, perlu waktu untuk membiasakan diri dengan codebase. Jika tidak, ini adalah titik awal Progressive Web App kami yang paling komprehensif. 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 (diperlukan penyiapan manual) 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 opini kami untuk proyek dasar yang baru mencakup fitur Progressive Web App berikut:
- Manifes Aplikasi Web
- Layar Pembuka Chrome untuk Android
- Pra-cache pekerja layanan berkat sw-precache
Jika Anda memiliki preferensi untuk bekerja dengan vanilla JS/ES2015 dan tidak dapat menggunakan Polymer, Web Starter Kit mungkin akan bermanfaat sebagai titik referensi yang dapat Anda gunakan kembali atau mencuri cuplikan kodenya.
Progressive Web App dengan dan tanpa framework
Sejumlah Progressive Web App open source telah dibuat oleh anggota komunitas dengan dan tanpa library dan framework JS. Jika Anda sedang mencari inspirasi, repositori di bawah ini 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) - Wikipedia Offline oleh Jake Archibald (video)
- Air Horner oleh Paul Kinlan
- Guitar Tuner oleh Paul Lewis (penulisan)
Polymer
- Zuperkulblog oleh Rob Dodson (slide)
Reaksi
DOM Virtual
- Pokedex oleh Nolan Lawson - progressive web app yang sangat baik yang menerapkan pendekatan "do everything in a web worker" untuk membantu rendering progresif. (penjelasan)
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 saat yang menyenangkan untuk bermain-main dengan metodologi yang mendukungnya dan melihat seberapa baik Progressive Web App dapat diterapkan pada 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 Anda bahas, silakan komentari utas ini.
Bacaan lebih lanjut
- Progressive Web App: Keluar dari Tab Tanpa Kehilangan Jiwa Kita
- Mengapa Progressive Web App Adalah Masa Depan Pengembangan Web
- Progressive Web App: siap digunakan kapan saja
- Membuat Progressive App dengan ServiceWorker
- Progressive Web App Adalah Masa Depan
- Progressive Web App: Cara Baru untuk Menikmati Pengalaman Seluler
- Memperkenalkan Pokedex.org: progressive webapp untuk penggemar Pokémon
- Rekap Chrome Developer Summit: Progressive Web App