Pengenalan kepada Aplikasi Web Progresif

Kebanyakan pemaju sekurang-kurangnya mendengar bunyi buzz sekitar Aplikasi Web Progresif. Ini disokong secara meluas oleh syarikat teknologi seperti Google dan dengan cepat menjadi norma untuk aplikasi web berbilang peranti.

Tetapi, apa yang sebenarnya perbezaan antara tipikal dan a progresif aplikasi web?

Untuk pemaju, ia adalah satu perbezaan dunia. Aplikasi Web Progresif menggunakan API web moden untuk mewujudkan pengalaman apl asli dalam pelayar. Ini bermakna pemaju boleh membina apl dinamik memuat cepat tanpa menggunakan kerangka hibrid.

Dalam panduan ini, saya akan melindunginya asas-asas Aplikasi Web Progresif, beberapa ciri utama, dan bagaimana anda boleh memulakan membina sendiri.

Apakah Aplikasi Web Progresif??

Aplikasi Web Progresif (atau PWA) mengambil kesempatan daripada API pelayar web untuk membuat pengalaman aplikasi asli tepat di pelayar pada mana-mana peranti.

Pada akhirnya, Aplikasi Web Progresif merangkumi a beberapa teknologi yang boleh digunakan oleh pemaju untuk mencipta aplikasi seperti asli. Ramai datang API Web seperti API pekerja perkhidmatan atau API Tekan.

Disana ada agak beberapa keperluan untuk memanggil sesuatu PWA tetapi ini adalah yang paling penting:

Adakah sepenuhnya respons mudah alih.
Mematuhi peningkatan progresif.
Boleh memasang secara tempatan pada telefon pintar dan tablet.
Jalankan di luar talian tanpa Internet, menggunakan pekerja perkhidmatan.
Pisahkan kandungan dari fungsi menggunakan shell aplikasinya.
Builts pada HTTPS untuk keselamatan yang lebih baik.
Boleh ditemui dalam carian Google.
Mempunyai halaman aplikasi seperti dinamik tetapi masing-masing masih ada mempunyai URL sendiri.

Jika anda berfikir membina aplikasi web kecil anda mungkin cuba mencipta App Web Progresif sebaliknya. Ini datang dengan sedikit keluk pembelajaran tetapi anda mempunyai banyak lebih banyak kawalan ke atas pengalaman pengguna Akibatnya.

Mari kita menyelami asas-asas Aplikasi Web Progresif dan pelajari apa yang membuatkan mereka tanda.

Pekerja perkhidmatan

Setiap App Web Progresif tunggal memerlukan pekerja perkhidmatan. Ini adalah seperti pegawai trafik yang menyelaraskan di mana lalu lintas sedang berlaku, di mana data berasal, dan bagaimana ia berlaku semuanya teratur dan di-cache.

Secara ringkas, pekerja perkhidmatan beroperasi sebagai fail JavaScript dan berjalan di latar belakang aplikasi web anda. Bila-bila masa pengguna melakukan sesuatu, ia memanggil skrip pekerja perkhidmatan sama ada data tarik, menyimpan data, atau kedua-duanya!

Menggunakan API Pekerja Perkhidmatan adalah penting untuk menjalankan PWA yang disokong luar talian. Inilah caranya menghantar data antara pandangan dan bagaimana anda boleh memohon data dari pangkalan data tempatan. Tetapi, ini adalah perkara yang paling maju yang anda pelajari dengan bekerja pada projek PWA.

Ambil mengintip di Cookbook Pekerja Perkhidmatan untuk coretan asas dan demo langsung. Ini adalah cara yang hebat untuk belajar dengan mengkaji apa yang dilakukan orang lain dan mengklon bahawa dalam aplikasi anda sendiri.

