✌🏽 ✊🏻 🤱🏽 Aplikasi web progresif. Panduan untuk bertindak 🚲 🧛🏽 😞

Halo, Habr! Kami sedang menjajaki kemungkinan penerbitan buku tentang PWA (Aplikasi Web Progresif). Sudah ada banyak publikasi tentang Habré tentang topik ini, materi dari blog perusahaan RUVDS sangat menarik , dari mana kami akan mengutip definisi PWA:

... 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.

Pertanyaannya terkadang muncul: bagaimana hubungan aplikasi web progresif dengan yang asli? Apakah layak untuk mengembangkan PWA jika Anda sudah memiliki penduduk asli? Pertama-tama, pertanyaan ini, serta banyak pertanyaan lainnya, dijawab oleh artikel Jason Grigsby dari situs "A List Apart", yang telah kami terjemahkan untuk Anda hari ini. Artikel ini adalah kutipan dari buku 2018. Tolong jangan lupa untuk memilih.

Untuk menentukan apakah organisasi Anda bijaksana untuk mengembangkan aplikasi web progresifnya sendiri (PWA), tanyakan pada diri sendiri dua pertanyaan:

Apakah organisasi Anda memiliki situs web? Jika demikian, maka aplikasi web progresif mungkin akan berguna. Kedengarannya norak, tetapi: disarankan untuk mengubah hampir semua situs web menjadi aplikasi web progresif, karena mengandung praktik terbaik Web.
Apakah organisasi Anda menghasilkan uang melalui situs ini melalui penjualan elektronik, iklan, atau dengan cara lain? Jika demikian, maka Anda pasti membutuhkan aplikasi web progresif, karena dapat secara signifikan meningkatkan pendapatan.

Ini tidak berarti bahwa situs tersebut perlu mengimplementasikan semua fitur yang ada dari aplikasi web progresif. Anda mungkin tidak perlu menyediakan fungsionalitas offline, pemberitahuan push, atau bahkan kemampuan untuk mengatur situs Anda di layar beranda perangkat pengguna. Kemungkinan minimum absolut akan mencukupi: situs yang aman, pekerja layanan yang mempercepat pekerjaannya, file manifes - hal-hal seperti itu akan berguna di situs mana pun.

Tentu saja, Anda dapat memutuskan bahwa situs web pribadi atau proyek sampingan Anda bukan sumber daya yang layak untuk mengembangkan aplikasi web progresif, menghabiskan waktu dan tenaga ekstra untuk itu. Ini dapat dimengerti, dan dalam jangka panjang, bahkan situs pribadi akan ditumbuhi dengan kemampuan aplikasi web progresif, ketika dukungan untuk fitur-fitur ini akan ditambahkan ke sistem manajemen konten di mana situs-situs ini didasarkan. Sebagai contoh, Magento dan WordPress pada saat penulisan teks ini sudah mengumumkan rencana untuk menambahkan kemampuan aplikasi web canggih ke platform mereka. Yang lain diharapkan untuk mengikuti.

Namun, jika Anda menjalankan situs yang entah bagaimana memberikan keuntungan bagi organisasi Anda, Anda harus mengubahnya menjadi aplikasi web progresif dan rencanakan bagaimana melakukannya sekarang. Perusahaan yang telah menggunakan aplikasi web canggih menerima peningkatan konversi, keterlibatan pengguna, peningkatan penjualan, dan pendapatan iklan. Misalnya, Pinterest sebagai hasil dari pengenalan PWA, audiens utama meningkat 60 persen , dan pendapatan iklan yang dihasilkan pengguna tumbuh 44 persen. Pengguna West Elm mulai menghabiskan sekitar 15 lebih banyak waktu di situs, pendapatan dari satu kunjungan meningkat 9 persen .

Gambar: Eddie Osmani, Google, menulis studi kasus tentang aplikasi web progresif Pinterest, membandingkannya dengan situs seluler lama mereka dan aplikasi asli mereka.

Ada begitu banyak kisah sukses yang terkait dengan aplikasi web progresif sehingga perusahaan saya, Cloud Four, telah meluncurkan situs bernama PWA Stats yang melacaknya. Kemungkinan akan ada kasus tentang organisasi yang serupa dengan Anda, dan dengan contoh ini Anda dapat meyakinkan kolega tentang kesesuaian aplikasi web progresif untuk perusahaan Anda.

