Cara menggunakan pekerja perkhidmatan untuk berkomunikasi di seluruh tab penyemak imbas

Artikel ini dikutip dari versi surat berita langganan harian SitePoint, yang menyediakan pemaju dengan pautan terpilih di bahagian depan, back-end, reka bentuk dan pengalaman pengguna, berita, perniagaan dan bidang lain untuk membantu mereka mengekalkan pengetahuan dan maklumat terkini. Ketahui lebih lanjut dan mendaftar untuk melanggan, lawati di sini.

Tim Evko adalah pemaju front-end yang menguruskan pangkalan kod berdasarkan React dan juga ketua pasukan Execthread, sebuah syarikat yang memberi tumpuan kepada menyediakan maklumat carian pekerjaan kepada profesional. Dalam masa lapangnya, dia akan bersenam di gim tempatan dan komited untuk menjadi atlet CrossFit yang kompetitif yang lebih baik.

Apakah konsep teknikal atau trend yang paling anda minati pada masa ini?

Saya telah terobsesi dengan teknologi pekerja perkhidmatan akhir -akhir ini, terutamanya untuk pemuatan laman web yang lebih cepat dan interaksi cepat. Saya suka prestasi dan fungsi luar talian aplikasi web, dan saya fikir masyarakat boleh mendapat manfaat daripada tumpuan yang lebih besar untuk membina aplikasi yang berdaya tahan, sejagat dan cepat. Pekerja perkhidmatan sangat menarik kerana ia dapat melaksanakan banyak ciri. Saya baru -baru ini mengetahui bahawa adalah mungkin untuk menggunakan pekerja perkhidmatan untuk berkomunikasi antara tab penyemak imbas, yang membolehkan setiap tab individu untuk memuat semula sendiri apabila cache tamat. Teknik ini tidak mudah untuk menguasai, tetapi saya sangat gembira ia wujud!

Saya tidak tahu banyak tentang teknologi ini, bolehkah anda memperkenalkannya secara terperinci?

Dalam penyemak imbas, pekerja perkhidmatan dapat mengawal semua pelanggan dalam julat yang tersedia, bukan hanya tab aktif yang sedang aktif. Ini bermakna apabila pekerja perkhidmatan berkomunikasi dengan laman web dalam pelayar, ia masih akan berkomunikasi dengan semua tab yang kini memaparkan laman web. Anda boleh mengambil kesempatan daripada ciri ini apabila menggunakan API Postmessage yang datang dengan pekerja perkhidmatan. Contoh terperinci boleh didapati di sini. Dalam ExectHread, kami menggunakan ciri ini untuk memuatkan semula semua tab dalam kes perkhidmatan pekerja menyediakan halaman dengan fail CSS lama dengan tag baru.

Sila terangkan (atau pautan ke!) Kerja -kerja menarik yang baru -baru ini dibina, direka atau dihasilkan. Mengapa anda bangga dengan ini?

Saya baru -baru ini mula memahami bagaimana algoritma DOM maya berfungsi, dan dalam proses saya membina komponen komponen saya sendiri: Baddom [GitHub]. Ia hanya mempunyai 600 bait dan anda boleh menggunakannya untuk membina keseluruhan aplikasi web anda. Saya bangga dengan ini kerana ia hanya 600 bait dan anda boleh menggunakannya untuk membina seluruh aplikasi web anda. Baddom sebenarnya sangat mudah, itulah sebabnya saya suka. Jika anda memberikan nod (seperti div pada halaman) dan rentetan templat ES6, ia akan mengemas kini div pertama supaya ia sepadan dengan rentetan templat. Pada asasnya, ia adalah fungsi pembezaan DOM yang memastikan sasarannya kelihatan seperti rentetan templat. Walau bagaimanapun, kerana ia adalah rentetan templat ES6, anda boleh menambah logik kepada pembezaan. Ini bermakna anda boleh memanggil fungsi pembezaan pada bila -bila masa untuk mengemas kini mana -mana keadaan logik anda berdasarkan, dan sasaran DOM asal anda akan sepadan dengan keadaan baru. Seluruh proses mendapati, memadam, atau mengubah semua nod DOM dengan membuat elemen yang tidak kelihatan menggunakan rentetan templat dan membandingkan elemen sasaran (dan anak -anaknya) sehingga unsur -unsur berdasarkan rentetan templat dan elemen sasaran kelihatan sama. Ia adalah cekap kerana ia tidak pernah mengemas kini elemen yang tidak memerlukan kemas kini, dengan itu menghalang pemprosesan yang tidak perlu dari penyemak imbas. Jika anda mempunyai 100 elemen bersarang dan hanya satu daripada mereka yang mempunyai nama kelas berubah, Baddom akan mencari elemen dan menukar hanya nama kelasnya.

