Pengantar Aplikasi Web Progresif

Sebagian besar pengembang setidaknya mendengar desas-desus sekitar Aplikasi Web Progresif. Ini banyak didukung oleh perusahaan teknologi seperti Google dan dengan cepat menjadi norma untuk aplikasi web multi-perangkat.

Tapi, apa tepatnya perbedaan antara tipikal dan a progresif aplikasi website?

Untuk pengembang, itu adalah dunia yang berbeda. Aplikasi Web Progresif menggunakan API web modern untuk buat pengalaman aplikasi asli di browser. Ini berarti pengembang dapat membangun aplikasi dinamis pemuatan cepat tanpa menggunakan kerangka kerja hybrid.

Dalam panduan ini, saya akan membahas dasar-dasar Aplikasi Web Progresif, beberapa fitur utama, dan bagaimana Anda bisa mulai membangun sendiri.

Apa itu Aplikasi Web Progresif?

Aplikasi Web Progresif (atau PWA) manfaatkan API browser web untuk membuat pengalaman aplikasi asli langsung di browser di perangkat apa pun.

Pada akhirnya, Aplikasi Web Progresif mencakup a beberapa teknologi yang dapat digunakan pengembang untuk membuat aplikasi asli yang kuat. Banyak yang datang API web seperti API Pekerja Layanan atau Dorong API.

Ada beberapa persyaratan untuk memanggil sesuatu PWA tetapi ini adalah yang paling penting:

Sepenuhnya responsif seluler.
Mematuhi peningkatan progresif.
Sudah bisa instal secara lokal pada ponsel cerdas dan tablet.
Berjalan offline tanpa Internet, menggunakan pekerja layanan.
Memisahkan konten dari fungsionalitas menggunakan shell aplikasi.
Builts di HTTPS untuk keamanan yang lebih besar.
Dapat ditemukan dalam pencarian Google.
Memiliki halaman seperti aplikasi yang dinamis tapi masing-masing tetap memiliki URL sendiri.

Jika kamu berpikir untuk membangun aplikasi web kecil Anda mungkin mencoba membuat Aplikasi Web Progresif sebagai gantinya. Ini datang dengan sedikit kurva belajar tetapi Anda memiliki begitu banyak lebih banyak kontrol atas pengalaman pengguna hasil dari.

Mari selami dasar-dasar Aplikasi Web Progresif dan pelajari apa yang membuatnya kutu.

Pekerja layanan

Setiap Aplikasi Web Progresif tunggal membutuhkan pekerja layanan. Ini adalah seperti petugas lalu lintas siapa yang mengoordinasikan kemana lalu lintas pergi, dari mana data berasal, dan bagaimana hal itu semua terorganisir dan di-cache.

Secara sederhana, pekerja layanan beroperasi sebagai file JavaScript dan berjalan di latar belakang aplikasi web Anda. Kapanpun pengguna melakukan suatu acara, itu disebut skrip pekerja layanan baik untuk menarik data, menyimpan data, atau keduanya!

Menggunakan API Pekerja Layanan aku s penting untuk menjalankan PWA yang didukung offline. Ini adalah bagaimana Anda mengirimkan data antar tampilan dan bagaimana Anda bisa meminta data dari database lokal. Tapi, ini sebagian besar adalah hal-hal canggih yang Anda pelajari dengan bekerja pada proyek PWA.

Mengintip Cookbook Pekerja Layanan untuk cuplikan dasar dan demo langsung. Ini adalah cara yang fantastis untuk belajar dengan mempelajari apa yang telah dilakukan dan dilakukan orang lain kloning itu di aplikasi Anda sendiri.

Jika Anda berharap untuk membangun Aplikasi Web Progresif mulai dengan API Pekerja Layanan. Mengotak-atik dan mengatur demo sederhana secara lokal. Ini akan mengatur dasar untuk nanti membangun fitur dan halaman aplikasi khusus bahwa semua dijalankan melalui pekerja layanan.

Untuk panduan pemula dan cuplikan kode terperinci, Saya secara khusus merekomendasikan sumber daya ini:

Memulai dengan Pekerja Servis
Memulai dengan Pekerja Servis
Contoh Pekerja Layanan: Contoh Halaman Kustom Offline

Shell aplikasi

Sebagian besar aplikasi asli ikuti arsitektur shell aplikasi di mana data dan kode aplikasi berada benar-benar terpisah dari UI. Shell aplikasi bisa di-cache secara lokal jadi setiap halaman memuat sangat cepat.

Ini tetap sama “aplikasi asli” merasakan dimana antarmuka selalu tetap terlihat tetapi konten / fungsionalitas memuat berbeda setiap kali. Lihat halaman ini di situs Google Developers untuk belajar lebih banyak tentang model shell aplikasi.

Sebagian besar aplikasi memiliki shell aplikasi yang sangat sederhana dan Anda harus mendesain arsitektur Anda dengan kesederhanaan dalam pikiran.

Biasanya, shell aplikasi memiliki ini elemen utama:

Tautan bilah navigasi teratas.
Tombol Segarkan (opsional).
Wadah latar belakang halaman.

Anda dapat menemukan studi kasus yang bagus di sini Arsitektur shell Aplikasi Web Progresif I / O Google. Mereka juga menawarkan beberapa tips untuk membangun arsitektur shell Anda sendiri, menyimpannya, dan menariknya secara otomatis untuk setiap halaman.

Pikirkan arsitektur shell sebagai semua elemen UI statis Anda akan gunakan di setiap halaman. Ini seharusnya dipisahkan dari sisa kode Anda dan di-cache untuk digunakan kembali dengan mudah. Lihat juga Intro Google ke subjek dengan banyak kode cuplikan untuk membantu Anda memulai.

