Memang tidak dipungkiri aplikasi memang mendominasi ponsel kita. Dulu aplikasi memang tidak memengaruhi desktop atau browser kita dengan cara yang sama. Tetapi itu semua telah berubah dalam beberapa tahun terakhir. Progressive Web Apps (PWA) semakin berkembang dan mengubah interaksi kita dengan semua jenis situs web. Tetapi Apa Itu PWA? Apa yang dilakukan PWA yang tidak dimiliki situs web? Inilah yang perlu kita ketahui tentang Progressive Web Apps.
DAFTAR ISI
Apa Itu PWA
Progressive Web Apps adalah aplikasi web yang menawarkan situs reguler kepada pengguna tetapi muncul sebagai aplikasi seluler asli. PWA rupanya membawa kegunaan aplikasi seluler asli ke rangkaian fitur peramban modern, memanfaatkan sepenuhnya kemajuan di kedua bidang pengembangan. Hal apa yang mendefinisikan PWA?
- Universal : PWA harus bekerja dengan mulus untuk setiap pengguna, terlepas dari browser mereka.
- Responsif : PWA harus bekerja dengan perangkat apa pun, seperti laptop, tablet, ponsel cerdas, dan sebagainya.
- Desain : Desain harus meniru aplikasi seluler asli, yang berarti menu yang slim dan mudah ditemukan, dengan interaktivitas sederhana untuk fitur-fitur canggih.
- Aman : PWA harus menggunakan HTTPS untuk menjaga keamanan data pengguna.
- Dapat ditemukan: Pengguna dapat menemukan PWA, dan mereka mudah diidentifikasi sebagai aplikasi (bukan “situs”).
- Keterlibatan: PWA harus memiliki akses ke fitur keterlibatan asli seperti pemberitahuan push.
- Pembaruan: PWA tetap up to date, melayani versi layanan atau situs terbaru.
- Instalasi: Memungkinkan pengguna untuk dengan mudah “menginstal” PWA ke layar beranda mereka tanpa perlu application store.
- Berbagi: PWA hanya memerlukan satu URL untuk dibagikan, tanpa instalasi apa pun.
Seperti yang kita lihat, PWA bertujuan untuk memberi pengguna pengalaman situs web lengkap dengan fitur yang disederhanakan dan desain antarmuka Native Application.
Bagaimana Cara Kerja PWA
Kunci Aplikasi Web Progresif adalah Service Worker browser. Service Worker adalah skrip yang berjalan di latar belakang browser kita, “terpisah dari halaman web, membuka pintu ke fitur yang tidak memerlukan halaman web atau interaksi pengguna.” Kita mungkin menggunakan pekerja layanan seperti pemberitahuan push dan latar belakang synchronize saat ini, tetapi masa depan PWA langsung memberi skrip ini kekuatan yang lebih besar. Dengan demikian, pekerja layanan membentuk dasar dari standar PWA, menggunakan cache web untuk hasil yang hampir seketika.
Sebelum pekerja layanan, skrip cache browser yang masuk adalah Cache Aplikasi. App Cache memiliki fitur dalam berbagai layanan offline pertama, tetapi agak rawan kesalahan. Selain itu, App Cache memiliki beberapa batasan terkenal, seperti yang dijelaskan A List Apart .Tetapi masalah utama bagi pengembang adalah kurangnya interaksi langsung dengan cara kerja AppCache, menghentikan pengembang memperbaiki masalah secara akurat saat mereka muncul. Pada gilirannya, situs web dan layanan dengan fungsionalitas offline penuh adalah pilihan yang berisiko.
Namun, Service Worker hanya bertahan selama tindakan mereka diperlukan. Dalam PWA, saat kita mengklik sesuatu atau menggunakan fitur, Service Worker akan bertindak. Service Worker (ingat, ini adalah skrip) memproses event, memutuskan apakah cache offline dapat menyelesaikan permintaan. Idenya adalah bahwa ada beberapa cache offline untuk PWA untuk dipilih, memberikan jangkauan fungsi offline yang jauh lebih luas. Selain itu, cache tidak hanya untuk peningkatan kecepatan offline. Misalnya, kita menuju ke PWA, tetapi koneksi kita sangat tidak stabil. Pekerja layanan menyajikan cache sebelumnya, berfungsi penuh, tanpa mengganggu pengalaman kita.
Baca Juga: Apa Itu Cache? Bagaimana Cara Kerja Dan Fungsinya
Dukungan Browser Progressive Web Apps
Ada dua persyaratan untuk menggunakan Aplikasi Web Progresif: browser yang kompatibel dan layanan yang diaktifkan PWA. Pertama, mari kita lihat browser. Kita memiliki dua opsi untuk memeriksa dukungan browser PWA. Yang pertama adalah Jake Archibald’s Is service worker ready? yang dengan mudah menampilkan status siap-PWA dari peramban utama, plus internet Samsung.
Untuk tinjauan umum yang lebih rinci tentang dukungan browser PWA, kita harus memeriksa Can I Use ,situs web yang berspesialisasi dalam daftar penerapan berbagai teknologi web dan browser berdasarkan versi browser. Misalnya, jika kita memasukkan “Service Worker” di bilah pencarian, kita menemukan tabel yang menampilkan nomor versi yang digunakan oleh masing-masing browser untuk menerapkan Service Worker PWA.
Hampir semua browser utama mendukung PWA. Microsoft Edge dan Safari adalah tambahan terbaru ke daftar dukungan PWA. Sebaliknya, QQ Browser dan Baidu Browser sekarang menggunakan versi yang sudah kadaluwarsa dan telah turun ke tingkat kedua.
Bagaimana Kita Mengetahui Jika Situs Web Adalah PWA?
Jika kita seorang pengembang dan menggali kode sumber situs, tidak ada cara pasti bagi kita untuk mengetahui dengan tepat apakah situs web dibangun berdasarkan teknologi PWA. Mesikpun, ada beberapa trik yang tidak menjamin hasil yang pasti, tetapi dapat memberi kita beberapa tanda bahwa situs web yang diberikan adalah PWA.
Situs Web Satu Halaman
Ini adalah cara paling sederhana untuk mengetahui apakah suatu situs web mungkin PWA. Ini didasarkan pada sifat PWA: Progressive Web Apps secara teknis adalah situs web satu halaman. Ini tidak berarti situs web yang dibangun di atas PWA hanya memiliki satu halaman. Ini berarti peristiwa tampilan halaman terjadi hanya sekali, ketika pengguna awalnya memuat situs web. Setelah itu, semua pemuatan halaman ditangani oleh Javascript. Ini berbeda dengan situs web normal, di mana setiap perubahan halaman menyebabkan halaman dimuat ulang beserta seluruh sumber HTML-nya. Cara kerjanya sangat sederhana: lihat tab aktif di browser kita. Jika situs tersebut adalah PWA, ketika kita mengubah halaman situs tidak memuat ulang, artinya tidak ada animasi “memuat” pada tab browser.
Maksud dari situs tidak memuat ulang saat kita mengganti halaman adalah kita hanya berada di satu “halaman” sepanjang waktu. Itu sebabnya halaman PWA dimuat dengan sangat cepat dan halus. Semua halaman dimuat sebelum pertama kali kita mengunjungi situs dan dikirimkan kepada kita sesudahnya. Mereka tidak tergantung pada kecepatan jaringan kita, dan bahkan dapat bekerja offline!
Service Worker
Seperti yang tadi disebutkan Service Worker adalah nama teknologi di balik Aplikasi Web Progresif, yang mendukung kemampuan offline, pemberitahuan push, dan caching sumber daya. Menurut Google, Service Worker adalah inti dari teknik PWA. Jadi, jika kita dapat mengetahui apakah situs web menggunakan teknologi Service Worker, kita dapat mengetahui apakah situs tersebut mungkin PWA.
Jika kita menggunakan browser berbasis Chrome, kita dapat memeriksanya dengan mudah dengan menggunakan Alat Inspektur. Klik kanan pada situs web yang ingin Anda periksa, klik Periksa Elemen. Lalu, buka tab Aplikasi> Pekerja Layanan. Kita dapat dengan mudah melihat apakah ada Service Worker di situs itu.
Tetapi trik ini hanya memberi kita petunjuk tentang kemungkinan situs web tertentu adalah PWA. Meskipun menjadi bagian inti dari PWA, Service Worker tidak eksklusif untuk PWA. Situs web non-PWA juga dapat memanfaatkan Service Worker untuk meningkatkan fungsionalitasnya.
Namun, kita dapat mengetahui dengan tepat jika situs web bukan PWA dengan melihat URL-nya. Jika URL situs web dimulai dengan http: // daripada https: // , berarti itu jelas bukan PWA. Hal ini karena PWA hanya dapat berfungsi pada situs web yang menjalankan domain aman, yaitu https.
Contoh Progressive Web Apps
Pada Januari 2019, Chrome 72 untuk Android dikirimkan dengan Trusted Web Activity (TWA). TWA memungkinkan tab Chrome untuk terbuka dalam mode independent. Pada gilirannya, ini memungkinkan fitur PWA di app store Google Play. Beberapa PWA pertama yang muncul di Google Play adalah Twitter Lite dan Google Maps Go. Mungkin nanti akan jauh lebih banyak dengan seiring waktu.
Akankah Progressive Web Apps Menggantikan Native Apps?
Progressive Web Apps adalah langkah persilangan yang sangat baik antara browser kita dan Native Mobile Application. Akankah PWA mengganti Native Application sepenuhnya? PWA bagus sebagai penawaran yang ringan, tetapi mengingat bahwa mereka saat ini sebagian besar fokus pada mereplikasi situs dan layanan yang ada, mereka tidak akan menggantikan Native Application. Setidaknya, tidak untuk saat ini. PWA bekerja dengan baik. Data yang tersedia di PWA Stats mendukung hal ini juga. Berikut adalah beberapa hal menarik yang menggambarkan bagaimana PWA mengubah interaksi kita dengan situs web yang umum digunakan:
- Trivago melihat peningkatan keterlibatan 150 persen untuk pengguna menambahkan PWA mereka ke layar beranda.
- “Situs beranda PWA Forbes ‘dimuat sepenuhnya hanya dalam 0,8 detik,” sementara tayangan per kunjungan naik 10 persen. PWA Forbes juga melihat panjang sesi pengguna menjadi dua kali lipat.
- Twitter Lite melihat peningkatan 65 persen dalam halaman per sesi, dengan peningkatan tweet yang besar sebesar 75 persen. Ini juga interaktif “dalam waktu kurang dari 5 detik melalui 3G.”
- Alibaba melihat peningkatan 76 persen dalam konversi seluler.
Kesimpulan
Jadi Apa Itu PWA (Progressive Web Apps)? PWA adalah aplikasi yang dapat bertindak sebagai halaman web dan aplikasi seluler asli pada saat yang sama, untuk memberikan pengalaman pengguna terbaik. PWA digunakan supaya pembaca dapat mengakses halaman web tanpa bantuan internet. Ini adalah cara kerja PWA di halaman web. Dalam Layanan PWA Service Worker dimaksudkan untuk mengontrol permintaan jaringan dan melayani secara offline, konten caching, pemberitahuan push dan sinkronisasi latar belakang.
Sekian artikel Apa Itu PWA (Progressive Web Apps). Nantikan artikel menarik lainnya dan jangan lupa share artikel ini ke teman-teman kalian. Terimakasih…