PWAs: Selamat datang ke revolusi bergerak

Kandungan

• Pendakian PWA
• PWA beraksi hari ini
• Pemasangan
• Pelancaran luar talian dan segera
• Pengalaman kelas pertama
• Kedai aplikasi
• Integrasi platform
• Reka bentuk dan cabaran UX
• Tahun PWA

Sama seperti reka bentuk web responsif menutup jurang antara laman web desktop dan mudah alih beberapa tahun yang lalu, teknik aplikasi web progresif kini menutup jurang antara web dan dunia aplikasi. Dengan pengalaman pengguna dari aplikasi desktop ke aplikasi mudah alih berkumpul dengan cepat, nampaknya internet yang lebih licin dan lebih cekap berkembang - walaupun tidak semestinya tanpa perubahan ketara pada kod genetiknya.

• Cara membina Aplikasi Web Progresif

Ternyata terdapat beberapa tekanan selektif yang mendorong ini. Pertama sekali, membuat aplikasi asli untuk setiap niche tidak semestinya menggunakan sumber yang cekap: pengguna berakhir dengan beratus-ratus aplikasi besar membuang lebar jalur dan ruang cakera yang berharga dan syarikat menghabiskan banyak wang untuk membuat aplikasi hanya untuk mereka ditinggalkan selepas versi pertama mereka. Dan kebanyakan aplikasi ini hanya didorong oleh kandungan web: maklumat yang berasal dari perkhidmatan web atau sistem pengurusan kandungan.

Definisi aplikasi web progresif tidak konkrit. PWA hanyalah aplikasi web yang menggunakan beberapa API dan kebolehan baru di platform web menggunakan peningkatan progresif untuk menawarkan pengalaman seperti aplikasi di setiap platform dengan asas kod yang sama. Ini lebih merupakan sekumpulan amalan terbaik dan penggunaan API yang menghasilkan pengalaman seperti aplikasi yang sangat baik untuk pengguna anda, jadi tidak seperti anda mempunyai atau tidak memiliki PWA; lebih seperti laman web anda lebih kurang PWA.

Adakah anda akan mula membina laman web baru? Cuba gunakan pembina laman web. Dan pastikan anda mendapat sokongan yang anda perlukan dari perkhidmatan hosting web yang baik juga. Atau untuk sesuatu yang sedikit berbeza, lihat panduan kami untuk penyimpanan awan terbaik.

Pendakian PWA

Walaupun nama PWA diciptakan pada tahun 2015 dalam artikel Melarikan Tab Tanpa Menurunkan Jiwa Kita oleh Alex Russell yang bekerja di Google untuk pasukan Chrome, perjalanan mereka sebenarnya tidak bermula di sana. Kami dulu mempunyai Aplikasi HTML (HTA), yang dibuat oleh Microsoft pada tahun 1999, bersama dengan banyak platform aplikasi web lain dari Nokia, BlackBerry dan syarikat lain. Kemudian, pada tahun 2007, Steve Jobs menyampaikan satu-satunya cara untuk membuat aplikasi untuk iPhone asli: PWA, walaupun dengan nama yang berbeza. Chrome bermula dari sana, memperbaiki API beberapa tahun kemudian dan mencipta nama PWA.

Dengan begitu banyak pengalaman gagal sebelumnya yang berusaha membawa kandungan web ke dunia aplikasi, mengapa kita fikir ia akan berfungsi sekarang? Terutama, ini bergantung kepada syarikat yang kini bekerja dan mempromosikan teknologi di sebalik PWA, seperti Microsoft, Google, Apple dan Mozilla, untuk beberapa nama. Juga, prestasi platform web mencapai tahap di mana tidak ada perbezaan yang dirasakan ketika anda membandingkan PWA yang dirancang dengan baik dengan aplikasi asli. Keadaan tersebut tidak pernah ada sebelumnya dan itulah salah satu sebab komuniti web memutuskan bahawa sudah tiba masanya untuk PWA.

PWA beraksi hari ini

Hari ini PWA berfungsi sepenuhnya dan boleh dipasang pada:

• Android dengan kebanyakan penyemak imbas, dengan Chrome menawarkan pengalaman terbaik
• iOS dengan Safari
• Buku Chrome
• Windows 10 dari Kedai Microsoft
• Telefon istimewa dengan KaiOS - garpu dari Firefox OS - kini tersedia untuk berjuta-juta pengguna terutamanya di India

