Cara Mengoptimalkan Aplikasi Web Progresif: Melampaui Dasar

Aplikasi web progresif (PWA) masih mendapatkan popularitas pada tahun 2020. Ini tidak mengejutkan, mengingat manfaat dari tingkat konversi yang lebih tinggi, keterlibatan pelanggan, penurunan kecepatan pemuatan halaman, dan biaya pengembangan dan overhead yang lebih rendah.

Kita dapat melihat perusahaan terkemuka juga menikmati kesuksesan dengan PWA mereka, seperti Twitter, Uber, Tinder, Pinterest, dan Forbes. Dan mereka semua membanggakan manfaat besar dari penerapan aplikasi progresif.

Kabar baiknya adalah bahwa mengembangkan PWA bukanlah sesuatu yang hanya dapat dilakukan oleh perusahaan beranggaran besar. Aplikasi ini melayani bisnis kecil dan rata-rata secara setara dan tidak terlalu rumit untuk dibuat.

Anda dapat menemukan Panduan Pemula yang komprehensif Untuk Aplikasi Web Progresif di Majalah Smashing yang berfokus pada pembangunan inti PWA.

Namun, mari kita melangkah lebih jauh dan mempelajari cara menerapkan kualitas modern ke PWA, seperti fungsionalitas offline, pengoptimalan berbasis jaringan, pengalaman pengguna lintas perangkat, kemampuan SEO, serta pemberitahuan dan permintaan yang tidak mengganggu. Anda juga akan menemukan kode contoh atau referensi ke panduan yang lebih spesifik sehingga Anda dapat menerapkan tip ini ke PWA Anda.

Tinjauan Singkat Aplikasi Web Progresif (PWA)

Jangan lewatkan dasar-dasarnya dan dengan cepat membahas inti PWA.

Apa Itu PWA?

“Progressive Web Apps (PWA) dibangun dan disempurnakan dengan API modern untuk memberikan peningkatan kemampuan, keandalan, dan kemudahan pemasangan sambil menjangkau siapa saja, di mana saja, di perangkat apa pun dengan basis kode tunggal.”

— Pengembang Google

Dengan kata lain, PWA adalah situs web yang dapat digunakan pengguna sebagai aplikasi yang berdiri sendiri. Mereka berbeda dari aplikasi asli terutama karena PWA tidak memerlukan instalasi dan dapat digunakan dengan berbagai perangkat — aplikasi asli terutama dibuat untuk perangkat seluler.

Bagaimana Cara Kerja PWA?

Inti dari PWA terdiri dari tiga komponen: manifes aplikasi web, pekerja layanan, dan shell aplikasi. Anda dapat menemukan instruksi terperinci untuk membangunnya di panduan pemula yang disebutkan di atas.

Inilah yang dilakukan komponen-komponen ini.

Manifes Aplikasi Web

Manifes aplikasi web adalah inti untuk membuat situs web berjalan sebagai aplikasi yang berdiri sendiri dalam mode layar penuh. Anda dapat menentukan tampilan PWA, mengoptimalkannya untuk perangkat yang berbeda, dan menetapkan ikon yang ditampilkan setelah penginstalan aplikasi.

Pekerja Layanan

Pekerja layanan mengaktifkan penggunaan offline PWA dengan mengambil data cache atau memberi tahu pengguna tentang tidak adanya koneksi Internet. Pekerja layanan juga mengambil data terbaru setelah koneksi server dipulihkan.

Arsitektur shell aplikasi

Shell aplikasi adalah apa yang dilihat pengguna ketika mereka mengakses PWA. Ini adalah HTML, CSS, dan JavaScript minimum yang diperlukan untuk memberi daya pada antarmuka pengguna. Saat mengembangkan PWA, Anda dapat meng-cache sumber daya dan aset shell aplikasi di browser.

Menerapkan Karakteristik Modern ke PWA Anda

Di atas fitur-fitur inti, PWA modern merangkul ciri-ciri tambahan yang semakin mendorong penggunanya menuju pengalaman pengguna yang lebih luar biasa.

Mari kita lihat beberapa karakteristik modern tertentu dari PWA dan pelajari tentang menambahkannya ke PWA Anda. Kualitas berikut dianggap sebagai tambahan yang bagus untuk PWA dasar oleh pengembang Google.

Aplikasi Bekerja Offline Seperti halnya Online

Saat membangun PWA, Anda juga dapat mengembangkan halaman luring khusus sebagai bagian dari inti. Namun, jauh lebih ramah pengguna jika PWA Anda terus berfungsi bahkan tanpa koneksi Internet — hingga titik tertentu di mana koneksi menjadi diperlukan. Jika tidak, pengalaman pengguna bisa sama frustasinya dengan cobaan Ankita Masand dengan memesan kue seperti yang dia jelaskan dalam artikelnya tentang poin-poin menyakitkan dari PWA.

