Mengembangkan Aplikasi Web Nothing Progressive dalam 15 Menit

Google Play memiliki satu aplikasi yang dikembangkan oleh Chilango Lab yang memiliki lebih dari satu juta unduhan dan peringkat yang cukup tinggi. Itu disebut Tidak Ada , yang dapat diterjemahkan sebagai “Tidak Ada,” dan itu luar biasa karena tidak melakukan apa pun. Benar, telur Paskah yang menyenangkan tersembunyi di dalamnya, tetapi ini tidak mengubah masalah ini. Jika Anda menganalisis aplikasi ini, ternyata ukurannya adalah 14 MB, saat instalasi dibutuhkan 19,24 MB.


Penulis bahan, terjemahan yang kami terbitkan hari ini, mengatakan bahwa melihat aplikasi ini, ia bertanya-tanya apakah itu dapat ditulis ulang sehingga tidak memakan banyak ruang.

Dia berhasil. Yaitu, ia menciptakan kembali fungsionalitas Nothing menggunakan HTML, CSS dan JavaScript, menjadikannya sebagai aplikasi web progresif ( PWA , Progressive Web App). Ini berfungsi tanpa koneksi internet, Anda bisa menyebutnya, seperti aplikasi biasa, dari layar utama. Perbedaan utama antara aplikasi Android biasa dan salinan PWA adalah ukurannya. Yang pertama, recall, menempati 19,24 MB pada perangkat. Yang kedua - 205 Kb.


Aplikasi normal dan PWA

Membuat Ikon untuk Apa-apa

Sebelum saya memberi tahu Anda tentang kode tersebut, buat ikon untuk PWA Nothing. Untuk mengatasi masalah ini, saya menggunakan alat sumber terbuka Launcher Icon Generator .


Launcher Ikon Peluncur

Dengan menggunakan Launcher Ikon Peluncur, saya dapat membuat ikon untuk opsi Kosong saya secara instan. Program ini secara otomatis menghasilkan ikon dengan berbagai ukuran.

Pwacompat

Setelah ikon selesai, saya perlu membuat manifes untuk aplikasi web . Berkat itu, browser Chrome untuk Android akan menampilkan layar splash ketika PWA boot. Apakah mungkin untuk membuat layar seperti itu muncul di browser lain juga? Ya, itu mungkin, dan untuk ini kita memerlukan pustaka PWACompat, yang memungkinkan kita untuk mengimplementasikan apa yang kita butuhkan. Ini, bersama dengan manifes, cukup untuk terhubung dalam kode PWA:

<link rel="manifest" href="manifest.json" /> <script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js"    integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA"    crossorigin="anonymous"></script> 

Seperti apa tampilan splash di Safari (iOS).


Layar splash Safari

Tetapi ini tidak terbatas pada kemampuan PWACompat. Secara khusus, perpustakaan ini memungkinkan Anda untuk membuat meta tag untuk berbagai browser yang menjelaskan bagaimana PWA harus dibuka, dan juga mengatur warna tema berdasarkan manifes aplikasi web.

Menambahkan aplikasi ke layar beranda

Salah satu fitur PWA favorit saya disebut A2HS (Add to Home screen), berkat itu Anda dapat menambahkan ikon untuk meluncurkan aplikasi di layar utama. Namun, dimulai dengan Chrome 68 di Android, alih-alih spanduk A2HS besar, panel informasi kecil dengan proposal yang sesuai sekarang ditampilkan.


Goodbye A2HS banner (Chrome 67 dan yang lebih lama)

Bagaimanapun, dasbor adalah solusi perantara, begitu fitur ini akan dihapus dari Chrome. Jadi saya perlu membuat antarmuka A2HS yang lebih baik untuk PWA Nothing.


Tombol install (kiri), tombol Install dan panel A2HS (tengah), kotak dialog Add to Home Screen (kanan)

Dalam hal ini, jika browser mendukung kemampuan untuk menambahkan aplikasi ke layar utama, itu akan menampilkan, di bagian atas halaman, tombol Instal. Ketika pengguna mengklik tombol ini, kotak dialog Tambahkan ke Layar Asal dipanggil ke atas.

Ini kode yang relevan.

 var installPromptEvent; var btnInstall = document.querySelector('#install'); window.addEventListener('beforeinstallprompt', function (event) {   event.preventDefault();   installPromptEvent = event;   btnInstall.removeAttribute('disabled'); }); btnInstall.addEventListener('click', function () {   btnInstall.setAttribute('disabled', '');   installPromptEvent.prompt();   installPromptEvent.userChoice.then((choice) => {       if (choice.outcome === 'accepted') {           console.log('User accepted the A2HS prompt');       } else {           console.log('User dismissed the A2HS prompt');       }       installPromptEvent = null;   }); }); 