Jika anda berharap dapat membina Aplikasi Web Progresif mulakan dengan API Pekerja Servis. Hanya tinker dengannya dan tetapkan demo mudah dalam negara. Ini akan meletakkan asas untuk kemudian membina ciri dan halaman aplikasi tersuai yang semua dijalankan melalui pekerja perkhidmatan.

Untuk panduan pemula dan coretan kod terperinci, Saya secara khusus mencadangkan sumber-sumber ini:

Bermula dengan Pekerja Perkhidmatan
Bermula dengan Pekerja Perkhidmatan
Contoh Pekerja Perkhidmatan: Sampel Halaman Luar Biasa

Cakera aplikasi

Kebanyakan apl asli ikuti senibina shell aplikasi di mana data dan kod apl adalah sepenuhnya berasingan daripada UI. Cakera permohonan boleh cache dalam negara jadi setiap halaman memuat sangat cepat.

Ini tetap sama “aplikasi asli” rasa di mana antara muka sentiasa kelihatan tetapi kandungan / fungsi banyak berbeza setiap masa. Lihat laman ini di laman Google Developers untuk mempelajari sedikit lebih lanjut mengenai model shell app.

Kebanyakan apl mempunyai shell aplikasi yang sangat mudah dan anda harus merancang seni bina anda dengan kesederhanaan dalam fikiran.

Biasanya, shell aplikasi mempunyai ini unsur utama:

Pautan bar navigasi teratas.
Butang Muat semula (pilihan).
Halaman latar belakang bekas.

Anda boleh mencari kajian kes bagus di sini Arkib shell aplikasi I / O Progresif Google Google. Mereka juga menawarkan beberapa tips untuk membina arkitek shell anda sendiri, caching itu, dan menariknya secara automatik untuk setiap halaman.

Fikirkan arsitektur shell sebagai semua elemen UI statik anda akan gunakan pada setiap halaman tunggal. Ini sepatutnya dipisahkan dari seluruh kod anda dan cache untuk penggunaan semula yang mudah. Semak juga Intro Google kepada subjek dengan banyak kod coretan untuk membantu anda memulakan.

Sokongan dalam talian & luar talian

Kebanyakan apl asli berjalan lancar tanpa Internet. Aplikasi Web Progresif bertujuan untuk mengikuti tingkah laku yang sama.

Melalui pekerja perkhidmatan, anda boleh membina cache tempatan dengan kod JSON untuk setiap halaman. Dengan cara ini pengguna boleh melayari aplikasi web anda secara tempatan. Anda mungkin juga termasuk fail manifes untuk menentukan ikon anda, skrin percikan dan tetapan pelancaran yang lain.

Sekiranya anda menggunakan API Pekerja Servis, lihatlah API Cache iaitu sebahagian daripada kerangka yang sama. Secara amnya cara terbaik untuk menyimpan data secara tempatan dan aksesnya dari pekerja perkhidmatan kemudian.

Anda juga boleh menguji sebarang aplikasi web menggunakan Rumah Api, alat percuma untuk memeriksa pematuhan ciri dan sokongan untuk teknologi PWA.

PWA sentiasa memerlukan sokongan luar talian melalui API Pekerja Perkhidmatan, supaya mereka dapat bekerja dalam keadaan sambungan rendah. Mercusuar adalah cara terbaik untuk menguji sokongan luar talian bersama-sama dengan pelbagai ciri-ciri lain.

Contoh hidup

Mempelajari PWA secara langsung dan melihat bagaimana kerja mereka adalah cara terbaik untuk belajar. Walau bagaimanapun, pasaran Aplikasi Web Progresif adalah masih muncul, begitu banyak yang terbaik tersebar ke pelbagai sudut Internet.

Tetapi, terima kasih kepada Galeri rock PWA, Saya telah melengkapkan beberapa contoh hebat untuk menunjukkan apa yang PWAs benar-benar boleh lakukan.

1. Penukaran Mata Wang

Ini agak mudah penukar mata wang mengambil kadar pertukaran dan mengira semasa perbezaan antara satu tan mata wang di seluruh dunia.

