Isi
- Pendakian PWA
- PWA beraksi hari ini
- Instalasi
- Offline dan peluncuran langsung
- Pengalaman kelas satu
- Toko aplikasi
- Integrasi platform
- Tantangan desain dan UX
- Tahun PWA
Sama seperti desain web yang responsif menutup celah antara situs desktop dan seluler beberapa tahun yang lalu, teknik aplikasi web progresif saat ini menutup celah antara web dan dunia aplikasi. Dengan pengalaman pengguna dari desktop ke aplikasi seluler yang terkonvergensi dengan cepat, tampaknya internet yang jauh lebih ramping dan lebih efisien sedang berkembang - meskipun pasti bukan tanpa beberapa perubahan signifikan pada kode genetik yang mendasarinya.
- Cara membuat Aplikasi Web Progresif
Jelas ada beberapa tekanan selektif yang signifikan yang mendorong hal ini. Pertama-tama, membuat aplikasi asli untuk setiap ceruk tidak selalu merupakan penggunaan sumber daya yang efisien: pengguna berakhir dengan ratusan aplikasi besar yang membuang-buang bandwidth dan ruang disk yang berharga dan perusahaan menghabiskan banyak uang untuk membuat aplikasi hanya untuk mereka yang akan ditinggalkan. setelah versi pertama mereka. Dan sebagian besar aplikasi ini hanya didorong oleh konten web: informasi yang berasal dari layanan web atau sistem pengelolaan konten.
Definisi aplikasi web progresif tidak konkret. PWA hanyalah aplikasi web yang menggunakan beberapa API dan kemampuan baru di platform web menggunakan peningkatan progresif untuk menawarkan pengalaman seperti aplikasi di setiap platform dengan basis kode yang sama. Ini lebih merupakan sekumpulan praktik terbaik dan penggunaan API yang menciptakan pengalaman seperti aplikasi yang sangat baik bagi pengguna Anda, jadi Anda tidak memiliki atau tidak memiliki PWA; itu lebih seperti situs Anda lebih atau kurang PWA.
Apakah Anda akan mulai membangun situs baru? Coba gunakan pembuat situs web. Dan pastikan Anda mendapatkan dukungan yang Anda butuhkan dari layanan hosting web yang layak juga. Atau untuk sesuatu yang sedikit berbeda, lihat panduan kami untuk penyimpanan cloud terbaik.
Pendakian PWA
Meskipun nama PWA diciptakan pada tahun 2015 di artikel Tab Lolos Tanpa Kehilangan Jiwa oleh Alex Russell yang bekerja di Google untuk tim Chrome, perjalanan mereka sebenarnya tidak dimulai dari sana. Kami dulu memiliki Aplikasi HTML (HTA), yang dibuat oleh Microsoft pada tahun 1999, bersama dengan banyak platform aplikasi web lain dari Nokia, BlackBerry, dan perusahaan lain. Kemudian, pada tahun 2007, Steve Jobs mempresentasikan apa yang pada saat itu merupakan satu-satunya cara untuk membuat aplikasi untuk iPhone asli: PWA, dengan nama yang berbeda. Chrome memulai dari sana, meningkatkan API beberapa tahun kemudian dan menemukan nama PWA.
Dengan begitu banyak pengalaman gagal sebelumnya yang mencoba menghadirkan konten web ke dunia aplikasi, mengapa menurut kami ini akan berhasil sekarang? Terutama, semua tergantung pada perusahaan yang sekarang bekerja dan mempromosikan teknologi di balik PWA, seperti Microsoft, Google, Apple, dan Mozilla, untuk menyebutkan beberapa. Selain itu, kinerja platform web mencapai titik di mana tidak ada perbedaan yang terlihat saat Anda membandingkan PWA yang dirancang dengan baik dengan aplikasi asli. Kondisi tersebut belum pernah ada sebelumnya dan itulah salah satu alasan komunitas web memutuskan bahwa sudah waktunya untuk PWA.
PWA beraksi hari ini
Saat ini PWA berfungsi penuh dan dapat dipasang di:
- Android dengan sebagian besar browser, dengan Chrome menawarkan pengalaman terbaik
- iOS dengan Safari
- Chromebook
- Windows 10 dari Microsoft Store
- Ponsel berfitur dengan KaiOS - cabang dari Firefox OS - saat ini tersedia untuk jutaan pengguna terutama di India
Dukungan juga akan datang ke macOS, Windows dan Linux melalui Chrome akhir tahun ini. Tersedia hari ini sebagai bendera eksperimental 'Desktop PWA' jika Anda ingin mencobanya sekarang. Penginstalan pada Windows di Edge tanpa penggunaan toko juga akan dilakukan nanti, meskipun tidak ada kerangka waktu tertentu yang ditentukan.
Jika Anda membaca ulang daftarnya, Anda dapat melihat setiap platform memiliki atau akan memiliki dukungan untuk PWA yang dapat diinstal sepenuhnya di bulan-bulan berikutnya. Dan karena PWA hanyalah situs web dengan fitur di atasnya yang hanya akan diaktifkan di browser yang kompatibel, kami bahkan dapat mengatakan bahwa PWA kompatibel dengan semua browser dari fungsi dasarnya.
Juga, PWA saat ini sedang dibuat dari sebagian besar CLI untuk kerangka kerja yang berbeda, termasuk CLI Angular 6+, Aplikasi React Create, PWA Starter Kit dari Polymer dan Preact CLI. Akhirnya, tim Ionic Framework muncul dengan ide Capacitor, pengganti Cordova open-source yang memungkinkan PWA asli di setiap toko aplikasi.
Instalasi
Salah satu aspek penting dari PWA adalah penginstalan aplikasi. Proses ini dilakukan dalam dua langkah opsional: pengunduhan dan penyimpanan offline file aplikasi dan penginstalan ikon di OS. Karena kedua langkah tersebut opsional, Anda dapat menawarkan pengalaman offline di browser atau Anda dapat menawarkan ikon tanpa penginstalan offline. Namun PWA yang sebenarnya harus menyertakan keduanya: harus disajikan dengan TLS di bawah HTTPS dan pengguna akan memutuskan apakah mereka akan menggunakannya di browser atau di dalam ikon yang dipasangnya sendiri.
Offline dan peluncuran langsung
Otak PWA adalah pekerja layanan, file JavaScript yang diinstal di perangkat pengguna yang bertanggung jawab untuk mendownload file aplikasi, menyimpannya ke dalam cache, dan kemudian menyajikannya saat diperlukan. Setelah service worker diinstal, ia bertindak seperti proxy jaringan untuk setiap sumber daya yang dibutuhkan aplikasi web: ia dapat memutuskan untuk mengambilnya dari jaringan atau mengirimkannya dari cache lokal, yang membuat aplikasi tersedia offline dan juga tersedia hanya dalam beberapa milidetik meskipun pengguna memiliki koneksi, meniru peluncuran aplikasi asli.
Untuk memasang pekerja layanan, dokumen HTML Anda perlu menyertakan sesuatu seperti:
if (’serviceWorker’ di navigator) navigator.serviceWorker.register ("sw.js");
Itu akan menginstal file "sw.js" ke perangkat pengguna untuk folder saat ini di domain saat ini - sebuah konsep yang dikenal sebagai cakupan. Setelah dipasang, kunjungan berikutnya ke URL apa pun dalam cakupannya akan dikelola oleh pekerja layanan tersebut.
Misalkan kita memiliki PWA dengan empat file: index.html, app.js, app.css, dan logo.png. Hal pertama adalah menginstal file tersebut ke dalam cache di file sw.js.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; diri. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (resource)));});
Kemudian agar PWA selalu disajikan dari cache, kita perlu mendengarkan peristiwa fetch dalam pekerja layanan dan memutuskan kebijakan cache yang akan digunakan, seperti cache terlebih dahulu dengan cuplikan berikut.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). lalu (res => res);
Dalam hal ini, setiap kali pengguna mengakses PWA (baik dari browser atau dari ikon yang diinstal), mesin akan mengambil file dari cache. Keuntungan PWA dibandingkan aplikasi asli adalah perangkat tidak perlu mengunduh semua file lagi saat ada perubahan, hanya file yang telah berubah dengan proses transparan. Selain itu, kami masih dapat mengunduh bagian aplikasi sesuai permintaan.
Tetapi tantangannya adalah bagaimana Anda tahu file mana yang diperbarui di server sehingga Anda dapat menggantinya di cache? Jika tidak ingin menulis service worker tingkat rendah untuk mengelolanya, Anda dapat menggunakan Workbox library open-source, yang akan membantu Anda membuat service worker dan manifes sumber daya untuk memperbarui paket yang diinstal.
Ketahuilah bahwa file PWA Anda akan dihapus jika ada tekanan penyimpanan pada perangkat, kecuali jika Anda meminta Penyimpanan Persisten jika tersedia:
if (’storage’ di navigator && ’persist’ di navigator.storage) navigator.storage.persist ();
Di Chrome dan sebagian besar browser Android, aplikasi Anda tidak dapat menggunakan lebih dari lima persen dari ruang yang tersedia; di iOS hanya 50MiB (hampir 50MB) per host; di Edge itu bervariasi sesuai dengan ukuran memori total dan di Windows Store, itu tidak terbatas.
Pengalaman kelas satu
Kami memiliki otak dan sekarang saatnya untuk hati: aplikasi web bermanifestasi. Tujuan mengubah situs web menjadi PWA tidak hanya untuk memastikannya tersedia dengan cepat atau saat offline tetapi juga untuk memungkinkannya memiliki ikonnya sendiri di OS dan menawarkan pengalaman yang sepenuhnya berdiri sendiri seperti aplikasi terinstal lainnya.
Manifes adalah file JSON yang mendefinisikan metadata untuk PWA yang digunakan oleh browser atau app store untuk menentukan perilaku penginstalan.
File tersebut mendefinisikan beberapa properti sebagai metadata untuk PWA Anda. Setiap OS akan membaca properti ini dan mencoba yang terbaik untuk menyesuaikan dengan pengalaman yang Anda sukai. Misalnya, Android akan membaca 'display: standalone' dan membuat pengalaman aplikasi normal. Dengan 'display: minimal-ui', ini akan menciptakan pengalaman dengan URL yang terlihat dan sertifikat TLS - berguna untuk aplikasi yang sensitif terhadap keamanan. Dengan 'display: fullscreen', aplikasi ini menciptakan aplikasi yang sepenuhnya imersif tanpa bilah status atau tombol kembali yang terlihat. Serangkaian ikon dan warna menentukan bagaimana tampilan splash screen atau bilah judul akan terlihat di jendela aplikasi Anda.
Ada beberapa generator manifes, seperti Web App Manifest Generator atau PWA Builder yang juga akan mengubah ukuran ikon untuk Anda dalam resolusi berbeda jika Anda memberikan yang beresolusi tinggi (minimal 512 piksel).
Jika Anda memiliki file manifes yang ditautkan dalam dokumen HTML, pengguna akan dapat menginstal aplikasi menggunakan teknik yang berbeda bergantung pada browser, biasanya disebut Tambahkan ke Layar Utama, Instal atau hanya Tambah. Jika PWA Anda dapat dirayapi oleh Bing, Microsoft akan secara otomatis menambahkannya ke Microsoft Store sehingga pengguna Windows 10 dapat menginstalnya dari sana.
Pada beberapa sistem operasi, PWA Anda akan memiliki kemampuan untuk menangkap tautan. Ini berarti bahwa setelah pengguna menginstal aplikasi, setiap URL dalam cakupan manifes Anda akan dibuka dalam batas-batas aplikasi Anda dan bukan di browser, tidak peduli apakah itu muncul di browser atau aplikasi lain seperti WhatsApp, Facebook. atau email.
Jika Anda lulus persyaratan PWA yang kami tentukan di sini, beberapa platform akan menawarkan lencana ambien (ikon kecil biasanya di bilah URL yang menentukan bahwa web dapat dipasang) atau spanduk aplikasi web. Jika mau, Anda juga dapat menambahkan tombol Instal kustom Anda sendiri menggunakan cuplikan berikut:
window.addEventListener ("beforeinstallpr ompt", function (e) {e.prompt (); // akan menampilkan prompt asli penginstalan})
Jika PWA diinstal, acara 'appinstalled' akan diaktifkan pada objek jendela sehingga Anda dapat melacak statistik yang mendengarkannya.
Toko aplikasi
Salah satu manfaat utama memasang dari browser adalah dapat menghindari proses persetujuan toko aplikasi atau harus membayar untuk menjadi penerbit. Itu datang dengan keuntungan yang jelas, seperti penerbitan instan, membuat aplikasi pribadi untuk perusahaan atau aplikasi yang tidak boleh diterima di toko.
Tetapi beberapa perusahaan ingin berada di dalam toko. Saat ini, satu-satunya toko yang secara resmi menerima PWA adalah Windows Store dan kaiOS Store. Untungnya, dengan alat seperti Capacitor (saat ini dalam Alpha) atau PWA Builder, kami juga dapat membuat dan menandatangani paket asli untuk platform lain.
Ada beberapa PWA yang sudah diterbitkan di Google Play Store, seperti Twitter Lite dan Google Maps Go, saat ini dalam penerapan khusus. Chrome akan menawarkan solusi dari Chrome 68 melalui aktivitas web tepercaya. Sejak saat itu, kami akan dapat membuat paket Android (APK) dengan peluncur ke PWA kami dan mengunggahnya ke toko. Untuk Microsoft Store di Windows 10, situs PWA Builder saat ini membantu pembuatan paket APPX Windows 10. Dengan menggunakan tampilan web, Anda mungkin dapat membuat aplikasi iOS untuk App Store secara manual, tetapi berhati-hatilah dengan aturan toko.
Integrasi platform
Dengan menerapkan teknik peningkatan progresif, Anda akan dapat menggunakan banyak fitur, termasuk pemberitahuan push, akses kamera dan mikrofon, geolokasi, sensor, pembayaran, dialog berbagi, dan penyimpanan offline. Semua fitur ini berjalan langsung dalam model keamanan browser, termasuk dialog izin.
Kami juga dapat berkomunikasi dengan aplikasi lain melalui skema URI, seperti membuka Twitter, YouTube atau WhatsApp melalui URL atau URI kustom mereka, seperti whatsapp: //.
Terakhir, saat membuat PWA asli yang dipublikasikan ke toko menggunakan Kapasitor atau ke Microsoft Store, kami akan dapat menjembatani ke API asli yang akan memungkinkan kami untuk mengeksekusi hampir semua kode asli. Integrasi dengan Windows 10 itu termasuk akses perangkat keras tetapi juga integrasi dengan OS, menawarkan opsi seperti Pin to Start. Misalnya, Twitter PWA memungkinkan Anda menyematkan pengguna mana pun ke layar awal Anda.
Tantangan desain dan UX
Merancang PWA memiliki tantangan yang unik, jadi penting untuk meluangkan waktu untuk meneliti, menguji sebanyak mungkin, dan mempertimbangkan hal-hal berikut:
- Pengguna akan mengharapkan pengalaman seperti aplikasi.
- Proses instalasinya masih baru, jadi kami perlu melakukan upaya ekstra untuk menjelaskan cara menginstal aplikasi.
- Memperbarui aplikasi di latar belakang tanpa interaksi pengguna memang bagus, tetapi juga menambahkan beberapa tantangan untuk UX.
- Di desktop, desain web responsif mengambil batas baru karena jendela PWA bisa jadi kecil, jauh lebih kecil daripada viewport seluler. Ini berarti kami perlu membuat tampilan khusus atau widget kecil untuk format ini, seperti yang terlihat di Chrome OS saat ini.
- Notifikasi push harus menambah nilai bagi pengguna saja, jadi belajarlah untuk bertanya pada saat yang tepat dan jangan menyia-nyiakan kesempatan untuk mengirimkan pesan yang tidak berguna atau menarik.
- Kami perlu mendesain untuk kinerja web dan untuk akses offline.
Tahun PWA
Dengan tambahan iOS dan desktop tahun ini, PWA ada di mana-mana saat ini. Tapi kita perlu ingat bahwa perjalanan mereka baru saja dimulai, jadi nantikan perubahan yang sering terjadi dan pastikan Anda selalu diperbarui dengan teknik dan ide terbaru untuk memberikan pengalaman pengguna yang luar biasa saat platform berkembang.
Artikel ini pertama kali diterbitkan pada edisi 308 pada bersih, majalah terlaris di dunia untuk perancang dan pengembang web. Beli edisi 308 di sini atau berlangganan di sini.
