Semua tentang Aplikasi Web Progresif dan Menerapkannya di Drupal 9

Internet pertama kali dibangun dengan tujuan komunikasi yang lebih baik bagi militer dan ilmuwan selama tahun 1960-an. Segera, Web berubah menjadi fenomena revolusioner sekitar tahun 1990-an dan tak terbendung sejak saat itu. Meskipun tujuan web terus berubah, satu tujuan yang tetap konstan adalah kenyamanan.

Kebutuhan akan kemudahan memunculkan banyak cara inovatif untuk mengakses internet. Aplikasi seluler asli dan aplikasi Web adalah dua teknologi yang membuat penjelajahan internet menjadi mudah dan nyaman. Pada artikel ini, kita akan berbicara tentang Aplikasi Web Progresif dan bagaimana Anda dapat mengimplementasikannya dengan Drupal menggunakan modul Aplikasi Web Progresif Drupal. Tapi sebelum kita menyelami semua itu, mari kita lihat fitur aplikasi asli dan web dan bagaimana aplikasi web progresif mengisi celahnya.

Fitur Aplikasi Seluler Asli

• Mereka adalah aplikasi khusus platform. Ini juga berarti bahwa mereka perlu dibangun kembali untuk setiap platform baru (iOS, Android).
• Perlu diunduh.
• Biasanya super cepat.
• Kaya akan fitur dan fungsionalitas.
• Dapat berbaur dengan mulus ke perangkat apa pun dan terasa seperti bagian darinya.
• Dapat bekerja secara offline.
• Mereka dapat mengakses data perangkat, perangkat keras perangkat, dan sistem file lokal dengan mudah.
• Lebih mahal untuk dikembangkan, dipelihara, dan ditingkatkan.
• Telah disetujui sebelumnya untuk keamanan dan dapat diunduh di App store.
• Sulit bagi mesin pencari untuk merangkak.

Fitur Aplikasi Web

• Tidak bergantung pada platform. Yang Anda butuhkan hanyalah browser untuk mengaksesnya. Mendukung sebagian besar browser modern. Tidak perlu diunduh.
• Tidak ada SDK khusus untuk mengembangkannya. Frontend dikembangkan menggunakan HTML, CSS, JavaScript, dan LAMP atau tumpukan MEAN untuk backend.
• Tidak perlu meng-upgrade. Biaya pengembangan dan pemeliharaan yang lebih rendah.
• Meskipun membutuhkan otentikasi, keamanan menjadi masalah karena dapat rentan terhadap akses yang tidak sah.
• Mereka tidak bekerja offline dan bisa lebih lambat daripada aplikasi seluler asli.
• Mereka tidak terdaftar di App store sehingga menemukannya mungkin lebih sulit.

Apa itu Aplikasi Web Progresif dan bagaimana cara mengisi celahnya?

Jadi, singkatnya, aplikasi web asli sangat mampu tetapi kurang dalam hal jangkauannya. Sedangkan aplikasi web memiliki jangkauan yang lebih luas tetapi kurang memiliki kemampuan. Dan di situlah Aplikasi Web Progresif masuk untuk menjembatani kesenjangan.

Aplikasi Web Progresif adalah kombinasi ideal dari manfaat aplikasi asli dan aplikasi web. Menggunakan kemampuan web modern, Progressive web apps (PWA) dapat memberikan pengalaman seperti aplikasi kepada pengguna. Ini menggabungkan fitur yang ditawarkan oleh sebagian besar browser modern dengan manfaat pengalaman seluler. Anda dapat membuat aplikasi yang mirip aplikasi asli, sangat kompleks, dan dapat diinstal. Dengan Web Assembly yang didukung oleh sebagian besar browser sekarang, PWA dapat dibangun dalam bahasa pilihan pengembang, sehingga secara luas meningkatkan cakupan dan fleksibilitas fungsionalitas yang dapat ditawarkannya.

Fitur Aplikasi Web Progresif