Anda akan melihat aplikasi web ini responsif sepenuhnya, menyokong sentuhan, dan kemas kini auto tanpa sebarang halaman menyegarkan.

Ini hanya beberapa ciri yang anda harapkan dalam mana-mana App Web Progresif biasa. Ini aplikasi juga boleh disimpan di dalam negara ke telefon anda untuk bekerja di luar talian, walaupun ia bersambung ke fail JSON untuk memeriksa kadar pertukaran semasa.

2. Aksen Bahasa Inggeris

Saya hanya memuja aplikasi web ini kerana ia unik dan sangat direka dengan baik. The Peta Accents Bahasa Inggeris curates videos online di mana orang membawa aksen dari kawasan tertentu di AS dan UK.

Dengan mengklik di mana sahaja di peta, anda boleh mendengar bagaimana orang mengucapkan kata-kata tertentu di berbagai belahan dunia. Aplikasi ini kilat cepat dan ia sumber terbuka pada GitHub untuk sesiapa sahaja untuk menyemak.

Dalaman berjalan React / Redux dengan Firebase dan a Sambungan API ke Peta Google. Pasti contoh hebat sesuatu yang agak mudah untuk pemula untuk belajar dan belajar.

3. Pokedex.org

Satu lagi PWA yang agak mudah ialah ini Aplikasi Pokedex dicipta oleh Nolan Lawson. Beliau juga menerbitkan kod ini dengan bebas pada GitHub, jadi kita lagi satu lagi projek itu bernilai mengintip dan belajar.

Oleh kerana data ini boleh kekal statik, ia ditangani melalui enjin tempatan dipanggil PouchDB. Semua data berasal dari PokeAPI dan kemudian disimpan sebagai JavaScript biasa. Ini bermakna anda boleh simpan secara setempat ke telefon anda seperti aplikasi asli asli dan ia akan berjalan dengan atau tanpa akses Internet. Cukup sejuk, betul?

Seluruhnya dikuasakan oleh JavaScript, jadi itu adalah bukti berapa banyak yang boleh anda lakukan dengan kod frontend. Ia menggunakan banyak caching dengan API Pekerja Perkhidmatan, jadi ia pantas cepat dan mudah digunakan.

4. Flipkart

Terakhir dan paling mengejutkan, mari lihat Laman web Flipkart. Ini penuh Kedai e-dagang, sebenarnya, sebuah Aplikasi Web Progresif.

Ia responsif sepenuhnya dan memuatkan halaman secara dinamik. URL halaman ditambahkan pada penyemak imbas, jadi anda boleh menyalin / paste dan membagikannya seperti laman web biasa.

Ini mudah PWA yang paling kompleks yang pernah saya lihat. Saya kagum para pemaju dapat mencipta pengalaman lancar seperti itu di web untuk semua pengguna, apatah lagi menyokong storan luar talian tempatan, juga.

Dan, sementara saya tidak dapat mencari repo untuk kod sumber Flipkart keseluruhan, terdapat satu Halaman Flipkart di GitHub dengan coretan kod yang lebih kecil dari pasukan pemaju mereka.

Belajar lebih lanjut

Aplikasi Web Progresif adalah sangat popular dan pasti akan mendapat stim kerana lebih banyak pemaju bertukar dari aplikasi asli / hibrid.

Terdapat sidang kemuncak tahunan yang dipanggil Sidang Kemuncak Web Progresif dan mereka menerbitkan video di YouTube, anda boleh menonton secara percuma. Ini adalah cara yang bagus untuk Ambil pengetahuan pro tanpa membayar tiket.

Tetapi, jika anda mencari lebih terperinci Panduan pengekodan PWA pasti semak tutorial ini:

Panduan Permulaan Untuk Aplikasi Web Progresif
Bangun aplikasi web progresif pertama anda dengan React
Membangun Aplikasi Web Progresif dengan Polimer