Mengenal Apa Itu web Progressive Web App

Posted on Posted in Internet

Mengenal Apa Itu web Progressive Web App

Sebenarnya telah banyak sekali artikel dan tutorial tentang Progressive Web Apps akhir-akhir ini. walaupun masih relatif baru, tetapi prinsip-prinsip dalam web progressive sama dapat meningkatkan aplikasi dibangun dengan vanilla JS, React, Polymer, atau framework lainnya. Dalam posting ini, saya akan meringkas beberapa pilihan dan aplikasi referensi untuk memulai dengan PWApp Anda sendiri hari ini.

Apa itu Progressive Web App ?

Sebuah Progresif Web App menggunakan kemampuan web modern untuk memberikan pengalaman pengguna seperti menggunakan aplikasi. PWA berevolusi dari halaman di tab browser untuk sehingga lebih terlihat responsive seperti aplikasi yang berkelas, menjaga sentuhan Web ringan pada setiap saat.

Sangat penting untuk diingat bahwa Progresif Web Apps bekerja di mana-mana tetapi sangat di sarankan di browser modern untuk peningkatan progresif adalah model lebih bagus.

Progresif Web Apps adalah:

  • Progresif – dapat berjalan untuk setiap pengguna, terlepas dari pilihan browser karena mereka dibangun dengan peningkatan progresif sebagai prinsip utama.
  • Responsif – dapat berjalan di segala macam tampilan seperti, desktop, mobile, tablet, atau apa pun yang berikutnya.
  • Konektivitas independen – Ditingkatkan dengan service workers untuk dapat berjalan secara offline atau pada jaringan berkualitas rendah.
  • Seperti Aplikasi – Gunakan model app-shell untuk memberikan navigasi dengan gaya aplikasi untuk kemudahan dalam interaksi.
  • Fresh- Selalu up-to-date berkat proses update yang di lakukan oleh service workers.
  • Aman – Bertugas melalui TLS untuk mencegah mengintip dan memastikan konten belum dirusak.
  • Discoverable- Apakah diidentifikasi sebagai “aplikasi” berkat memanifestasikan W3C dan ruang lingkup pendaftaran pekerja layanan yang memungkinkan mesin pencari untuk menemukan mereka.
  • Re-engageable – Membuat re-engagement mudah melalui fitur seperti push notifikasi.
  • Diinstal – Memungkinkan pengguna untuk “menjaga” aplikasi yang mereka anggap paling berguna di layar utama smartphone mereka tanpa kerumitan app store.
  • Linkable – Mudah berbagi melalui URL dan tidak memerlukan instalasi yang rumit.

Progresif Web Apps juga tidak unik bagi Chrome untuk Android. Di bawah ini kita dapat melihat Pokedex Progresif Web App bekerja di Firefox untuk Android (Beta) dengan Add awal untuk homescreen dan Layanan Pekerja caching fitur berjalan baik-baik saja.

Salah satu aspek yang bagus dari sifat “progresif” untuk model ini adalah bahwa fitur dapat secara bertahap dibuka sebagai browseryang lebih baik bagi pengguna. Progresif Web Apps seperti Pokedex juga tentunya bekerja dalam Opera pada Android juga dengan perbedaan mencolok beberapa dalam implementasi:

Prinsip Dasar dalam Progressive Web App

Web App Manifest

Manifest untuk aplikasi Web adalah file sederhana JSON,  pengembang, yang memiliki kemampuan untuk mengontrol bagaimana aplikasi Anda muncul kepada pengguna di area yang mereka harapkan untuk melihat aplikasi (misalnya layar awal perangkat), langsung apa pengguna dapat memulai dan yang lebih penting bagaimana mereka dapat memulai aplikasi lewat homescreen perangkat mereka.

Manifes memungkinkan aplikasi web Anda untuk memiliki lebih asli seperti kehadiran di homescreen pengguna. Hal ini memungkinkan aplikasi yang akan diluncurkan dalam mode layar penuh (tanpa bar URL ), menyediakan kontrol atas orientasi layar dan dalam versi terbaru dari Chrome di Android mendukung mendefinisikan Layar Splash dan warna tema untuk address bar. Hal ini juga digunakan untuk mendefinisikan satu set ikon oleh ukuran dan kepadatan digunakan untuk layar Splash tersebut dan ikon homescreen.

contoh file manifest dapat anda lihat di Web Starter Kit dan atau yang lebih lengkap di  Google Chrome. Bruce Lawson membuat sebuah Generator Manifest dan Mounir Lamouri juga membuat sebuah tool Web Manifest validator yang sangat berguna.

Dalam proyek-proyek pribadi saya, saya mengandalkan realfavicongenerator untuk menghasilkan ikon berukuran pas untuk kedua Web App dan untuk digunakan di iOS, desktop dan sebagainya. Modul Favicons Node juga mampu mencapai output yang sama sebagai bagian dari proses membangun Anda.

Browser berbasis Chromium (Chrome, Opera dll) dukungan Web App memanifestasikan telah mendukung dengan Firefox aktif. WebKit / Safari belum diposting sinyal masyarakat tentang maksud mereka untuk mengimplementasikan fitur lebih dulu.

Untuk lebih jelasnya, baca Installable Web Apps dengan webapp Manifest di Chrome untuk Android di Web Fundamentals.

Tambahkan ke Layar Banner

Chrome di Android memiliki dukungan menambahkan dalam situs sebuah situs yang mendukung web PWA ke homescreen untuk sementara waktu sekarang, tapi versi terbaru juga sudah sangat mendukung untuk menyarankan situs ditambahkan menggunakan native Web App menginstal sebuah ikon di homescreen.

Agar pemasangan aplikasi perintah untuk menampilkan aplikasi Anda harus:

  • Memiliki Web App manifest valid
  • Dilayani melalui HTTPS (lihat letsencrypt untuk sertifikat gratis)
  • Telah memiliki service worked yang valid
  • Dikunjungi dua kali, dengan setidaknya 5 menit antara kunjungan
  • Sejumlah App Instal sampel spanduk yang tersedia, meliputi spanduk dasar melalui penggunaan-kasus yang lebih kompleks seperti menampilkan aplikasi yang terkait.

Service Workers untuk caching secara offline pada web PWA

sebuah Service Workers adalah sebuah script yang berjalan di latar belakang, terpisah dari halaman web Anda. Ini menanggapi transaksi data, termasuk permintaan jaringan yang terbuat dari halaman yang dilayaninya. Sebuah service workers memiliki masa yang sangat sinkat.

Service workers akan berjalan ketika mendapat sebuah perintah dan berjalan hanya selama itu perlu proses itu. Service workers memungkinkan Anda untuk menggunakan Cache API untuk cache sumber daya dan dapat digunakan untuk menyediakan pengguna dengan pengalaman secara offline.

sebuah service worker yang kuat untuk secara offline caching tetapi mereka juga menawarkan kinerja yang signifikan dalam bentuk pembebanan secara instan untuk kunjungan berulang ke situs atau aplikasi web. Anda bisa menyimpan shell aplikasi Anda sehingga bekerja secara offline dan mengisi konten dengan menggunakan JavaScript.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

*