Gambar : PWAstats.com berisi statistik dan cerita yang membuktikan keefektifan aplikasi web progresif.

Dan pekerjaan persuasif semacam itu mungkin diperlukan. Terlepas dari keuntungan nyata dari aplikasi web progresif, banyak bisnis belum menata ulang untuk mereka, sering kali karena manajemen belum tahu tentang PWA. (Oleh karena itu, ketika Anda mulai membuat PWA sekarang, Anda mungkin mendapatkan waktu!)

Namun, ada juga kebingungan serius mengenai apa yang dapat dilakukan oleh aplikasi web tingkat lanjut, apa yang dapat mereka gunakan, dan bagaimana kaitannya dengan web asli aplikasi. Kebingungan semacam itu memicu ketakutan, ketidakpastian, keraguan, dan semua ini memperlambat implementasi aplikasi web progresif.

Jika Anda menganjurkan implementasi PWA di organisasi Anda, maka beberapa mungkin tidak memahami Anda, dan Anda bahkan mungkin menghadapi perlawanan. Jadi mari kita bahas beberapa argumen yang akan membantu Anda memperkuat posisi Anda dan berguna saat meyakinkan kolega Anda.

Aplikasi asli dan PWA dapat hidup berdampingan

Jika organisasi Anda sudah memiliki aplikasi asli, maka pemangku kepentingan dapat keberatan bahwa selain itu mereka tidak memerlukan PWA - terutama karena keunggulan utama PWA adalah pengenalan fitur dan fungsionalitas yang melekat dalam aplikasi asli.
Sangat menggoda untuk mengasumsikan bahwa aplikasi web progresif bersaing dengan yang asli - sebagai aturan, dalam uraian inilah mereka ditulis di media. Tetapi pada kenyataannya, aplikasi web progresif berfungsi terlepas dari apakah perusahaan sudah memiliki yang asli.

Berhentilah sejenak dari debat "aplikasi asli versus aplikasi web" dan fokus pada kekhususan interaksi pengguna dengan situs web organisasi Anda di Internet. Dianjurkan untuk menggunakan aplikasi web canggih hanya karena keuntungan mereka sendiri: mereka membantu Anda memperluas audiens pengguna Anda, melindungi situs Anda, menghasilkan keuntungan, memberikan interaksi yang lebih andal dengan pengguna dan memberi tahu mereka tentang pembaruan - semua ini akan melengkapi kemampuan aplikasi asli Anda.

Ekstensi Pemirsa Khusus

Tidak semua pengguna Anda saat ini menginstal aplikasi asli Anda - dan pengguna potensial Anda tidak memilikinya sama sekali. Mungkin, aplikasi ini bahkan tidak diinstal di sebagian besar pengguna biasa, tetapi mereka yang masih menginstalnya bisa pergi ke sana dari PC.

Meningkatkan kualitas interaksi dengan situs, Anda meningkatkan peluang bahwa pengguna saat ini dan di masa depan akan membaca konten Anda atau membeli produk Anda (atau bahkan mengunduh aplikasi asli Anda!) Anda dapat meningkatkan kualitas bekerja dengan situs menggunakan aplikasi web progresif.

Meskipun blog teknis meyakinkan Anda, web seluler tumbuh lebih cepat daripada aplikasi asli. Situs web comScore membandingkan 1000 aplikasi seluler teratas dengan 1000 situs paling banyak ditempatkan dan menyimpulkan bahwa “pemirsa web seluler hampir tiga kali lipat dari aplikasi seluler dan tumbuh dua kali lebih cepat . "

Meskipun benar bahwa orang-orang menghabiskan lebih banyak waktu di aplikasi seluler favorit mereka daripada di web, perlu diingat bahwa kadang-kadang sangat sulit untuk meyakinkan seseorang untuk menginstal aplikasi Anda di perangkat mereka. Sekitar setengah dari pengguna smartphone di AS, sebagai suatu peraturan, tidak menginstal bahkan satu aplikasi per bulan .