Anda dapat mencapai pengalaman pengguna yang lebih signifikan dengan menggunakan konten yang di-cache, sinkronisasi latar belakang, dan layar kerangka. Mari kita lihat masing-masing.

Konten yang di-cache dengan IndexedDB

IndexedDB adalah sistem penyimpanan NoSQL dalam browser yang dapat Anda gunakan untuk menyimpan dan mengambil data yang diperlukan untuk membuat PWA Anda bekerja offline.

Namun, tidak semua browser mendukung IndexedDB , jadi hal pertama yang ingin Anda lakukan adalah memeriksa apakah browser pengguna mendukungnya.

 if (!('indexedDB' in window)) { console.log('This browser doesn\'t support IndexedDB'); return; }

Setelah ini, Anda dapat membuat konten yang di-cache dengan IndexedDB API. Berikut adalah contoh dari pengembang Google untuk membuka database, menambahkan toko objek, dan menambahkan item ke toko ini.

 var db; var openRequest = indexedDB.open('test_db', 1); openRequest.onupgradeneeded = function(e) { var db = e.target.result; console.log('running onupgradeneeded'); if (!db.objectStoreNames.contains('store')) { var storeOS = db.createObjectStore('store', {keyPath: 'name'}); } }; openRequest.onsuccess = function(e) { console.log('running onsuccess'); db = e.target.result; addItem(); }; openRequest.onerror = function(e) { console.log('onerror!'); console.dir(e); }; function addItem() { var transaction = db.transaction(['store'], 'readwrite'); var store = transaction.objectStore('store'); var item = { name: 'banana', price: '$2.99', description: 'It is a purple banana!', created: new Date().getTime() }; var request = store.add(item); request.onerror = function(e) { console.log('Error', e.target.error.name); }; request.onsuccess = function(e) { console.log('Woot! Did it'); }; }

Sinkronisasi latar belakang

Jika PWA Anda menyinkronkan data di latar belakang, pengguna dapat mengambil tindakan saat offline, yang kemudian dijalankan saat koneksi internet pulih. Contoh sederhananya adalah aplikasi perpesanan. Seorang pengguna dapat mengirim pesan saat offline tanpa perlu menunggu sampai terkirim — sinkronisasi latar belakang secara otomatis mengirim pesan saat koneksi pulih.

Berikut adalah contoh cara mengembangkan fitur sinkronisasi latar belakang oleh Jake Archibald.

 // Register your service worker: navigator.serviceWorker.register('/sw.js'); // Then later, request a one-off sync: navigator.serviceWorker.ready.then(function(swRegistration) { return swRegistration.sync.register('myFirstSync'); });

Kemudian dengarkan acara di /sw.js :

 self.addEventListener('sync', function(event) { if (event.tag == 'myFirstSync') { event.waitUntil(doSomeStuff()); } });

Layar kerangka

Salah satu keuntungan utama menggunakan layar kerangka adalah bahwa pengguna menganggap aplikasi bekerja daripada duduk diam. Sementara pengguna tidak memiliki koneksi, layar kerangka menarik antarmuka tanpa konten — yang kemudian terisi setelah koneksi pulih.

Code My UI memiliki beberapa cuplikan kode luar biasa yang tersedia yang dapat Anda gunakan untuk membuat layar kerangka untuk PWA Anda.

Mengoptimalkan Berdasarkan Penggunaan Jaringan

Manfaat utama dari PWA adalah memberikan pengalaman yang lebih cepat bagi pengguna. Anda dapat lebih mengoptimalkan kecepatan pemuatan dengan meminta PWA menggunakan jaringan yang mengutamakan cache, memprioritaskan sumber daya, dan menggunakan pemuatan adaptif berdasarkan kualitas jaringan.

Mari kita lihat bagaimana Anda dapat mengembangkan ini ke PWA Anda.

Cache dulu, lalu jaringan

Menggunakan konten yang di-cache terlebih dahulu memungkinkan PWA Anda berfungsi offline dan membuka jalan bagi pengguna untuk mengakses konten bahkan di area jangkauan jaringan yang rendah. Anda dapat melakukannya dengan membuat pekerja layanan untuk men-cache konten dan kemudian mengambilnya.