Sokongan juga datang ke macOS, Windows dan Linux melalui Chrome akhir tahun ini. Ia tersedia hari ini sebagai bendera eksperimen 'Desktop PWA' jika anda ingin mencubanya sekarang. Pemasangan pada Windows on Edge tanpa penggunaan kedai akan datang juga, walaupun tidak ada jangka waktu yang ditentukan.

Sekiranya anda membaca semula senarai itu, anda dapat melihat setiap platform mempunyai atau akan mendapat sokongan untuk PWA yang dapat dipasang sepenuhnya pada bulan-bulan berikutnya. Dan kerana PWA hanyalah sebuah laman web dengan ciri-ciri di atas yang akan diaktifkan hanya pada penyemak imbas yang serasi, kita bahkan boleh mengatakan bahawa ia sesuai dengan semua penyemak imbas dari fungsi asasnya.

Juga, PWA kini dihasilkan dari kebanyakan CLI untuk kerangka kerja yang berbeza, termasuk Angular 6+ CLI, React Create App, PWA Starter Kit dari Polymer dan Preact CLI. Akhirnya, pasukan Ionic Framework muncul dengan idea Capacitor, pengganti Cordova sumber terbuka yang memungkinkan PWA asli di setiap kedai aplikasi.

Pemasangan

Salah satu aspek penting PWA adalah pemasangan aplikasi. Proses ini dilakukan dalam dua langkah pilihan: muat turun dan penyimpanan luar talian fail aplikasi dan pemasangan ikon di OS. Oleh kerana kedua-dua langkah itu adalah pilihan, anda boleh menawarkan pengalaman luar talian di penyemak imbas atau anda boleh menawarkan ikon tanpa pemasangan di luar talian. Tetapi PWA yang benar harus merangkumi keduanya: ia mesti disajikan dengan TLS di bawah HTTPS dan pengguna akan memutuskan sama ada mereka akan menggunakannya di penyemak imbas atau di dalam ikon yang dipasang sendiri.

Pelancaran luar talian dan segera

Otak PWA adalah pekerja perkhidmatan, fail JavaScript yang dipasang pada peranti pengguna yang bertanggungjawab memuat turun fail aplikasi, menyimpannya ke dalam cache dan kemudian melayani mereka apabila diperlukan. Setelah pekerja perkhidmatan dipasang, ia bertindak seperti proksi rangkaian untuk setiap sumber yang diperlukan aplikasi web: ia dapat memutuskan untuk mengambilnya dari rangkaian atau menyampaikannya dari cache tempatan, yang menjadikan aplikasi tersedia di luar talian dan juga tersedia hanya beberapa milisaat walaupun pengguna mempunyai sambungan, meniru pelancaran aplikasi asli.

Untuk memasang pekerja perkhidmatan, dokumen HTML anda perlu memasukkan sesuatu seperti:

jika ('serviceWorker' dalam navigator) navigator.serviceWorker.register ("sw.js");

Itu akan memasang fail "sw.js" ke peranti pengguna untuk folder semasa dalam domain semasa - konsep yang dikenali sebagai ruang lingkup. Setelah dipasang, lawatan seterusnya ke mana-mana URL dalam skopnya akan diuruskan oleh pekerja perkhidmatan tersebut.

Katakan kita mempunyai PWA dengan empat fail: index.html, app.js, app.css dan logo.png. Perkara pertama adalah memasang fail tersebut ke dalam cache dalam fail sw.js.

const resources = ["index.html", "app.js", "app.css", "logo.png"]; diri. addEventListener ("install", event => {event. waitingUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (sumber)));});

Kemudian agar PWA selalu dilayani dari cache, kita perlu mendengar peristiwa pengambilan di dalam pekerja perkhidmatan dan memutuskan dasar cache yang akan digunakan, seperti cache terlebih dahulu dengan potongan berikut.

self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). kemudian (res => res);

Dalam kes ini, setiap kali pengguna mengakses PWA (baik dari penyemak imbas atau dari ikon yang dipasang), mesin akan mendapatkan fail dari cache. Kelebihan PWA berbanding aplikasi asli adalah bahawa peranti tidak perlu memuat turun semua fail lagi apabila ada perubahan, hanya fail yang telah berubah dengan proses yang telus. Selain itu, kami masih boleh memuat turun bahagian aplikasi mengikut permintaan.