Jika aplikasi asli Anda ada di toko aplikasi, ini tidak menjamin bahwa orang akan menginstalnya. Bekerja mempromosikan aplikasi dan mendorong pengguna untuk menginstalnya itu mahal. Menurut Liftoff, sebuah perusahaan pemasaran aplikasi seluler,biaya rata-rata yang diperlukan untuk menginstal aplikasi oleh satu pengguna adalah $ 4,12 dan melambung hingga $ 8,21 per pengguna, jika Anda ingin seseorang membuat akun di aplikasi Anda.

Jika Anda cukup beruntung dan seseorang mulai menginstal aplikasi Anda, kendala berikut muncul: Anda perlu meyakinkan orang untuk tidak berhenti menggunakan aplikasi. Ketika seorang spesialis, Andrew Chen, menganalisis data retensi pengguna pada materi dari 125 juta ponsel, ia menemukan bahwa aplikasi rata - rata kehilangan 77% dari DAU (pengguna aktif harian) 3 hari setelah instalasi . Dalam 30 hari, 90% DAU hilang. Lebih dari 90 hari, lebih dari 95% DAU hilang.

Gambar: Loyalitas pengguna ponsel tetap sangat singkat. Aplikasi rata-rata kehilangan 95% pengguna aktifnya dalam 90 hari.

Aplikasi web progresif tidak menghadapi tantangan seperti itu. Memahami aplikasi web progresif tidak lebih sulit bagi seseorang daripada di situs Anda, karena ini adalah situs Anda. Semua fitur aplikasi web progresif juga segera tersedia. Anda tidak harus melakukan langkah perantara: pertama pergi ke toko aplikasi, kemudian unduh aplikasi dari sana. Instalasi cepat: terjadi di latar belakang ketika Anda pertama kali mengunjungi situs dan secara harfiah turun untuk menambahkan ikon ke layar utama.

Seperti yang ditulis Alex Russell dalam artikelnya tentang Medium di 2017:

Slippage saat memasang PWA jauh lebih rendah. Metrik internal kami di Google menunjukkan bahwa dengan volume yang sebanding dari spanduk PWA dan spanduk aplikasi asli (perbandingannya hampir sama dengan apel dan apel), spanduk PWA memberikan konversi 5-6 kali lebih sering. Lebih dari setengah pengguna yang memutuskan untuk menginstal aplikasi asli ketika menavigasi melalui spanduk tersebut tidak menyelesaikan proses instalasi, sementara instalasi PWA terjadi hampir secara instan.

Singkatnya, proporsi yang signifikan namun terus bertambah dari pengguna Anda berkomunikasi dengan Anda melalui web. Aplikasi web progresif dapat meningkatkan pendapatan, meningkatkan keterlibatan pengguna, serta jumlah mereka.

Lindungi situs Anda

Jika Anda mengumpulkan informasi kartu kredit atau informasi hak milik lainnya, Anda hanya perlu memberi pengguna situs web yang terlindungi dengan baik. Tetapi bahkan jika data rahasia tidak diproses di situs Anda, masih masuk akal untuk menggunakan protokol HTTPS dan memberi pengguna interaksi yang aman dengan situs tersebut. Lalu lintas jaringan yang paling tidak bersalah mungkin mengandung sinyal yang menyederhanakan identifikasi pengguna dan potensi peretasan data mereka. Apa yang bisa kita katakan tentang kekhawatiran tentang kemungkinan pengawasan negara.

Sebelumnya, pengoperasian server yang aman itu mahal, rumit, dan juga (sepertinya) berjalan lebih lambat dari biasanya. Hari ini semuanya telah berubah. Sertifikat SSL / TLS dulu biayanya ratusan dolar, tetapi hari ini penyedia Let's Encryptmemberi mereka secara gratis. Banyak penyedia hosting bekerja dengan penyedia sertifikat, sehingga Anda dapat mengonfigurasi HTTPS dengan satu klik. Selain itu, ternyata HTTPS tidak selambat dulu .

Situs HTTPS juga dapat memutakhirkan ke versi baru HTTP yang disebut HTTP / 2. Keuntungan utama dari HTTP / 2 adalah secara signifikan lebih cepat daripada HTTP / 1. Banyak penyedia hosting dan jaringan pengiriman konten (CDN) menyatakan bahwa ketika Anda beralih ke HTTPS Anda terhubung ke HTTP / 2 tanpa ada tindakan tambahan dari pihak Anda.