Bagaimana anda membinanya?

Seperti kebanyakan projek saya, saya membinanya di Codepen. Saya suka memberi tumpuan kepada mengekalkannya semudah mungkin dan meminimumkan alat/tetapan membina yang mungkin. Dengan cara ini, tidak kira apa platform atau peranti yang mereka gunakan, lebih mudah bagi sesiapa sahaja untuk memahami dan mengambil bahagian. Codepen hebat kerana saya tidak perlu menyediakan IDE untuk mengendalikan perpustakaan depan. Saya boleh bercakap sepanjang hari mengenai Codepen, komuniti, dan apa yang saya pelajari dari kerja orang lain, tetapi saya hanya mengatakan semua orang harus melihatnya untuk diri mereka sendiri. Saya suka menulis semua kod JavaScript menggunakan corak modul, dan di sini saya melakukan perkara yang sama. Corak modul adalah cara untuk menulis JavaScript, dan semua kod terletak dalam objek mandiri. Kaedah dalam objek disimpan sebagai atribut fungsi, dan nilai konfigurasi boleh disimpan sebagai atribut objek. Saya suka menggunakan corak ini kerana sangat mudah untuk mengatur kod (terutamanya perpustakaan). Anda boleh mengetahui lebih lanjut mengenai mod ini di sini.

Apakah artikel teknikal terbaik yang telah anda baca baru -baru ini dan mengapa?

Reka bentuk web yang berdaya tahan oleh Jeremy Keith - Jeremy adalah pengarang yang sangat baik, dan kod dalam buku ini ditulis tepat seperti kod yang diterangkan dalam buku itu.

Apakah pautan bukan bertema yang paling menarik atau paling lucu yang anda hantar kepada rakan-rakan anda baru-baru ini?

Ia masih musim sejuk di pantai timur Amerika Syarikat. Saya menghantarnya kepada isteri saya beberapa hari yang lalu: memang benar! Ini adalah wawancara minggu ini, terima kasih kepada Tim untuk berkongsi teknologi yang paling ghairah.

FAQs (FAQs) mengenai menggunakan pekerja perkhidmatan untuk berkomunikasi antara tab penyemak imbas

Apakah pekerja perkhidmatan dan bagaimana ia berfungsi?

Pekerja Perkhidmatan adalah sejenis pekerja web. Ia adalah fail JavaScript yang mengawal laman web/web yang berkaitan dengannya, memintas dan mengubah suai navigasi dan permintaan sumber, dan sumber cache dengan cara yang sangat teliti untuk menyelesaikan pengalaman luar talian atau meningkatkan prestasi.

Bagaimana menggunakan pekerja perkhidmatan untuk berkomunikasi antara tab penyemak imbas?

Untuk menggunakan pekerja perkhidmatan untuk berkomunikasi antara tab penyemak imbas, anda perlu mendaftarkan pekerja perkhidmatan terlebih dahulu. Selepas mendaftar, anda boleh menggunakan API Postmessage untuk menghantar mesej antara pekerja perkhidmatan dan halaman. Pekerja perkhidmatan kemudian boleh menyiarkan mesej ini ke semua tab di bawah kawalannya.

