Penulis materi, terjemahan yang kami terbitkan hari ini, mengatakan bahwa ia mungkin sedang terburu-buru, tetapi apa yang ingin ia bicarakan adalah berita yang sangat menarik. Kita berbicara tentang aplikasi web progresif desktop, yang mungkin secara signifikan menggantikan posisi aplikasi berdasarkan Electron.
Inovasi Chrome v70
Versi terbaru Chrome (v70) mendukung Desktop Progressive Web Apps (PWA) pada platform Linux dan Windows.
Dukungan PWA Desktop di ChromeJika Anda melihat daftar sistem yang didukung, segera menjadi jelas tidak adanya MacOS di dalamnya. Namun, ini hanya sampai Chrome v72 dirilis.
Dukungan PWA Desktop pada MacOSPenting untuk dicatat bahwa meskipun fitur ini tidak diaktifkan secara default di MacOS, fitur ini dapat diaktifkan menggunakan flag yang sesuai. Untuk melakukan ini, buka Chrome, buka
chrome: // flags dan temukan flag ini di sana. Anda juga dapat langsung menuju ke flag menggunakan tautan
chrome: // flags / # enable-desktop-pwas .
Apa itu aplikasi web progresif?
Kami tidak akan membahas detail spesifik tentang PWA di sini.
Ini bagian dokumentasi Google tempat Anda bisa membacanya. Untuk melihat dan mencoba PWA dengan mata Anda sendiri, buka Chrome untuk Android atau Safari di iOS (di sini, bagaimanapun, tidak semua fitur PWA didukung) dan lihat contoh
- contoh
ini . Dan di
sini ada pidato tentang hal ini dengan Google I / O '18.
Apa itu Elektron?
Electron adalah platform yang memungkinkan pengembang untuk membuat aplikasi desktop lintas platform menggunakan JavaScript, HTML, dan CSS. Beberapa pustaka dan kerangka kerja JavaScript yang hebat juga digunakan di sini. Ini membuatnya lebih mudah bagi pemrogram web untuk memasuki pengembangan aplikasi desktop. Aplikasi berbasis elektron telah mendapatkan popularitas luar biasa dalam beberapa tahun terakhir. Sebagai bagian dari proyek seperti Slack, VS Code, Atom, Discord, banyak upaya telah diinvestasikan dalam mengembangkan aplikasi menggunakan Electron. Jika Anda tidak terbiasa dengan proyek-proyek ini, maka Anda harus melihat aplikasi dan layanan yang sesuai. Aplikasi desktop tradisional sering tampak canggung, elemen antarmuka mereka tampak seperti sesuatu yang sudah ketinggalan zaman. Elektron telah membawa keindahan dan keanggunan ke dunia aplikasi desktop.
Apa hubungannya PWA dengan itu?
Meskipun aplikasi Elektron adalah fenomena yang berkembang dan berkembang, dan implementasinya dekat dengan penerapan aplikasi web, mereka masih memiliki beberapa kelemahan. Pertama, aplikasi tersebut menggunakan instans browser Chromium mereka sendiri. Banyak orang tahu berapa banyak RAM yang dibutuhkan agar Chrome berfungsi. Sekarang, untuk menilai situasi yang muncul dalam sistem ketika beberapa aplikasi Elektron diluncurkan secara bersamaan, Anda perlu mengambil nomornya dan mengalikannya dengan jumlah memori ini. Jika tertarik, buka beberapa aplikasi Elektron dan lihat berapa banyak memori yang mereka konsumsi.
Penggunaan memori yang berlebihan tidak terlalu baik, dan di sini kita harus menambahkan bahwa banyak aplikasi Electron berinteraksi secara spesifik dengan Node.js, tidak harus melakukannya dengan cara yang sama dengan aplikasi web yang sesuai.
Menggunakan Electron menambah kesulitan yang terkait dengan mendukung versi program yang lebih lama dan mengatur proses pembaruan aplikasi.
Sekarang mari kita bicara tentang PWA desktop. Bayangkan aplikasi yang terlihat seperti yang ditulis dalam Electron, yang juga nyaman digunakan, tetapi pada saat yang sama menginstalnya sederhana, mereka juga diperbarui tanpa masalah, selama transfer material ke klien dari satu aplikasi web. Rasanya seperti Chrome sedang menetapkan standar untuk skenario perilaku serupa di PWA desktop. Saat pengguna yang bekerja di Chrome mengunjungi halaman web tertentu, dan aplikasi yang disajikan kepadanya memenuhi serangkaian kriteria ini, pengembang aplikasi memiliki kesempatan untuk mengundang pengguna untuk menginstal aplikasi di komputernya. Prompt terlihat seperti di bawah ini.
Undangan Instalasi PWAPengembang dapat menampilkan prompt ini hanya setelah browser
beforeinstallprompt event
beforeinstallprompt dari objek
beforeinstallprompt . Setelah menginstal aplikasi, ikon yang sesuai muncul di desktop.
Ikon Peluncur PWASetelah memulai aplikasi seperti itu, ia terbuka di jendela browser yang tidak dilengkapi dengan kontrol konvensional. Aplikasi semacam itu dianggap sebagai aplikasi desktop nyata.
Meluncurkan PWAContoh PWA
Berikut adalah contoh PWA desktop yang tangkapan layarnya digunakan sebagai ilustrasi di atas.
Ini repositori miliknya di GitHub. Untuk menginstal aplikasi ini, Anda harus mengaktifkan bendera yang sesuai di Chrome dan menghabiskan setidaknya 30 detik di situs.
Seperti yang telah disebutkan, aplikasi web, agar dapat dianggap sebagai PWA desktop, harus memenuhi serangkaian
persyaratan tertentu. Jika Anda ingin membuat dan menguji PWA desktop Anda sendiri, Anda dapat mengambil repositori
ini sebagai dasar dan mempertimbangkan persyaratan. Jika Anda membuat ringkasan singkat tentang mereka, Anda mendapatkan yang berikut:
- Aplikasi harus dilayani melalui HTTPS.
- Itu harus memiliki pekerja layanan yang diinstal dengan setidaknya satu penangan
fetch . - Seharusnya berisi file
manifest.json diformat dengan benar. - Halaman-halamannya harus dirancang menggunakan teknik desain responsif.
Contoh tambahan
Jika Anda bekerja pada MacOS, maka PWA dapat mempertimbangkan bahwa Anda tidak dapat menginstalnya, dan mereka tidak akan menunjukkan kepada Anda undangan untuk menginstalnya. Jika Anda mengaktifkan flag dan tinker yang sesuai dengan konsol pengembang, Anda bisa meminta PWA untuk menampilkan prompt untuk instalasi. Berikut adalah beberapa PWA yang ada yang telah diinstal pada Mac.
▍Starbucks
Starbucks telah banyak berinvestasi dalam mengembangkan PWA yang hebat. Aplikasi desktop mereka sangat mengesankan.
PWA Starbucks▍Google Maps
Ini hanya aplikasi hebat. Ia melakukan tugasnya dan tidak terlalu banyak memuat sistem, berbeda dalam pekerjaan cepat dan desain responsif. Untuk menginstal aplikasi ini, Anda perlu membuat dan mengunduh situs seluler Google Maps.
PWA Google MapsWTwitter
Twitter mencoba mengembangkan PWA seluler, dan versi desktop dapat dianggap sebagai tambahan yang layak untuk aplikasi seluler.
PWA TwitterRingkasan
Terlepas dari kenyataan bahwa banyak kebisingan telah meningkat di sekitar PWA desktop, Anda harus menyadari bahwa teknologi ini masih dalam masa pertumbuhan. Secara khusus, arahan pengembangan berikut untuk PWA desktop dapat dicatat:
- Tautan dalam: tautan yang dibuka dari Chrome meminta aplikasi yang diinstal.
- Pemberitahuan tentang ikon aplikasi: Tampilkan pemberitahuan di ikon peluncur aplikasi desktop, seperti pada ikon aplikasi seluler.
- Dukungan hotkey: kemampuan untuk mendengarkan acara keyboard untuk digunakan di dalam aplikasi hotkey.
Setelah teknologi pengembangan desktop PWA telah cukup berkembang, aplikasi ini akan menjadi pesaing serius bagi proyek berbasis Elektron saat ini.
Pembaca yang budiman! Apakah Anda berencana untuk mengembangkan PWA desktop?
