Dasar-dasar Aplikasi Web Progresif

Pernahkah Anda melihat tombol "Add to Home Screen" yang muncul di layar ponsel cerdas Android Anda ketika Anda melihat-lihat situs apa pun? Jika Anda mengklik tombol ini, aplikasi tertentu akan diinstal pada telepon di latar belakang, ikon untuk peluncuran yang akan menuju ke layar utama. Sekarang aplikasi ini dapat diluncurkan dan bekerja dengan situs dengan cara yang sama seperti sebelumnya, tetapi hanya di antarmuka telepon biasa.

Yang kita bicarakan adalah aplikasi seluler yang telah diunduh dari aplikasi web. Selain itu, seperti yang Anda lihat, untuk menginstal aplikasi seperti itu Anda tidak harus berinteraksi dengan Play Market. Akibatnya, pemasangan aplikasi semacam itu sesederhana mungkin. Namun, ini jauh dari yang paling menarik. Dengan meluncurkan program semacam itu, Anda mendapat kesempatan untuk bekerja dengan data yang ditampilkan, bahkan tanpa koneksi Internet. Mereka memungkinkan Anda untuk berinteraksi dengan halaman web secara offline. Nah, bukankah itu luar biasa?

Penulis materi yang kami terbitkan hari ini akan berbicara tentang aplikasi seperti itu, tentang mengapa mereka dibutuhkan, dan cara membuatnya.



Anda mungkin sudah mengerti bahwa kami baru saja membicarakan apa yang disebut aplikasi web progresif (PWA). Aplikasi semacam itu dapat diinstal langsung dari jendela browser, ikon untuk meluncurkannya akan terlihat seperti ikon aplikasi seluler biasa, dan, seperti banyak aplikasi seluler, akan memungkinkan Anda untuk bekerja dengannya tanpa koneksi internet.


Tambahkan ke Tombol Layar Beranda

Sekarang mari kita bicara tentang apa itu "progresifitas" ketika diterapkan ke aplikasi web. Saya mengusulkan untuk mengenal mereka lebih baik, untuk mengetahui perbedaannya dari aplikasi web biasa, dan, di samping itu, saya ingin memberi tahu Anda mengapa saya percaya bahwa PWA lebih baik daripada aplikasi seluler biasa.

Apa itu aplikasi web progresif?

Istilah "Aplikasi Web Progresif" diciptakan oleh Alex Russell dan Frances Berriman. Menurut Alex, aplikasi web progresif hanyalah situs web yang mengonsumsi vitamin yang tepat. Apa yang ada di jantung PWA tidak dapat disebut kerangka kerja baru atau teknologi baru. Ini sebenarnya adalah serangkaian metode pengembangan lanjutan yang memungkinkan Anda untuk membuat perilaku aplikasi web sangat mirip dengan perilaku aplikasi desktop atau mobile klasik.


Ikon PWA di layar beranda

PWA memberi pengguna kegunaan baru melalui peningkatan aplikasi progresif. Secara umum, ini berarti bahwa PWA, pada perangkat seluler dari generasi yang berbeda, akan bekerja kurang lebih sama. Tentu saja, beberapa fitur aplikasi telepon biasa mungkin tidak tersedia untuk mereka, tetapi aplikasi seperti itu biasanya bekerja pada perangkat yang berbeda dengan cara mereka bekerja untuk mereka.

Mengapa Anda memerlukan aplikasi web tingkat lanjut?

Sebelum kita mencari tahu mengapa PWA diperlukan sama sekali, mari kita bicara tentang masalah apa yang kita hadapi ketika merancang aplikasi web dan aplikasi seluler biasa.