Bagaimana memproses mesej pekerja perkhidmatan untuk pelbagai tab sekaligus?

Untuk memproses mesej pekerja perkhidmatan untuk pelbagai tab sekaligus, anda boleh menggunakan kaedah clients.matchall (). Kaedah ini mendapat semua pelanggan di bawah kawalan pekerja perkhidmatan dan menghantar mesej kepada setiap pelanggan. Dengan cara ini, anda boleh memastikan bahawa setiap tab memproses mesej sekali sahaja.

Bolehkah saya menggunakan pekerja perkhidmatan untuk komunikasi penyemak imbas ke pelayar tanpa pelayan?

Tidak, pekerja perkhidmatan tidak boleh digunakan untuk komunikasi penyemak imbas ke pelayar tanpa pelayan. Pekerja Perkhidmatan direka untuk membolehkan pengalaman luar talian dan meningkatkan prestasi dengan sumber caching. Mereka boleh berkomunikasi antara halaman dan pekerja perkhidmatan dan di antara tab di bawah kawalan pekerja perkhidmatan, tetapi mereka tidak dapat berkomunikasi secara langsung antara pelayar.

Apakah peranan API Postmessage dalam Pekerja Perkhidmatan?

API Postmessage memainkan peranan penting dalam pekerja perkhidmatan. Ia membolehkan anda menghantar mesej antara halaman dan pekerja perkhidmatan dan mesej penyiaran ke semua tab di bawah kawalan pekerja perkhidmatan. Ini adalah bagaimana pekerja perkhidmatan berkomunikasi antara tab penyemak imbas.

bagaimana untuk mendaftarkan pekerja perkhidmatan?

Untuk mendaftarkan pekerja perkhidmatan, anda perlu menggunakan kaedah Navigator.ServeWorker.Register (). Kaedah ini mengambil dua parameter: yang pertama adalah laluan ke fail pekerja perkhidmatan, dan yang kedua adalah objek pilihan. Selepas mendaftar untuk pekerja perkhidmatan, ia dapat mengawal halaman/tapak.

Bolehkah Pekerja Perkhidmatan meningkatkan prestasi laman web/laman web saya?

Ya, pekerja perkhidmatan dapat meningkatkan prestasi laman web/laman web anda dengan ketara. Dengan sumber caching dengan cara yang teliti, pekerja perkhidmatan dapat memberikan pengalaman luar talian atau meningkatkan prestasi dengan menyediakan sumber cache dan bukannya membuat permintaan rangkaian.

Bagaimana menggunakan pekerja perkhidmatan untuk memberikan pengalaman luar talian?

Untuk menggunakan pekerja perkhidmatan untuk memberikan pengalaman luar talian, anda perlu sumber cache. Apabila pekerja perkhidmatan memintas navigasi atau permintaan sumber, ia boleh bertindak balas dengan sumber cache dan bukannya membuat permintaan rangkaian. Ini membolehkan halaman/tapak berfungsi dengan betul walaupun di luar talian.

Apakah kaedah clients.matchall () dalam pekerja perkhidmatan?

Kaedah clients.matchall () dalam pekerja perkhidmatan adalah kaedah untuk mendapatkan semua pelanggan di bawah kawalan pekerja perkhidmatan. Kaedah ini berguna untuk mesej penyiaran ke semua tab di bawah kawalan pekerja perkhidmatan.

Bolehkah saya menggunakan pekerja perkhidmatan dengan WebRTC?

Tidak, pekerja perkhidmatan tidak boleh digunakan dengan WebRTC. Pekerja Perkhidmatan direka untuk membolehkan pengalaman luar talian dan peningkatan prestasi, sementara WebRTC direka untuk membolehkan komunikasi masa nyata antara pelayar. Kedua -dua teknologi ini berfungsi dengan pelbagai tujuan dan tidak boleh digunakan bersama.

Atas ialah kandungan terperinci Cara menggunakan pekerja perkhidmatan untuk berkomunikasi di seluruh tab penyemak imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!