Sekalipun insentif semacam itu tidak cukup untuk beralih ke HTTPS, produsen browser menggunakan metode carrot and stick, mendorong situs untuk memperkenalkan perubahan. Sebagai "cambuk"Chrome mulai memperingatkan pengguna bahwa mereka memasukkan data mereka di situs yang tidak dilengkapi dengan HTTPS . Peramban lain cenderung mengikuti dan akan menandai situs yang berfungsi tanpa enkripsi, sehingga pengguna menyadari bahwa data mereka dapat dicegat.

Sebagai browser gingerbread HTTPS, browser mulai membutuhkan kemampuan HTTPS dari situs sebagai suatu keharusan. Jika Anda ingin menggunakan teknologi web terbaru dan terhebat, maka Anda tidak dapat melakukannya tanpa HTTPS . Bahkan, beberapa fitur yang digunakan untuk mengerjakan HTTP tanpa jaminan sekarang dianggap memengaruhi data sensitif. Misalnya, misalnya, geolokasi. Dalam HTTPS, mereka terbatas. Setelah beberapa pemikiran, tampaknya ini juga cambuk kecil. Cambuk Gingerbread?

Mengingat semua ini, disarankan untuk memberi pengguna Anda situs yang aman. Jadi peringatan tidak masuk akal yang mengerikan segera dikecualikan. Anda mendapatkan akses ke kemampuan browser baru. Dapatkan kecepatan yang disediakan oleh HTTP / 2. Dan juga: mengatur panggung untuk aplikasi web progresif.
Untuk menggunakan pekerja layanan, teknologi utama yang terkait dengan aplikasi web progresif, situs harus dilengkapi dengan HTTPS. Karena itu, jika Anda ingin menikmati semua barang PWA sekaligus, pertama-tama Anda perlu melakukan beberapa pekerjaan persiapan yang serius.

Tingkatkan keuntungan

Ada banyak penelitian yang menunjukkan korelasi antara kecepatan situs dan berapa banyak waktu dan uang yang orang habiskan untuk menggunakannya. Menurut DoubleClick, " 53% kunjungan ke situs web seluler terganggu yang diprakarsai oleh pengguna jika halaman unduh memakan waktu lebih dari 3 detik ." Perusahaan Walmart telah menemukan bahwa untuk setiap 100 milidetik untuk mengoptimalkan kecepatan pemuatan halaman turun menjadi 1% dari pendapatan tambahan .

Pada akhirnya, perangkat lunak tinggi kecepatan berinteraksi dengan situs sangat berarti. Sayangnya, durasi rata - rata memuat halaman situs seluler saat terhubung melalui 3G adalah 19 detik . Ini adalah masalah yang, sekali lagi, aplikasi web progresif membantu mengatasinya.

Menggunakan pekerja layanan, Odha menyediakan interaksi yang sangat cepat. Menggunakan pekerja layanan, pengembang dapat secara eksplisit menunjukkan file mana yang harus disimpan oleh browser dalam cache lokal dan dalam keadaan apa harus memeriksa pembaruan untuk file yang di-cache. File yang disimpan dalam cache lokal dapat diakses lebih cepat daripada file yang diambil dari jaringan.

Saat meminta halaman baru dalam aplikasi web progresif, pengguna sudah memiliki dalam cache lokal perangkat sebagian besar file yang diperlukan untuk menampilkan halaman ini. Dengan demikian, halaman tersebut dapat dimuat hampir secara instan, karena browser hanya perlu mengunduh informasi tambahan pada halaman ini.

Dalam banyak hal, faktor inilah yang memberikan kecepatan tinggi pekerjaan dengan aplikasi asli. Dengan menginstal aplikasi asli, pengguna mengunduh file yang diperlukan untuk menjalankan aplikasi. Setelah itu, aplikasi asli hanya perlu mengambil data baru dari jaringan. Pekerja layanan dapat melakukan hal serupa saat berinteraksi dengan web.

Aplikasi web progresif dapat memiliki efek dramatis pada kinerja. Misalnya, Tinder berhasil mengurangi waktu pemuatan halaman dari 11,91 detik menjadi 4,69 detik dengan mengembangkan aplikasi web progresif, apalagi, itu 90% lebih kompak daripada aplikasi Android asli mereka. Jaringan hotel Treebo meluncurkan aplikasi web progresifnya sendiri dan menerima peningkatan konversi empat kali lipat selama setahun; tingkat konversi untuk pengguna yang kembali naik tiga kali lipat, dan waktu interaksi pengguna rata-rata dengan situs seluler turun menjadi 1,5 detik.

