Pekerja Layanan PWA untuk Dummies

Faktanya adalah bahwa pekerja layanan memiliki peran penting untuk dimainkan di tahun-tahun mendatang, dan semakin cepat Anda dapat membiasakan diri dengan teknologi baru ini, semakin baik Anda dapat menyesuaikan diri dengan masa depan Web yang baru ini.

Inilah sebabnya, untuk membantu Anda mengenal teknologi baru ini dengan lebih baik, bersama-sama kita akan berdiskusi tentang pekerja layanan—apa itu, apa yang dibawanya ke Web, bagaimana kita dapat mempersiapkan diri dengan lebih baik untuk teknologi baru ini. Web.

Apa itu pekerja layanan?

definisi

Secara universal dianggap sebagai teknologi yang membuat atau menghancurkan PWA, service worker adalah API yang berjalan secara independen dari browser dan bertanggung jawab atas intersepsi jaringan —dan karena itu, ia dapat melakukan banyak hal yang sebelumnya tidak mungkin dilakukan di Web. Situs web (biasanya PWA) yang dikendalikan oleh pekerja layanan dapat memiliki integrasi yang lebih dalam dengan perangkat yang digunakan dan akibatnya, menghadirkan lebih banyak kemampuan perangkat keras dan fitur seperti aplikasi ke Web (misalnya pemberitahuan push, sinkronisasi latar belakang, dan banyak lagi).

Bagaimana itu bekerja

Pendeknya. pekerja layanan pada dasarnya adalah lapisan berbasis peristiwa antara browser dan server yang memotong, memodifikasi, dan menangani permintaan jaringan keluar:

Dan karena service worker adalah yang berbasis peristiwa , ia merespons dan berkomunikasi hanya melalui peristiwa, dan menggunakan janji untuk memberi tahu kapan operasi selesai. Namun, semua penerimaan peristiwa (mis. fetch dan push ) hanya dimungkinkan saat service worker aktif , yang menunjukkan kapan browser mengenali dan mendaftarkan service worker (dan juga saat service worker itu sendiri telah berhasil menyelesaikan pemasangan) . Secara sederhana, ini adalah siklus hidup khas pekerja layanan:

Perhatikan juga semua peristiwa yang tersedia ini di service worker:

Semua peristiwa fungsional ( fetch , sync , dan push ) harus cukup jelas bagi Anda, karena itu adalah peristiwa yang membuat hampir semua karakteristik fitur progresif PWA (yaitu kemampuan offline, sinkronisasi latar belakang, pemberitahuan push).

 Bacaan yang disarankan: Apa itu PWA? Yang Perlu Anda Ketahui Tentang Aplikasi Web Progresif

Kendala untuk pekerja layanan

Karena ini adalah skrip yang berjalan secara independen dari browser, ada beberapa batasan untuk itu:

• Protokol HTTPS : pekerja layanan harus dijalankan di situs web berbasis HTTPS

• Tidak ada akses ke localStorage , DOM, dan jendela.
• scope terbatas : pekerja layanan hanya dapat beroperasi dalam scope direktori saat ini (dan sub-direktori) tempat service-worker.js berada.
• Asynchronous : service worker bersifat asynchronous, sehingga mengandalkan API berbasis Promise.

Apa arti pekerja layanan untuk PWA

Seperti yang dinyatakan sebelumnya, service worker adalah tulang punggung PWA, yang tanpanya banyak fitur revolusioner PWA tidak mungkin. Pada dasarnya, yang dilakukan service worker adalah menyediakan sarana untuk:

Performa Lebih Baik

Kinerja pada kunjungan berulang secara signifikan lebih baik pada PWA, karena pekerja layanan sangat membantu proses caching. Dibandingkan dengan cache web biasa (cache HTTP) yang digunakan di sebagian besar situs web, PWA unggul dalam menyajikan konten bahkan dalam kondisi jaringan yang tidak menguntungkan:

Ini semua berkat fakta bahwa pekerja layanan memberikan kebebasan total kepada pengembang untuk mengetahui apa dan bagaimana caching dilakukan. Untuk melihat seberapa jauh lebih baik kinerja caching pekerja layanan, kami merekomendasikan studi terbaru Google: Mengukur Dampak Kinerja Dunia Nyata dari Pekerja Layanan. Studi ini memiliki metodologi yang jelas, berpusat pada waktu untuk melukis pertama kali sebagai metrik untuk menentukan kinerja pekerja layanan.

Rata-rata, halaman dimuat sedikit lebih cepat saat service worker mengontrol halaman daripada tanpa service worker, baik untuk pengunjung baru maupun pengunjung kembali.

Philip Walton, Mengukur Dampak Kinerja Dunia Nyata dari Pekerja Layanan

Akses Offline

Saat terdaftar, pekerja layanan men-cache konten yang diperlukan untuk situs PWA Anda dan menyajikannya setelahnya. Ini secara efektif membuat situs web yang didukung PWA dapat offline, karena pengguna masih dapat berinteraksi dengan situs dan melihat semua konten yang di-cache.