• Koneksi internet lambat. Mungkin, di mana Anda tinggal, dengan internet cepat semuanya beres, sehingga masalah ini tidak mempengaruhi Anda. Namun 60% populasi dunia masih menggunakan Internet 2G. Bahkan di Amerika Serikat, hanya kecepatan yang tersedia untuk beberapa pengguna, sebanding dengan kecepatan modem biasa menggunakan saluran telepon sederhana.
• Lambat memuat situs web. Jika situs memuat dengan sangat lambat, tahukah Anda berapa lama pengguna menunggu sebelum mengklik tombol tutup jendela? Tiga detik! 53% pengguna meninggalkan situs yang terlalu lambat.
• Kompleksitas menginstal aplikasi. Pengguna tidak tertarik untuk menginstal aplikasi seluler biasa. Rata-rata pengguna menginstal 0 aplikasi per bulan.
• Melibatkan pengguna dalam bekerja dengan aplikasi. Pengguna menghabiskan sebagian besar waktu mereka di aplikasi seluler biasa, tetapi jangkauan aplikasi web seluler sekitar tiga kali lipat. Akibatnya, sebagian besar pengguna tidak terlalu aktif terlibat dalam bekerja dengan aplikasi, meskipun pengguna ini menghabiskan 80% dari waktu di tiga aplikasi mobile yang paling sering mereka gunakan.

Aplikasi web progresif membantu menyelesaikan masalah ini.


PWA dalam aksi

Ada banyak alasan untuk menggunakan PWA, di sini saya ingin menyoroti fitur-fitur utama yang mereka sediakan. Jika Anda menggambarkan kemampuan ini dalam satu kata, maka FIRE adalah singkatan dari Fast, Integrated, Reliable, Engaging, yaitu, aplikasi web progresif harus cepat, diintegrasikan ke dalam lingkungan kerja perangkat, dapat diandalkan, dan memiliki cara untuk melibatkan pengguna dalam bekerja dengannya. .

1. Jika kita berbicara tentang kecepatan, maka PWA, di semua tahap interaksi pengguna dengan mereka, bekerja dengan cepat. Mereka dengan cepat diinstal, diluncurkan dengan cepat, bekerja dengan cepat. Karena PWA memungkinkan Anda untuk menyimpan data, meluncurkan kembali aplikasi seperti itu sangat cepat, bahkan tanpa mengakses sumber daya jaringan.
   
2. Integrasi PWA dalam lingkungan perangkat dinyatakan dalam kenyataan bahwa aplikasi tersebut berperilaku seperti aplikasi biasa. Ikon untuk meluncurkannya ada di layar utama, mereka dapat bekerja dengan pemberitahuan push, mereka dapat menggunakan fungsi perangkat yang sama dengan aplikasi biasa. Akibatnya, ketika bekerja dengan aplikasi web progresif, pengguna tidak merasa bahwa ia meninggalkan lingkungan yang akrab.
3. Keandalan aplikasi web terintegrasi didasarkan pada kenyataan bahwa mereka dapat bekerja secara normal bahkan tanpa menghubungkan ke jaringan, karena kemampuan untuk menyimpan data menggunakan pekerja layanan.
4. Kemampuan PWA untuk melibatkan pengguna dengan mereka didasarkan pada kenyataan bahwa mereka dapat mengirim pemberitahuan kepada pengguna. Ini memungkinkan Anda untuk memberi tahu pengguna tentang peristiwa menarik terkait aplikasi tersebut, dan menariknya untuk bekerja dengan aplikasi ini.

Bagaimana cara membuat aplikasi web progresif?

Google telah menerbitkan daftar periksa untuk mengembangkan aplikasi web tingkat lanjut. Pertimbangkan persyaratan minimum untuk suatu aplikasi, yang kepatuhannya memungkinkan kita untuk menyebutnya PWA.

▍1. Manifes aplikasi

Manifes PWA adalah file manifest.json dengan sesuatu seperti ini:

 { "name": "Trending Meme", "short_name": "Meme", "theme_color": "#2196f3", "background_color": "#2196f3", "display": "standalone", "orientation": "portrait", "Scope": "/", "start_url": "/", "icons": [   {     "src": "images/icons/icon-72x72.png",     "sizes": "72x72",     "type": "image/png"   },   {     "src": "images/icons/icon-96x96.png",     "sizes": "96x96",     "type": "image/png"   },   {     "src": "images/icons/icon-128x128.png",     "sizes": "128x128",     "type": "image/png"   },   {     "src": "images/icons/icon-144x144.png",     "sizes": "144x144",     "type": "image/png"   },   {     "src": "images/icons/icon-152x152.png",     "sizes": "152x152",     "type": "image/png"   },   {     "src": "images/icons/icon-192x192.png",     "sizes": "192x192",     "type": "image/png"   },   {     "src": "images/icons/icon-384x384.png",     "sizes": "384x384",     "type": "image/png"   },   {     "src": "images/icons/icon-512x512.png",     "sizes": "512x512",     "type": "image/png"   } ], "splash_pages": null } 