Jika situs memenuhi kriteria A2HS, maka browser akan menaikkan acara beforeinstallprompt .

Telur paskah

Perhatian, akan ada spoiler!


Sebenarnya, PWA Nothing Easter Egg adalah kode Konami dan video 10 jam di YouTube .


Panggilan telur Paskah (atas, atas, bawah, bawah, kiri, kanan, kiri, kanan dan dua sentuhan)

Setelah pengguna menyelesaikan kode, PWA akan membuka video ini .

Untuk menambahkan dukungan kode Konami ke aplikasi saya, saya menggunakan perpustakaan Konami-JS . Ini kecil, mudah digunakan, dan, di antaranya, mendukung perangkat seluler. Di sinilah satu-satunya perbedaan antara PWA saya dan aplikasi Android asli. Secara khusus, di mana saya, ketika memasukkan kode, perlu membuat dua sentuhan, dalam aplikasi asli Anda perlu menggunakan panel dengan tombol.

Matikan refresh halaman sambil menarik

Saya, dalam proses mengerjakan aplikasi, memiliki masalah kecil. Saat pengguna mencoba meregangkan halaman ke bawah di perangkat seluler, ini menyebabkan penyegaran halaman (pull-to-refresh). Saya tidak membutuhkannya.


Refresh halaman yang tidak diinginkan

Untungnya, menangani masalah ini mudah. Yang Anda butuhkan hanyalah satu baris kode CSS :

 overscroll-behavior-y: contain 

Hosting

Netlify terpilih sebagai hosting untuk PWA Nothing. Ini adalah platform universal untuk proyek web modern. Alasan saya memutuskan untuk meng-host aplikasi saya di Netlify adalah karena semuanya sangat mudah untuk dikonfigurasi di sini. Selain itu, semua ini gratis.


Netlify Control Panel

Untuk menggunakan proyek di Netlify, Anda dapat menggunakan salah satu dari tiga metode. Kita berbicara tentang alat-alat baris perintah, tentang penyebaran manual, dan tentang penyebaran berkelanjutan.

▍ Netlify Alat Baris Perintah

Ini adalah cara klasik untuk menggunakan proyek web. Untuk menggunakannya, Anda perlu menginstal Netlify CLI, masuk ke akun Anda, inisialisasi proyek dan sebarkan. Ini terlihat seperti ini:

 > brew tap netlify/netlifyctl > brew install netlifyctl > netlifyctl login > netlifyctl init > netlifyctl deploy 

▍ Penempatan manual

Metode ini mungkin yang paling mudah, penyebaran aplikasi dilakukan dengan beberapa gerakan mouse.


Penerapan manual

Saya sangat menyukai fitur ini sehingga saya ingin sesuatu seperti ini muncul di Firebase. Bahkan, penyebaran proyek turun untuk menyeret dan menjatuhkan foldernya ke halaman web.

▍ Penerapan berkelanjutan

Sekarang saya menggunakan metode khusus ini. Setelah saya menautkan repositori GitHub saya ke Netlify, ketika saya mengirim kode di sana, Netlify secara otomatis membangun dan menyebarkan proyek. Sihir, bukan sebaliknya.

▍HTTPS

Karena PWA harus dilayani melalui HTTPS dari sumber yang aman, saya perlu memastikan bahwa HTTPS diaktifkan di situs saya. Benar, saya tidak perlu melakukan banyak upaya di bidang ini, karena Netlify menyediakan HTTPS gratis untuk semua domain, termasuk domain penggunanya sendiri.


Https

Selain itu, dari panel kontrol Netlify Anda dapat mengaktifkan transisi paksa ke HTTPS ( HSTS ). Ini akan memberikan perlindungan berkelanjutan untuk situs ini.

Analisis Proyek dengan Mercusuar

Lighthouse adalah alat otomatis open-source untuk meningkatkan kualitas halaman web. Dengan bantuannya, Anda dapat menganalisis halaman apa saja - publik, atau memerlukan otentikasi. Ini, antara lain, memungkinkan Anda untuk menganalisis kinerja dan aksesibilitas halaman, menjelajahi aplikasi web progresif.


Mercusuar

Aplikasi saya berhasil mencetak 97 poin dalam hal kinerja dan 100 poin dalam indikator lainnya. Ini laporan lengkapnya.

Ringkasan

Seperti yang Anda lihat, aplikasi web progresif yang tidak menghasilkan apa-apa ternyata jauh lebih kecil daripada aplikasi Android dengan fungsionalitas yang sama-sama kaya. Di sini Anda dapat mengalami PWA Nothing. Dan di sini Anda dapat menemukan kode sumbernya.

Pembaca yang budiman! Menurut Anda aplikasi Android apa yang ingin Anda buat ulang dalam formulir PWA?