Berikut adalah contoh dari Jeff Posnick tentang caching HTML statis menggunakan pekerja layanan.

 self.addEventListener('fetch', event => { if (event.request.mode === 'navigate') { // See /web/fundamentals/getting-started/primers/async-functions // for an async/await primer. event.respondWith(async function() { // Optional: Normalize the incoming URL by removing query parameters. // Instead of https://example.com/page?key=value, // use https://example.com/page when reading and writing to the cache. // For static HTML documents, it's unlikely your query parameters will // affect the HTML returned. But if you do use query parameters that // uniquely determine your HTML, modify this code to retain them. const normalizedUrl = new URL(event.request.url); normalizedUrl.search = ''; // Create promises for both the network response, // and a copy of the response that can be used in the cache. const fetchResponseP = fetch(normalizedUrl); const fetchResponseCloneP = fetchResponseP.then(r => r.clone()); // event.waitUntil() ensures that the service worker is kept alive // long enough to complete the cache update. event.waitUntil(async function() { const cache = await caches.open('my-cache-name'); await cache.put(normalizedUrl, await fetchResponseCloneP); }()); // Prefer the cached response, falling back to the fetch response. return (await caches.match(normalizedUrl)) || fetchResponseP; }()); } });

Memprioritaskan sumber daya

Secara default, PWA memiliki kinerja yang lebih baik dibandingkan aplikasi asli serupa karena sifatnya yang ringan. Lebih jauh lagi, karena PWA menggunakan cache browser, dimungkinkan untuk menunjukkan sumber daya mana yang diprioritaskan dan perlu dirender bahkan sebelum digunakan. Ini terutama berfungsi dengan elemen statis karena konten dinamis perlu diperbarui sebelum diambil.

Anda dapat menentukan prioritas elemen dengan menggunakan string <link> di HTML. Anda juga dapat menentukan file server pihak ketiga dengan menggunakan rel=”preconnect” dan rel=”dns-prefetch.”

Maximiliano Firtman memberikan contoh sederhana tentang ini dengan memprioritaskan Font Web di dalam mesin browser:

 <link rel=”preload” as=”font” href=”font.woff” crossorigin>

Menerapkan pemuatan adaptif

Kecepatan internet WiFi dan 4G tidak dapat diakses di mana-mana, dan pengguna masih dapat mengakses Internet dengan koneksi 2G dan 3G. Karena Anda ingin PWA Anda dapat diakses oleh sebanyak mungkin orang, Anda mungkin ingin mengoptimalkannya untuk bekerja pada kecepatan Internet yang lebih rendah juga.

Anda dapat mencapai ini dengan menerapkan pemuatan adaptif, yang memuat elemen PWA berdasarkan jenis koneksi yang dimiliki pengguna.

Cara paling mudah adalah dengan menggunakan alat Google Workbox, yang mencakup banyak plugin siap pakai untuk strategi caching.

Misalkan Anda ingin menentukan strategi caching khusus. Inilah cara Anda dapat melakukannya sebagai contoh dari Demian Renzulli dan Jeff Posnick:

 const adaptiveLoadingPlugin = { requestWillFetch: async ({request}) => { const urlParts = request.url.split('/'); let imageQuality; switch ( navigator && navigator.connection ? navigator.connection.effectiveType : '' ) { //... case '3g': imageQuality = 'q_30'; break; //... } const newUrl = urlParts .splice(urlParts.length - 1, 0, imageQuality) .join('/') .replace('.jpg', '.png'); const newRequest = new Request(newUrl.href, {headers: request.headers}); return newRequest; }, };

Selanjutnya, teruskan plugin ke strategi cacheFirst yang berisi ekspresi reguler untuk mencocokkan URL gambar (mis /img/ ):

 workbox.routing.registerRoute( new RegExp('/img/'), workbox.strategies.cacheFirst({ cacheName: 'images', plugins: [ adaptiveLoadingPlugin, workbox.expiration.Plugin({ maxEntries: 50, purgeOnQuotaError: true, }), ], }), );

Pengalaman Pengguna Luar Biasa Di Semua Platform

PWA yang luar biasa bekerja dengan mulus di browser, seluler, dan tablet. Meskipun menggunakan perangkat Android adalah cara paling populer (dengan pangsa pasar 38,9%) untuk mengakses Internet, mengoptimalkan aplikasi Anda untuk semua platform adalah bagian dari pengembangan fungsi inti PWA.

Anda dapat mengambil langkah lebih lanjut untuk meningkatkan kegunaan dan menawarkan pengalaman pengguna yang luar biasa, seperti mengurangi kegugupan saat PWA Anda dimuat dan memastikan PWA Anda berfungsi dengan metode input apa pun.

Inilah cara Anda dapat mendekati setiap aspek tersebut.

Mengurangi pemuatan konten yang "gelisah"

Bahkan dengan Internet berkecepatan tinggi, konten situs dapat bergeser saat memuat karena elemen situs dimuat secara berurutan. Efek ini bahkan lebih buruk dengan kecepatan koneksi yang lebih lambat dan sangat merugikan pengalaman pengguna.

Elemen paling umum yang menyebabkan konten bergeser saat memuat adalah gambar karena umumnya lebih besar dan bukan prioritas saat memuat konten. Anda dapat mengatasi masalah ini dengan "pemuatan malas" dengan menggunakan gambar placeholder yang lebih kecil yang dapat Anda prioritaskan setelah struktur HTML dirender.

Berikut adalah contoh oleh pengembang Mozilla tentang bagaimana Anda dapat menambahkan gambar ringan yang dimuat terlebih dahulu sebelum gambar sebenarnya di JavaScript:

 <img src='data/img/placeholder.png' data-src='data/img/SLUG.jpg' alt='NAME'>

File app.js memproses atribut data-src seperti:

 let imagesToLoad = document.querySelectorAll('img[data-src]'); const loadImages = (image) => { image.setAttribute('src', image.getAttribute('data-src')); image.onload = () => { image.removeAttribute('data-src'); }; };

Dan kemudian buat lingkaran:

 imagesToLoad.forEach((img) => { loadImages(img); });

Anda juga dapat melihat panduan menyeluruh di Majalah Smashing tentang mengurangi lompatan konten dengan elemen lain.

PWA berfungsi dengan metode input apa pun

Kami telah membahas bagaimana PWA harus bekerja dengan berbagai perangkat yang berbeda. Untuk melangkah lebih jauh, Anda juga perlu memperhitungkan metode input lain yang dapat digunakan pengguna pada perangkat ini, seperti sentuhan, mouse, dan stylus.

Menambahkan API Acara Pointer ke PWA Anda terutama memecahkan pertanyaan ini. Inilah cara Anda dapat mendekatinya menurut pengembang Google.

Pertama, periksa apakah browser mendukung Acara Pointer:

 if (window.PointerEvent) { // Yay, we can use pointer events! } else { // Back to mouse and touch events, I guess. }

Selanjutnya, Anda dapat menentukan tindakan yang dapat dilakukan oleh berbagai metode input:

 switch(ev.pointerType) { case 'mouse': // Do nothing. break; case 'touch': // Allow drag gesture. break; case 'pen': // Also allow drag gesture. break; default: // Getting an empty string means the browser doesn't know // what device type it is. Let's assume mouse and do nothing. break; }

Karena sebagian besar browser sudah memiliki fitur yang mendukung sentuhan, Anda tidak perlu menambahkan apa pun.

Dapat Ditemukan Melalui Pencarian

Salah satu manfaat utama PWA dibandingkan aplikasi asli adalah bahwa PWA pada dasarnya adalah situs web dan mesin pencari dapat mengindeksnya. Ini memungkinkan Anda menerapkan strategi SEO untuk membuat konten PWA Anda lebih mudah ditemukan.

Anda dapat memulai dengan memastikan bahwa setiap URL di PWA Anda memiliki judul deskriptif dan deskripsi meta yang unik, yang merupakan dasar dari setiap aktivitas pengoptimalan SEO.

Mari kita lihat beberapa langkah lain yang dapat Anda ambil untuk membuat PWA Anda dapat dicari.

Analisis kemampuan menemukan PWA Anda

Google memiliki alat luar biasa di Search Console yang menganalisis situs Anda (PWA) dan melaporkan hasilnya. Anda dapat menggunakannya untuk menjalankan pemindaian dasar situs Anda dan menemukan titik lemah yang kemudian dapat Anda mulai perbaiki.

Atau, Anda dapat menggunakan Lighthouse di browser Chrome untuk menjalankan audit SEO.

Pertama, navigasikan ke URL target. Kemudian Tekan Control+Shift+J (atau Command+Option+J di Mac) yang membuka menu alat pengembang. Pilih tab Lighthouse, centang kotak kategori SEO, dan buat laporannya.

Gunakan data terstruktur

Mesin telusur Google menggunakan data terstruktur untuk memahami tujuan konten di laman web Anda.

Data terstruktur adalah format standar untuk memberikan informasi tentang halaman dan mengklasifikasikan konten halaman; misalnya pada halaman resep, apa saja bahan-bahannya, waktu dan suhu memasaknya, kalorinya, dan sebagainya.
— Google

Sebelum Anda mulai membuat kode, Google juga telah menyusun daftar kesalahan data terstruktur umum yang berguna dan panduan yang relevan untuk memperbaikinya. Mempelajari materi ini akan memberi Anda dasar yang baik tentang apa yang harus dihindari.

Frederick O'Brien telah menulis panduan yang sangat baik tentang Majalah Smashing, Memanggang Data Terstruktur Ke Dalam Proses Desain , yang menjelaskan cara membangun data terstruktur dari awal.

Pemberitahuan dan Permintaan Izin yang Mudah Digunakan

Last but not least, Anda dapat meningkatkan pengalaman pengguna dengan mengoptimalkan pemberitahuan dan permintaan izin, sehingga mereka melayani pengguna Anda — bukan hanya membingungkan dan mengganggu.

Meskipun Anda umumnya dapat mengandalkan akal sehat, ada tips praktis yang dapat Anda terapkan juga, seperti membuat pemberitahuan push yang tidak mengganggu dan memberi pengguna opsi untuk berhenti berlangganan pesan.

Permintaan izin halus untuk komunikasi

Ada dua cara modern untuk mengotomatiskan komunikasi antara situs web dan pengguna — chatbots dan notifikasi.

Dalam konteks PWA, manfaat utama chatbot adalah tidak memerlukan izin pengguna untuk berinteraksi dengan pengguna. Namun, tergantung pada aplikasi chatbot yang Anda gunakan, pengguna mungkin melewatkan pesan halus tersebut. Pemberitahuan, di sisi lain, memerlukan izin pengguna tetapi jauh lebih terlihat.

Karena Anda dapat menambahkan chatbot sebagai aplikasi pihak ketiga yang terpisah, mari fokus membuat pemberitahuan push yang mudah digunakan. Jika Anda memerlukan panduan tentang cara membuat pemberitahuan push, inilah panduan hebat dari Indrek Lasn.

Cara paling mudah untuk membuat permintaan izin non-intrusif adalah dengan menggunakan permintaan ganda. Ini berarti Anda menyertakan interaksi khusus ke situs Anda di atas interaksi default dari OS pengguna.

Matt Gaunt menawarkan ilustrasi sempurna untuk efek ini dengan gambar berikut.

Berikut permintaan izin pemberitahuan default yang tidak memberikan konteks:

Dan inilah interaksi khusus yang ditambahkan sebelum izin pemberitahuan default yang dijelaskan di atas:

Dengan menambahkan peringatan khusus sebelum peringatan default OS, Anda dapat menjelaskan tujuan pemberitahuan secara lebih jelas kepada pengguna. Ini meningkatkan kemungkinan pengguna memilih untuk menerima pemberitahuan situs Anda.

Aktifkan pengguna untuk memilih keluar dari notifikasi

Untuk pengguna, menonaktifkan pemberitahuan push dari suatu situs cukup mengganggu terlepas dari perangkat yang mereka gunakan. Oleh karena itu, memberi pengguna opsi untuk memilih keluar dari pesan sangat membantu dalam hal pengalaman pengguna.

Berikut adalah contoh dari Matt Gaunt tentang cara menerapkan fungsi berhenti berlangganan ke dalam kode dan UI Anda:

Pertama, tentukan pendengar klik pushButton :

 pushButton.addEventListener('click', function() { pushButton.disabled = true; if (isSubscribed) { unsubscribeUser(); } else { subscribeUser(); } });

Kemudian, tambahkan fungsi baru:

 function unsubscribeUser() { swRegistration.pushManager.getSubscription() .then(function(subscription) { if (subscription) { // TODO: Tell application server to delete subscription return subscription.unsubscribe(); } }) .catch(function(error) { console.log('Error unsubscribing', error); }) .then(function() { updateSubscriptionOnServer(null); console.log('User is unsubscribed.'); isSubscribed = false; updateBtn(); }); }

Berikut tampilannya di console setelah berhasil mengimplementasikan tombol subscribe untuk menonaktifkan notifikasi jika pengguna memilih.

Kesimpulan

PWA bisa sangat kuat untuk meningkatkan lalu lintas situs Anda dan memperluas pengalaman pengguna. Untuk lebih mengoptimalkan PWA Anda, Anda dapat menggunakan solusi modern yang dijelaskan dalam artikel ini untuk meningkatkan kinerja dan fungsionalitas.

Anda juga tidak perlu mengimplementasikan semuanya sekaligus. Jangan ragu untuk memilih opsi yang paling relevan karena setiap saran ini membantu Anda memajukan PWA Anda.

Sumber Daya Lebih Lanjut

• Pelatihan Aplikasi Web Progresif oleh Google
• Aplikasi Web Progresif oleh web.dev
• Aplikasi web progresif (PWA) oleh Mozilla