Ini bukan untuk mengatakan bahwa akses offline adalah fitur yang sebelumnya tidak terlihat di Web — itu mungkin untuk memberi pengguna pengalaman offline di web, hanya saja pengalamannya tidak optimal (lihat Cache Aplikasi adalah Douchebag) dan layanan pekerja diciptakan untuk mengatasi (atau lebih tepatnya, menghindari) kelemahan AppCache.

 Bacaan yang disarankan: Cara membuat PWA Anda berfungsi offline

Fitur aplikasi asli

Selain menawarkan akses offline dan peningkatan kinerja, service worker juga berfungsi sebagai dasar untuk lebih banyak fitur seperti aplikasi seperti pemberitahuan push dan sinkronisasi latar belakang (dan dalam waktu dekat, geofencing dan sinkronisasi berkala). Fitur notifikasi push PWA, misalnya, dirakit menggunakan dua API: Notifications API dan Push API, keduanya dibangun di atas Service Worker API.

Siklus hidup pekerja layanan

Masa pakai layanan terdiri dari tiga bagian: pendaftaran, pemasangan, dan aktivasi, yang semuanya akan kita bahas lebih detail di bawah ini:

Registrasi

Langkah pertama yang perlu kita lakukan adalah mendaftarkan service worker. Tanpa langkah ini, browser tidak akan tahu di mana service worker Anda berada dan dengan demikian, tidak mungkin memasang service worker di latar belakang.
Kami dapat mendaftarkan pekerja layanan menggunakan kode berikut:

 if('serviceWorker' di navigator) {
    navigator.serviceWorker.register('./pwa-examples/simicart/sw.js', {scope: './sw-scope/'})
.kemudian((reg) => {
   // pendaftaran berhasil
       console.log('Pendaftaran berhasil. Cakupannya adalah ' + reg.scope);
};

Kode di atas pertama-tama akan mulai mencari Service Worker API di browser dan, jika browser mendukung API tersebut, ia akan mendaftarkan service worker baru menggunakan metode serviceworkerContainer.register(), dan memberikan scope service worker. Misalnya, dalam kode di atas, scope kita adalah /pwa-examples/simicart/ yang berarti service worker kita hanya akan bekerja untuk halaman yang dimulai dengan /pwa-examples/simicart/ . Kami menyebut halaman ini ' halaman terkontrol '.

Instalasi

Sekarang setelah browser mengetahui di mana service worker kita — dan apa cakupannya — browser akan mencoba menginstal service worker. Anda dapat memilih untuk tidak melakukan apa pun selama fase ini, tetapi kami tetap ingin mencatat bahwa ini adalah fase di mana sebagian besar proses caching terjadi. Misalnya, ini biasanya bagaimana proses caching aset dilakukan:

 const cacheName = 'site-cache-v1'
const assetsToCache = [
    '/pwa-contoh/',
    '/pwa-examples/index.html',
    '/pwa-examples/css/styles.css',
    '/pwa-examples/js/app.js',
]

self.addEventListener('install', ( acara ) => {
    acara.tungguSampai(  
        caches.open(cacheName).lalu((cache) => {
              kembali cache.addAll(assetsToCache);
        })
      );
});

Seperti yang Anda lihat pada contoh di atas, kami menggunakan Cache API untuk men-cache aset kami yang nantinya akan kami gunakan untuk membuat PWA kami mampu offline. Proses caching ini terjadi selama acara install.

Pengaktifan

Setelah tahap instalasi, sekarang kita dapat mengaktifkan service worker. Namun, tahap aktivasi ini biasanya tidak terjadi secara otomatis, dan agar service worker dapat diaktifkan, Anda harus memastikan bahwa saat ini tidak ada service worker yang mengontrol halaman.

Atau, Anda juga dapat mengotomatiskan proses aktivasi service worker Anda dengan menggunakan metode skipWaiting() .

 const cacheName = 'site-cache-v1'
const assetsToCache = [
    '/pwa-contoh/',
    '/pwa-examples/index.html',
    '/pwa-examples/css/styles.css',
    '//pwa-examples/js/app.js',
]
self.addEventListener('install', ( acara ) => {
    self.skipMenunggu(); // lewati menunggu
    acara.tungguSampai(  
        caches.open(cacheName).lalu((cache) => {
              kembali cache.addAll(assetsToCache);
        })
      );
});

Web membutuhkan pekerja layanan

Pada titik ini, kita semua dapat sepakat bahwa service worker hampir merupakan langkah terakhir yang harus diambil oleh Web. Pengguna menjadi semakin menuntut fitur seperti aplikasi, dan menggabungkan fakta bahwa PWA menjadi masa depan pengiriman perangkat lunak, sepertinya Web memiliki banyak potensi di tahun-tahun mendatang.

Untuk pedagang Magento yang ingin mengubah etalase, kami menyediakan solusi PWA tanpa kepala yang hemat biaya dan lengkap untuk bisnis Anda.