Di hadapan kami adalah file JSON biasa yang berisi informasi meta tentang aplikasi web. Di sini ada informasi tentang ikon aplikasi (salah satunya dilihat pengguna di layar utama setelah menginstal aplikasi), warna latar belakang aplikasi, nama lengkap dan singkatnya, dan sebagainya. Anda dapat menulis manifes ini sendiri, atau Anda dapat menggunakan alat khusus yang mengotomatiskan pembuatan file tersebut.


Situs yang mempermudah pembuatan file manifest.json

▍2. Pekerja Layanan

Pekerja layanan adalah pekerja yang digerakkan oleh peristiwa yang berjalan di latar belakang aplikasi dan bertindak sebagai perantara antara aplikasi dan sumber daya jaringan. Mereka dapat mencegat permintaan jaringan dan informasi cache untuk aplikasi. Mereka dapat digunakan untuk mengunduh data yang rencananya akan digunakan untuk memastikan aplikasi bekerja offline. Pekerja layanan adalah program JavaScript yang mencegat pemrosesan acara tertentu dan melakukan tugas tertentu.

Berikut adalah contoh file serviceworker.js .

 self.addEventListener('fetch', event => {   //           const {request} = event;   const url = new URL(request.url);   if(url.origin === location.origin) {       event.respondWith(cacheData(request));   } else {       event.respondWith(networkFirst(request));   } }); async function cacheData(request) {   const cachedResponse = await caches.match(request);   return cachedResponse || fetch(request); } 

▍3. Lencana

Ikon digunakan untuk meluncurkan yang diinstal pada perangkat PWA. Situs tersebut, yang membantu untuk membuat file manifes, memungkinkan Anda untuk secara otomatis menghasilkan satu set ikon aplikasi berdasarkan pada file gambar tunggal berukuran 512x512 piksel yang diunggah ke situs ini. File yang dihasilkan disimpan dalam format .png .

▍4. Keamanan

Agar beberapa aplikasi disebut PWA, itu, antara lain, harus mendukung pertukaran data melalui saluran komunikasi yang aman menggunakan HTTPS. Sangat mudah untuk mendapatkan sertifikat SSL untuk mengatur koneksi seperti itu menggunakan kemampuan layanan seperti Cloudflare dan LetsEncrypt. Perlindungan aplikasi tidak hanya apa yang mutlak diperlukan hari ini, tetapi juga merupakan cara untuk menunjukkan keandalan aplikasi kepada pengguna dan membangun hubungan saling percaya dengannya.

Ringkasan

Pada artikel ini, kita berbicara tentang aplikasi web progresif, berbicara tentang mengapa mereka dibutuhkan, masalah apa yang mereka pecahkan, persyaratan apa yang disajikan kepada mereka. Di sini kami juga menyentuh pada topik pengembangan mereka, khususnya, kami berbicara tentang manifes PWA, pekerja layanan, ikon aplikasi, dan bahwa mereka perlu dilindungi menggunakan HTTPS. Teknologi PWA sering dianggap sebagai sesuatu yang terkait secara eksklusif dengan smartphone Android, dan sampai saat ini, sudut pandang ini memiliki hak untuk hidup. Namun, mengingat peristiwa yang terjadi tahun ini, kita dapat mengatakan bahwa PWA memiliki masa depan yang sangat menarik di banyak platform. Topik PWA, pada kenyataannya, jauh dari lelah dengan semua ini. Oleh karena itu, sangat mungkin bahwa kami akan kembali ke sana.

Pembaca yang budiman! Bagaimana perasaan Anda tentang aplikasi web progresif?