• Mereka adalah platform dan perangkat independen. Bekerja dengan indah di browser apa pun.
• Mereka memuat dengan cepat dan sangat andal (bahkan dengan kecepatan internet rendah). Scrolling sangat halus dan lancar.
• Bisa bekerja offline juga.
• Pemberitahuan push seperti aplikasi asli dapat diaktifkan.
• Dapat mengakses perangkat keras dan data perangkat seperti aplikasi asli.
• Pintasan dapat ditambahkan di layar beranda pengguna (alih-alih mengunduhnya)
• Tidak perlu instalasi yang rumit. Dapat membagikan URL dengan mudah.
• Responsif di semua perangkat.
• Mereka lebih mudah dan lebih cepat untuk dikembangkan. Perawatannya juga mudah.

Sebelum berbicara tentang modul PWA di Drupal, mari kita lihat persyaratan minimum untuk membangun PWA -

• Harus dijalankan melalui HTTPS.
• Harus menyertakan Service Worker – Service worker adalah skrip (javascript) yang berjalan di atas https pada browser dan menyediakan akses browser. Ini menyediakan fitur seperti aplikasi asli seperti pengiriman konten offline, pemberitahuan push, dll.
• Harus memiliki Manifes Aplikasi Web – yang merupakan file JSON yang berisi metadata dengan informasi tentang aplikasi web seperti nama, deskripsi, penulis, dan lainnya. Ini juga berguna untuk optimasi mesin pencari.

Modul Drupal PWA – Cara membuat Aplikasi Web Progresif dengan Drupal 9 (dan 8)

Modul Drupal PWA mudah dipasang dilengkapi dengan Service Worker (untuk caching dan kemampuan seperti aplikasi offline lainnya) dan Manifest.js yang dapat Anda konfigurasikan. Namun Anda harus memastikan bahwa Anda telah menginstal SSL sebelum memulai proses instalasi PWA. Jika kebutuhan Anda sangat spesifik dengan banyak penyesuaian, Anda dapat mengembangkan PWA dengan menggunakan kerangka kerja front end seperti Angular atau React dan menyesuaikan Service worker Anda sendiri.

Memasang Modul PWA Drupal 9

Dengan Drupal 7, menginstal modul Progressive Web App Drupal semudah mengunduh dan mengaktifkan modul. Anda dapat membuat file manifest.js melalui formulir konfigurasi dan memvalidasinya. Namun, di Drupal 9, kami tidak dapat mengintegrasikan fungsi ini secara langsung hanya dengan mengaktifkan modul PWA. Alasannya karena itu tidak memberi Anda opsi untuk mengonfigurasi file manfest.js.

1. Instal modul dengan mengunduh dan mengaktifkan modul PWA Drupal.

2. Untuk Drupal 9, terapkan tambalan ini

3. Setelah selesai, navigasikan ke konfigurasi -> APLIKASI WEB PROGRESSIVE -> pengaturan PWA dan tambahkan informasi yang diperlukan.

Pekerja Layanan

URL ke cache - Di sinilah Anda dapat menentukan halaman yang Anda perlukan agar tersedia bahkan saat offline. URL yang disebutkan di sini akan di-cache - pastikan Anda membersihkan cache setiap kali Anda membuat pembaruan apa pun di sini.
URL untuk dikecualikan – Jika Anda memiliki halaman yang benar-benar hanya perlu bekerja dengan internet, sebutkan di sini.
Halaman offline – Menampilkan halaman yang dipersonalisasi kepada pengguna Anda saat mereka offline dan halaman tidak di-cache.

Manifest.json

File manifest.json Drupal memungkinkan pengguna untuk menambahkan PWA ke layar beranda mereka. Ini berisi konfigurasi yang dapat Anda modifikasi untuk mengubah perilaku PWA Anda – seperti nama, nama tampilan, warna latar belakang, orientasi, dan banyak lagi.

File akan ditambahkan ke tag kepala halaman indeks Anda.
<link rel="manifest" href = "/manifest.json">

Gambar di bawah ini menunjukkan opsi "Tambahkan ke layar beranda". Saat Anda memilih opsi itu, sebuah ikon akan dibuat di layar beranda.