Pastikan keandalan jaringan

Jaringan seluler tidak berfungsi dengan baik. Anda baru saja memiliki koneksi LTE berkecepatan tinggi, dan sekarang Anda sudah merangkak dengan kecepatan 2G atau bahkan menemukan diri Anda offline. Kita semua menemukan diri kita dalam situasi seperti itu. Tetapi sebagian besar situs masih dilakukan dengan harapan bahwa bekerja dengan mereka akan terjadi pada jaringan yang andal.

Pendekatan PWA memungkinkan Anda untuk membuat aplikasi yang dapat Anda terus bekerja dengan offline. Bahkan, untuk memastikan pekerjaan offline dengan aplikasi dan untuk mempercepat interaksi dengan halaman web, teknologi yang sama digunakan: pekerja layanan.
Seperti yang sudah Anda ketahui, pekerja layanan memungkinkan Anda untuk secara eksplisit memberi tahu browser data yang akan disimpan secara lokal. Kategori file ini dapat diperluas: biarkan tidak hanya sumber daya yang diperlukan untuk mengunduh aplikasi, tetapi juga konten halaman web sehingga pengguna tidak dapat mengganggu tampilan mereka, bahkan saat offline.

Gambar : Bilah judul di aplikasi web progresif housing.com berubah warna dari ungu (kiri) menjadi abu-abu (kanan) saat offline. Konten yang dilihat pengguna sebelumnya atau ditambahkan ke favorit tersedia offline (di sebelah kanan), dan ini masuk akal, karena aplikasi housing.com ditujukan untuk pasar India, dan di India koneksi jaringan bisa lambat dan tidak dapat diandalkan.

Menggunakan pekerja layanan, Anda bahkan dapat melakukan pra-cache shell aplikasi dengan melakukan ini "di belakang layar". Jadi, ketika seorang pengunjung pertama kali datang ke aplikasi web progresif, ia akan dapat mengunduh seluruh aplikasi, menyimpannya dalam cache - dan itu saja, Anda dapat bekerja dengannya secara offline tanpa ada tindakan tambahan dari pihak pengguna.

Jangan lepaskan pengguna

Mungkin pemberitahuan push adalah cara terbaik untuk melibatkan pengguna dalam bekerja dengan aplikasi. Pemberitahuan push menggoda seseorang, mendorongnya untuk kembali ke aplikasi untuk mendapatkan informasi lezat - dari berita penting hingga pesan obrolan.

Lalu, mengapa, menerapkan pemberitahuan push hanya untuk mereka yang telah menginstal aplikasi asli? Misalnya, jika Anda memiliki aplikasi messenger, atau dirancang untuk bekerja dengan jejaring sosial, akan sangat membantu untuk memberi tahu pengguna pesan baru.

Gambar : Aplikasi Twitter progresif yang disebut Twitter Lite mengirimkan pemberitahuan yang sama dengan aplikasi asli (kiri). Ketika Anda memilih pemberitahuan seperti itu, Anda segera pergi ke Twitter Lite ke tweet yang dimaksud (kanan).

Aplikasi web progresif dan, khususnya, pekerja layanan yang kami cintai, memungkinkan kami untuk menggunakan pemberitahuan push di situs mana pun. Notifikasi bukan fitur yang diperlukan dalam aplikasi web progresif, tetapi mereka sering efektif dalam meningkatkan keterlibatan kembali pengguna dan pertumbuhan pendapatan.

Terlepas dari apakah Anda memiliki aplikasi asli, aplikasi web progresif tidak mengganggu Anda. Setiap langkah dalam mengembangkan aplikasi semacam itu adalah langkah menuju peningkatan situs web. Situs harus aman. Harus cepat. Akan lebih baik jika mereka tersedia secara offline dan, jika perlu, dapat mengirim pemberitahuan kepada pengguna.
Para pengguna yang tidak memiliki aplikasi asli Anda (atau mereka tidak menggunakannya) akan menikmati kenyataan bahwa bekerja dengan situs Anda menjadi jauh lebih nyaman. Nilai tambah yang besar untuk seluruh bisnis Anda. Sangat sederhana.