Tetapi cabarannya adalah bagaimana anda mengetahui fail mana yang diperbaharui di pelayan sehingga anda dapat menggantinya di cache? Sekiranya anda tidak mahu menulis pekerja perkhidmatan peringkat rendah untuk menguruskannya, anda boleh menggunakan Kotak Kerja perpustakaan sumber terbuka, yang akan membantu anda dengan generasi pekerja perkhidmatan dan manifes sumber untuk mengemas kini pakej yang dipasang.

Ketahuilah bahawa fail PWA anda akan dihapus jika terdapat tekanan penyimpanan pada peranti, kecuali jika anda meminta Penyimpanan Tetap jika ada:

jika ('penyimpanan' di navigator && 'berterusan' di navigator.storage) navigator.storage.persist ();

Pada Chrome dan kebanyakan penyemak imbas Android, aplikasi anda tidak dapat menggunakan lebih dari lima peratus ruang yang ada; pada iOS harganya 50MiB (hampir 50MB) setiap hos sahaja; di Edge ia berubah mengikut jumlah memori dan di Windows Store, ia tidak terhad.

Pengalaman kelas pertama

Kami mempunyai otak dan sekarang saatnya untuk jantung: manifes aplikasi web. Tujuan mengubah laman web menjadi PWA bukan hanya untuk memastikannya tersedia dengan cepat atau semasa di luar talian tetapi juga untuk membolehkannya mempunyai ikon sendiri dalam OS dan menawarkan pengalaman yang sepenuhnya berdiri sendiri seperti aplikasi lain yang dipasang.

Manifes adalah fail JSON yang menentukan metadata untuk PWA yang digunakan oleh penyemak imbas atau kedai aplikasi untuk menentukan tingkah laku pemasangan.

Fail menentukan beberapa sifat sebagai metadata untuk PWA anda. Setiap OS akan membaca sifat ini dan mencuba yang terbaik agar sesuai dengan pengalaman yang anda sukai. Contohnya, Android akan membaca 'display: standalone' dan mencipta pengalaman aplikasi biasa. Dengan 'display: minimal-ui', ia akan memberikan pengalaman dengan URL yang dapat dilihat dan sijil TLS - berguna untuk aplikasi sensitif keselamatan. Dengan ‘display: fullscreen’, ia akan membuat aplikasi yang sangat mengasyikkan tanpa bar status atau butang belakang yang kelihatan. Satu set ikon dan warna menentukan bagaimana skrin percikan atau bar tajuk akan melihat tetingkap aplikasi anda.

Terdapat beberapa penjana manifes, seperti Web App Manifest Generator atau PWA Builder yang juga akan mengubah saiz ikon untuk anda dalam resolusi yang berbeza jika anda memberikan resolusi tinggi (minimum 512 piksel).

Apabila fail manifes dihubungkan dalam dokumen HTML, pengguna akan dapat memasang aplikasi menggunakan teknik yang berbeza bergantung pada penyemak imbas, biasanya disebut Tambahkan ke Skrin Utama, Pasang atau hanya Tambahkan. Sekiranya PWA anda dapat di-crawl oleh Bing, Microsoft akan menambahkannya secara automatik ke Kedai Microsoft sehingga pengguna Windows 10 dapat memasangnya dari sana.

Pada beberapa sistem operasi, PWA anda akan dapat menangkap pautan. Ini bermaksud bahawa setelah pengguna memasang aplikasinya, setiap URL dalam ruang lingkup manifes anda akan dibuka dalam batas aplikasi anda dan bukan di penyemak imbas, tidak kira ia muncul di penyemak imbas atau aplikasi lain seperti WhatsApp, Facebook atau e-mel.

Sekiranya anda memenuhi syarat PWA yang kami tetapkan di sini, beberapa platform akan menawarkan lencana ambien (ikon kecil biasanya di bar URL yang menyatakan bahawa web boleh dipasang) atau sepanduk aplikasi web. Sekiranya anda mahu, anda juga boleh menambah butang Pemasangan tersuai anda sendiri menggunakan coretan berikut:

window.addEventListener ("beforeinstallpr ompt", function (e) {e.prompt (); // akan menunjukkan instalasi asli prompt})

Sekiranya PWA dipasang, acara 'appinstalled' akan dipecat pada objek tetingkap sehingga anda dapat mengesan statistik yang mendengarkannya.

Kedai aplikasi

Salah satu faedah utama pemasangan dari penyemak imbas adalah dengan mengelakkan proses kelulusan kedai aplikasi atau perlu membayar untuk menjadi penerbit. Itu datang dengan kelebihan yang jelas, seperti penerbitan segera, membuat aplikasi peribadi untuk syarikat atau aplikasi yang tidak boleh diterima di kedai.

Tetapi beberapa syarikat mahu berada di kedai. Sehingga hari ini, satu-satunya kedai yang menerima PWA secara rasmi adalah Windows Store dan kaiOS Store. Nasib baik, dengan alat seperti Capacitor (sekarang di Alpha) atau PWA Builder, kami dapat membuat dan menandatangani pakej asli untuk platform lain juga.

Terdapat beberapa PWA yang sudah diterbitkan di Google Play Store, seperti Twitter Lite dan Google Maps Go, yang kini dalam pelaksanaan khusus. Chrome akan menawarkan penyelesaian dari Chrome 68 melalui aktiviti web yang dipercayai. Dari saat itu, kami dapat membuat pakej Android (APK) dengan pelancar ke PWA kami dan memuat naiknya ke kedai. Untuk Kedai Microsoft pada Windows 10, laman web PWA Builder pada masa ini membantu dengan menghasilkan pakej APPX Windows 10. Dengan menggunakan paparan web, anda mungkin dapat membuat aplikasi iOS untuk App Store secara manual tetapi sangat berhati-hati dengan peraturan kedai tersebut.

Integrasi platform

Dengan menerapkan teknik peningkatan progresif, Anda akan dapat menggunakan banyak fitur, termasuk pemberitahuan push, akses kamera dan mikrofon, geolokasi, sensor, pembayaran, dialog berbagi dan penyimpanan luar talian. Semua ciri ini dijalankan secara langsung dalam model keselamatan penyemak imbas, termasuk dialog kebenaran.

Kami juga dapat berkomunikasi dengan aplikasi lain melalui skema URI, seperti membuka Twitter, YouTube atau WhatsApp melalui URL atau URI tersuai mereka, seperti whatsapp: //.

Akhirnya, semasa membuat PWA asli yang diterbitkan ke kedai menggunakan Capacitor atau ke Microsoft Store, kita akan dapat menghubungkan API asli yang akan membolehkan kita melaksanakan hampir semua kod asli. Integrasi dengan Windows 10 merangkumi akses perkakasan tetapi juga integrasi dengan OS, yang menawarkan pilihan seperti Pin to Start. Sebagai contoh, Twitter PWA membolehkan anda menyematkan mana-mana pengguna ke skrin permulaan anda.

Reka bentuk dan cabaran UX

Merancang PWA mempunyai cabaran yang unik, jadi penting untuk meluangkan masa untuk meneliti, menguji sebanyak mungkin dan mempertimbangkan perkara berikut:

• Pengguna akan mengharapkan pengalaman seperti aplikasi.
• Proses pemasangan masih baru, jadi kami perlu berusaha lebih jauh untuk menjelaskan cara memasang aplikasi.
• Mengemas kini aplikasi di latar belakang tanpa interaksi pengguna sangat bagus tetapi ia juga menambahkan beberapa cabaran untuk UX.
• Di desktop, reka bentuk web responsif mengambil perbatasan baru kerana tingkap PWA boleh menjadi kecil, jauh lebih kecil daripada ruang pandang bergerak. Ini bermaksud kita perlu membuat paparan tertentu atau widget kecil untuk format ini, seperti yang dilihat di Chrome OS hari ini.
• Pemberitahuan push harus memberi nilai tambah kepada pengguna saja, jadi belajarlah bertanya pada saat yang tepat dan jangan sia-siakan peluang untuk mengirim mesej yang tidak berguna atau menarik.
• Kita perlu merancang untuk prestasi web dan untuk akses luar talian.

Tahun PWA

Dengan penambahan iOS dan desktop tahun ini, PWA ada di mana-mana hari ini. Tetapi kita perlu ingat bahawa perjalanan mereka baru bermula, jadi harapkan perubahan yang kerap dan pastikan anda terus diperbaharui dengan teknik dan idea terkini untuk memberikan pengalaman pengguna yang sangat baik semasa platform ini berkembang.

Artikel ini pada asalnya diterbitkan dalam edisi 308 dari bersih, majalah terlaris di dunia untuk pereka dan pembangun web. Beli terbitan 308 di sini atau melanggan di sini.