Dukungan online & offline

Sebagian besar aplikasi asli berjalan baik tanpa internet. Aplikasi Web Progresif dimaksudkan untuk mengikuti perilaku yang sama ini.

Melalui pekerja layanan, Anda bisa buat cache lokal dengan kode JSON untuk setiap halaman. Dengan cara ini pengguna bisa jelajahi aplikasi web Anda secara lokal. Anda mungkin juga termasuk file manifes untuk menentukan ikon Anda, layar splash, dan pengaturan peluncuran lainnya.

Jika Anda menggunakan API Pekerja Layanan, intip di API Cache yang mana bagian dari kerangka kerja yang sama. Ini umumnya cara terbaik untuk melakukannya menyimpan data secara lokal dan mengaksesnya dari pekerja layanan kemudian.

Anda juga bisa menguji semua aplikasi web menggunakan Mercu suar, alat gratis untuk memeriksa kepatuhan fitur dan dukungan untuk teknologi PWA.

Odha selalu memerlukan dukungan offline melalui API Pekerja Layanan, sehingga mereka bisa bekerja di negara dengan konektivitas rendah. Mercusuar adalah cara terbaik untuk menguji dukungan offline bersama dengan sejumlah fitur lainnya.

Contoh langsung

Mempelajari PWA langsung dan melihat cara kerjanya adalah cara yang bagus untuk belajar. Namun, pasar Aplikasi Web Progresif adalah masih muncul, begitu banyak yang terbaik tersebar ke berbagai sudut internet.

Tapi, terima kasih kepada Galeri batuan PWA, Saya telah mengumpulkan beberapa contoh luar biasa untuk memamerkan apa yang benar-benar dapat dilakukan oleh PWA.

1. Konverter Mata Uang

Ini cukup sederhana konverter mata uang mengambil nilai tukar dan menghitung saat ini perbedaan antara satu ton mata uang di seluruh dunia.

Anda akan melihat aplikasi web ini sepenuhnya responsif, mendukung sentuhan, dan pembaruan otomatis tanpa refresh halaman.

Ini hanya beberapa fitur yang Anda harapkan dari semua Aplikasi Web Progresif yang khas. Ini aplikasi juga dapat disimpan secara lokal ke ponsel Anda untuk bekerja offline, meskipun terhubung ke file JSON untuk memeriksa nilai tukar saat ini.

2. Aksen Bahasa Inggris

Saya hanya menyukai aplikasi web ini karena unik dan dirancang dengan sangat baik. Itu Peta Aksen Bahasa Inggris kurator video online di mana orang membawa aksen dari daerah tertentu di AS dan Inggris.

Dengan mengklik di mana saja di peta, Anda dapat mendengarkan bagaimana orang mengucapkan kata-kata tertentu di berbagai belahan dunia. Aplikasi ini cepat kilat dan itu bersumber terbuka di GitHub bagi siapa saja untuk check out.

Internal berjalan Bereaksi / Redux dengan Firebase dan sebuah Koneksi API ke Google Maps. Pasti contoh yang bagus dari sesuatu yang cukup sederhana bagi pemula untuk belajar dan belajar.

3. Pokedex.org

PWA lain yang cukup sederhana adalah ini Aplikasi Pokedex dibuat oleh Nolan Lawson. Dia juga menerbitkan kode ini dengan bebas di GitHub, jadi kita belum proyek lain itu layak mengintai dan belajar.

Karena data ini dapat tetap statis, itu ditangani melalui mesin lokal bernama PouchDB. Semua data berasal dari PokeAPI dan kemudian disimpan sebagai JavaScript biasa. Ini artinya kamu bisa simpan secara lokal ke ponsel Anda seperti aplikasi asli yang benar dan akan berjalan dengan atau tanpa akses Internet. Cukup keren, benar?

Semuanya adalah didukung oleh JavaScript, jadi ini adalah bukti seberapa banyak yang dapat Anda lakukan dengan kode frontend. Itu menggunakan banyak caching dengan API Pekerja Layanan, jadi ini gila cepat dan super mudah digunakan.

4. Flipkart

Terakhir dan yang paling mengejutkan, mari kita lihat Situs web Flipkart. Ini penuh Toko e-commerce sebenarnya adalah Aplikasi Web Progresif.

Nya sepenuhnya responsif dan memuat halaman secara dinamis. URL halaman ditambahkan ke browser, sehingga Anda dapat menyalin / menempel dan membagikannya seperti situs web biasa.

Ini mudah PWA paling kompleks yang pernah saya lihat. Saya kagum para pengembang dapat menciptakan pengalaman yang mulus di web untuk semua pengguna, apalagi mendukung penyimpanan offline lokal, terlalu.

Dan, sementara saya tidak dapat menemukan repo untuk seluruh kode sumber Flipkart, ada sebuah Halaman Flipkart di GitHub dengan cuplikan kode yang lebih kecil dari tim pengembang mereka.

Belajar lebih banyak

Aplikasi Web Progresif adalah sangat populer dan pasti akan mendapatkan uap karena lebih banyak pengembang beralih dari aplikasi asli / hybrid.

Ada pertemuan tahunan yang disebut KTT Aplikasi Web Progresif dan mereka menerbitkan video di YouTube yang dapat Anda tonton secara gratis. Ini cara yang bagus untuk melakukannya ambil pengetahuan profesional tanpa membayar tiket.

Tapi, jika Anda mencari yang lebih detail Panduan pengkodean PWA pasti lihat tutorial ini:

Panduan Pemula Untuk Aplikasi Web Progresif
Bangun aplikasi web progresif pertama Anda dengan React
Membangun Aplikasi Web Progresif dengan Polymer