Konsep Aplikasi Web Progresif (PWA) telah ada sejak lama, sejak musim semi tahun 2018, aplikasi kelas ini didukung oleh semua browser utama, tetapi prevalensi teknologi PWA, meskipun "keunggulan" yang jelas, masih sangat rendah.
Pakar Google (termasuk di Habré) menulis dengan sangat kompeten dan kompeten tentang PWA, tetapi rekomendasinya lebih bermanfaat bagi mereka yang sudah terbiasa dengan subjek. Artikel ini dimaksudkan untuk menunjukkan bahwa Aplikasi Web Progresif tidak sulit, dan pengembang situs mana pun dapat dan harus menggunakan teknologi ini sekarang.
Filosofi PWA
Untuk memulainya, perlu dicatat bahwa tidak ada definisi pasti dari aplikasi PWA. Anda tidak bisa mengatakan dengan jelas apakah situs ini PWA atau tidak. Ini adalah skala panjang di mana sophomore Petya, yang menambahkan manifes aplikasi web, dapat membuat ikon beranda di layar beranda ponsel; dan secara lahiriah tidak dapat dibedakan dari situs berita biasa, hanya pengguna yang dapat mengatakan bahwa itu sangat cepat dan nyaman, dan itu karena di suatu tempat di dalamnya berdetak hati yang hangat dari seorang pekerja layanan (pekerja layanan).
Relativitas PWA terletak pada nama itu sendiri - "progresif". Progresif dibandingkan dengan apa dan sejauh mana? Tetapi relativitas ini, pada kenyataannya, sangat baik, karena Anda dapat mempelajari teknologi PWA dan menerapkannya dalam proyek Anda saat ini secara bertahap, tanpa renovasi dan refactoring global.
Di sisi lain, PWA punya ide, dan idenya cukup jelas dan kuat. Dan seberapa lambat itu terungkap, mungkin menunjukkan besarnya konsekuensinya.
Arsitektur PWA
PWA adalah aplikasi web yang dibuat menggunakan teknologi tertentu untuk mencapai target yang ditentukan.
Target diuraikan sebagai berikut:
Andal - aplikasi diunduh dan ditampilkan segera, terlepas dari status dan kualitas koneksi jaringan.
Cepat (Cepat) - pertukaran data melalui jaringan cepat, UI mulus dan responsif.
Attractiveness (Engaging) - membuat pengalaman pengguna dengan aplikasi nyaman dan menyenangkan, mendorongnya untuk ingin mengalaminya lagi, dan lagi, dan lagi ...
Dari sudut pandang Google, inilah yang memisahkan situs web dari aplikasi asli dalam hal tampilan dan rasa.
Dengan kata lain, pengembang ditawari alat (Pekerja Servis, Pemberitahuan Push, dll.) Dan sasaran ditunjukkan (situs / aplikasi harus cepat dimuat, bekerja pada koneksi yang lemah, bukan "lag", bekerja offline jika perlu). Seberapa jauh pengembang akan menempuh jalan ini hanya bergantung padanya.
PWA dan aplikasi asli
Fakta bahwa PWA terlihat mirip dengan aplikasi asli, lebih tepatnya, solusi kosmetik (meskipun penting bagi pengguna dari sudut pandang psikologis). Tetapi fakta bahwa mereka serupa secara internal (semua sumber daya aplikasi utama dapat disimpan pada klien, hanya mengubah konten yang akan ditransmisikan melalui jaringan) adalah pencapaian besar.
Anda bahkan bisa menyebutnya revolusi tersembunyi. Bahkan, browser digunakan sebagai semacam mesin virtual yang menyimpan dan menjalankan aplikasi PWA. Karena Android adalah mesin virtual untuk aplikasi android, maka browser menjadi mesin virtual untuk PWA. Sama seperti aplikasi asli mengakses sumber dayanya melalui sistem file, PWA juga mengakses sumber dayanya - meskipun melalui HTTP, tetapi disimpan secara lokal.
Dan untuk sekali, semua ini bekerja sama di semua browser utama dan pada semua platform utama.
Google menyerang iOSAda aplikasi seluler yang harus asli (Anda memerlukan kinerja, akses ke sumber daya sistem, dll.), Tetapi ada aplikasi yang sepenuhnya dapat diimplementasikan sebagai PWA dalam fungsinya. Untuk mereka sekarang:
- Tidak perlu menulis versi yang berbeda untuk Android dan iOS (dan Windows)
- Tidak perlu mendaftar dan membayarnya di Google Play dan App Store
- Buka akses langsung ke desktop
Hingga saat ini, pasar aplikasi seluler telah tertutup bagi penggemar yang dapat menulis program yang bermanfaat, tetapi tidak dapat / tidak mau membayar untuk penempatannya. Dan mereka tidak ingin menghubungi birokrasi Google dan Apple untuk memverifikasi aplikasi, setelah itu Anda mengingat masa monopoli Microsoft dengan kerinduan.
Sekarang hambatan ini rusak. Dan memecahkannya Google. Mengingat bahwa dialah yang menjadi unggulan teknologi Internet, entri yang serupa ke dalam wilayah iOS, kemungkinan besar, dipikirkan dengan baik dan dihitung. Masih menunggu boom PWA.
Tentu saja, ada perbedaan antara PWA dan aplikasi asli - terutama dalam hak akses ke sumber daya sistem, tetapi bekerja dalam arah ini
berjalan bahkan di bidang HTML5 murni, dan untuk PWA hak istimewa tambahan tidak akan menjadi masalah.
APK vs PWADari pengalaman pribadi, kita dapat mengingat kembali bagaimana, setelah mentransfer satu situs berita untuk bekerja dengan Service Worker, diputuskan untuk meninggalkan aplikasi Android yang dibuat sesuai dengan fungsionalitas situs. Dan bukan karena dukungannya mengambil sumber daya manusia, tetapi karena versi PWA, secara mengejutkan, lebih cepat, lebih indah dan lebih nyaman daripada aplikasi java.
Teknologi
Secara singkat pertimbangkan mesin utama PWA.
Pekerja layanan
Jantung PWA adalah Pekerja Layanan. Ini adalah lapisan proksi antara frontend dan backend, yang terletak di browser. Semua permintaan browser melewatinya. Divisi ini menjadi dua lapisan independen memungkinkan kami melakukan transisi situs web biasa ke PWA sesederhana mungkin.
Dari penyimpanan, Pekerja Layanan memiliki akses ke Penyimpanan Cache untuk sumber daya web, dan IndexDB untuk data. Tapi, yang paling penting, kebebasan penuh untuk mengimplementasikan logika bisnis.
Anda dapat, misalnya, menerima permintaan dari browser, memeriksa status jaringan, mengambil data dari penyimpanan, melakukan operasi dengan mereka dan mengembalikan hasil tertentu ke browser - yang akan berpikir bahwa jawabannya datang dari server. Atau itu tidak akan - seperti yang diinginkan pengembang, dia akan melakukannya. Dua lapisan browser (ujung depan klien dan Pekerja Layanan) memungkinkan Anda untuk menulis aplikasi lengkap.
Pada saat yang sama, untuk sebagian besar situs, fungsi caching dari Pekerja Layanan akan cukup untuk berubah menjadi PWA.
PWA tidak bergantung pada kerangka apa pun, itu adalah javascript murni, meskipun bahkan spesialis Google di Habré untuk beberapa alasan menyarankan menggunakan generator kode perpustakaan. Pekerja Layanan ditulis dengan indah dengan tangan, dan ini diperlukan untuk memahami dan mengontrol logika aplikasi Anda.
Dari sudut pandang terprogram, Pekerja Layanan adalah file javascript yang termasuk dalam kode html halaman. Di dalamnya, pengembang mendefinisikan logika untuk bekerja dengan permintaan yang datang dari front-end dan fungsi lainnya.
Https
PWA mengharuskan semua sumber daya situs ditransmisikan melalui protokol HTTPS. Anda bisa mendapatkan sertifikat SSL secara gratis, beberapa hoster melakukan ini untuk Anda. Tetapi sangat penting bahwa situs tidak memiliki tautan ke sumber daya tidak aman - beberapa browser tidak akan menampilkan situs dalam kasus ini.
Masalah utama yang dihadapi dalam kasus tersebut adalah gambar. Seringkali editor atau komentator menaruh tautan ke gambar dari Internet dalam materi, terkadang mereka secara otomatis sampai di sana (dalam materi). Penting untuk menyimpan gambar baik untuk diri sendiri atau ke layanan dengan akses melalui HTTPS.
Shell aplikasi
App shell hanyalah kerangka antarmuka grafis, sebuah templat. Misalnya, ambil situs rata-rata dengan tajuk, dua kolom, dan lainnya. Secara kasar, kami memotong konten halaman saat ini dan semua informasi dinamis darinya, statis yang tersisa adalah shell aplikasi.
Intinya adalah bahwa shell aplikasi disimpan pada klien dan dimuat ketika aplikasi dimulai, dan kemudian informasi dinamis dimasukkan ke dalamnya dari jaringan. Dan saat sedang memuat, shell aplikasi akan terlihat indah ("loader" di tanah, dll.)
Arsitektur situs ini - mengunduh konten dan informasi dinamis lainnya melalui panggilan ajax - dapat dipikirkan dan diimplementasikan di situs terlebih dahulu, maka transisi ke PWA akan cukup sederhana.
Shell aplikasi seperti shell program asli. Lihatlah PWA Anda sebagai program asli, dan banyak hal akan menjadi lebih mudah.
Manifes aplikasi web
File JSON yang secara deklaratif mendefinisikan nama aplikasi untuk browser, ikon PWA (layar penuh, mandiri, dll.) Dan beberapa parameter lainnya akan terlihat. Memungkinkan Anda "menginstal" PWA sebagai aplikasi terpisah di layar beranda ponsel cerdas Anda.
Pemberitahuan push
Jika Anda menjelajahi Internet dengan Chrome DevTools, buka pada tab Aplikasi, Anda dapat melihat bagaimana beberapa situs menggunakan teknologi PWA. Dan 90% dari mereka yang menggunakannya hanya melakukannya demi Push Notification.
Sejauh ini, ini adalah teknologi PWA yang paling populer dan paling banyak disalahgunakan - selama beberapa bulan terakhir, jumlah situs yang pertama kali Anda kunjungi dan mencari tombol "Blokir" dengan mouse untuk mendapatkan berita terbaru telah berkembang, perasaan telah meningkat berkali-kali, dan keinginan untuk memaksakan diri Anda sendiri Push itu seperti Spam.
Tetapi Anda juga dapat menawarkan berlangganan kunjungan kedua atau ketiga pengguna ke situs ketika sudah jelas bahwa ia tidak ada di sini secara kebetulan.
Daftar periksa Google PWAPemberitahuan push harus tepat waktu, tepat dan relevan
Aktifkan pemberitahuan push dari situs dan pastikan kasus penggunaan yang mereka gunakan dengan pemberitahuan push adalah:
Tepat waktu - Pemberitahuan tepat waktu adalah pemberitahuan yang muncul ketika pengguna menginginkannya dan ketika hal itu penting bagi mereka.
Precise - Pemberitahuan tepat adalah pemberitahuan yang memiliki informasi spesifik yang dapat segera ditindaklanjuti.
Relevan - Pesan yang relevan adalah pesan tentang orang atau subjek yang diperhatikan pengguna.
Lihat panduan kami tentang membuat pemberitahuan push yang hebat untuk saran. Jika konten Anda tidak tepat waktu dan relevan bagi pengguna ini, pertimbangkan untuk menggunakan email.