Aptallar için PWA Hizmet Çalışanı

İşin aslı, servis çalışanının önümüzdeki yıllarda oynayacağı önemli bir rol var ve bu yeni teknolojiye ne kadar hızlı alışırsanız, Web'in bu yeni geleceğine kendinizi o kadar iyi ayarlayabilirsiniz.

Bu nedenle, bu yeni teknolojiyi daha iyi tanımanıza yardımcı olmak için, birlikte hizmet çalışanları hakkında - ne olduğu, Web'e ne getirdiği, kendimizi bu yeni teknolojiye nasıl daha iyi hazırlayabileceğimiz hakkında bir tartışma yapacağız. ağ.

Hizmet çalışanı nedir?

Tanımlar

Evrensel olarak PWA'ları oluşturan veya bozan teknoloji olarak kabul edilen hizmet çalışanı, tarayıcıdan bağımsız olarak çalışan ve ağ müdahalesinden sorumlu bir API'dir ve bu nedenle, Web'de daha önce imkansız olan birçok şeyi yapabilir. Servis çalışanları tarafından kontrol edilen web siteleri (tipik olarak PWA'lar), kullanımdaki cihazla daha derin bir entegrasyona sahip olabilir ve sonuç olarak, Web'e daha fazla donanım yeteneği ve uygulama benzeri özellikler (örneğin, push bildirimleri, arka plan senkronizasyonu ve daha fazlası) getirebilir.

Nasıl çalışır

Kısaca. servis çalışanı, esasen, tarayıcı ile sunucu arasında giden ağ isteklerini engelleyen, değiştiren ve işleyen olay tabanlı bir katmandır:

Hizmet çalışanı olay tabanlı bir çalışan olduğundan, yalnızca olaylara yanıt verir ve iletişim kurar ve bir işlemin ne zaman tamamlandığını söylemek için sözler kullanır. Ancak, tüm olay alımı (örn. fetch ve push ) yalnızca servis çalışanı etkin olduğunda mümkündür; bu, tarayıcının servis çalışanını ne zaman tanıdığını ve kaydettiğini gösterir (ve ayrıca servis çalışanının kendisi yüklemeyi başarıyla bitirdiğinde) . Basitleştirilmiş bir şekilde, bu bir hizmet çalışanının tipik yaşam döngüsüdür:

Ayrıca, Service Worker'da mevcut tüm bu olayları not edin:

Tüm işlevsel olaylar ( fetch , sync ve push ) sizin için açıklayıcı olmalıdır, çünkü bunlar PWA'nın hemen hemen tüm aşamalı özellikleri özelliklerini (yani çevrimdışı yetenekler, arka plan senkronizasyonu, anında iletme bildirimleri) oluşturan olaylardır.

 Önerilen okuma: PWA Nedir? Progresif Web Uygulamaları Hakkında Bilmeniz Gereken Her Şey

Hizmet çalışanları için kısıtlamalar

Bu, tarayıcıdan bağımsız çalışan bir komut dosyası olduğundan, bazı kısıtlamaları vardır:

• HTTPS protokolü : hizmet çalışanları HTTPS tabanlı web sitelerinde çalıştırılmalıdır

• localStorage , DOM ve pencereye erişim yok .
• Sınırlı scope : hizmet çalışanları yalnızca service-worker.js bulunduğu geçerli dizinin (ve alt dizinlerinin) scope çalışabilir.
• Eşzamansız : hizmet çalışanları doğaları gereği eşzamansızdır, bu nedenle Promise tabanlı API'lere güvenirler.

Hizmet çalışanları PWA için ne anlama geliyor?

Daha önce belirtildiği gibi, hizmet çalışanı PWA'nın bel kemiğidir ve PWA'nın devrim niteliğindeki özelliklerinin çoğu onsuz mümkün değildir. Esasen, hizmet çalışanının yaptığı, aşağıdakiler için araçlar sağlamaktır:

Daha iyi performans

Hizmet çalışanları önbelleğe alma işlemine büyük ölçüde yardımcı olduğundan, tekrarlanan ziyaretlerdeki performans PWA'da önemli ölçüde daha iyidir. Web sitelerinin çoğunda kullanılan tipik web önbelleği (HTTP önbelleği) ile karşılaştırıldığında, PWA, uygun olmayan ağ koşullarında bile içerik sunma konusunda üstündür:

Tüm bunlar, hizmet çalışanlarının geliştiricilere önbelleğe almanın tam olarak ne ve nasıl yapıldığı konusunda tam bir özgürlük vermesi sayesindedir. Hizmet çalışanlarının önbelleğe alma performansının ne kadar iyi olduğunu görmek için Google'ın son çalışmasını öneriyoruz: Hizmet Çalışanlarının Gerçek Dünya Performans Etkisini Ölçme. Çalışmanın, hizmet çalışanı performansını belirlemek için bir metrik olarak ilk boyama zamanına odaklanan net bir metodolojisi vardır.

Ortalama olarak, sayfalar bir servis çalışanı sayfayı kontrol ederken, hem yeni hem de geri gelen ziyaretçiler için bir servis çalışanı olmadan olduğundan biraz daha hızlı yüklendi.

Philip Walton, Servis Çalışanlarının Gerçek Dünyadaki Performans Etkisini Ölçme

Çevrimdışı Erişim

Servis çalışanları kayıt olduklarında, PWA siteniz için gerekli içeriği önbelleğe alır ve daha sonra sunar. Bu, kullanıcılar siteyle etkileşime girebildiği ve önbelleğe alınmış tüm içeriği görebildiği için, PWA destekli web sitelerini etkin bir şekilde çevrimdışı yetenekli hale getirir.

Bu, çevrimdışı erişimin Web'de daha önce görülmeyen bir özellik olduğu anlamına gelmez — kullanıcılara web'de çevrimdışı bir deneyim sunmak mümkündü , sadece deneyim optimal değildi (bkz. işçiler AppCache'in dezavantajlarını ele almak (veya daha çok onlardan kaçınmak) için icat edildi.

 Önerilen okuma: PWA'nızın çevrimdışı çalışmasını nasıl sağlarsınız

Yerel uygulama özellikleri

Servis çalışanları, çevrimdışı erişim ve iyileştirilmiş performans sunmanın yanı sıra, anında iletme bildirimleri ve arka plan senkronizasyonu (ve yakın gelecekte, coğrafi sınırlama ve periyodik senkronizasyon) gibi daha uygulamaya benzer özellikler için temel görevi görür. Örneğin, PWA'nın anında iletme bildirimleri özelliği, iki API kullanılarak birleştirilir: Bildirimler API'si ve Anında İlet API'si, her ikisi de Hizmet Çalışanı API'sinin üzerine inşa edilmiştir.

Bir hizmet çalışanının yaşam döngüsü

Bir hizmetin ömrü üç bölümden oluşur: aşağıda ayrıntılarına gireceğimiz kayıt, kurulum ve etkinleştirme:

Kayıt

Yapmamız gereken ilk adım, servis çalışanını kaydettirmektir. Bu adım olmadan, tarayıcı servis çalışanınızın nerede olduğunu bilemez ve bu nedenle servis çalışanını arka planda kurmayı imkansız hale getirir.
Servis çalışanını aşağıdaki kodu kullanarak kaydedebiliriz:

 if(navigatörde 'serviceWorker') {
    navigator.serviceWorker.register('./pwa-examples/simicart/sw.js', {scope: './sw-scope/'})
.then((reg) => {
   // kayıt çalıştı
       konsol.log('Kayıt başarılı. Kapsam ' + reg.scope);
};

Yukarıdaki kod ilk olarak tarayıcıda Service Worker API'sini aramaya başlar ve tarayıcı söz konusu API'yi destekliyorsa, serviceworkerContainer.register() yöntemini kullanarak yeni bir Service Worker kaydeder ve hizmet çalışanının scope verir. Örneğin, yukarıdaki kodda scope /pwa-examples/simicart/ şeklindedir; bu, hizmet çalışanımızın yalnızca /pwa-examples/simicart/ ile başlayan sayfalar için çalışacağı anlamına gelir. Bu sayfalara ' kontrollü sayfalar ' diyoruz.

Kurulum

Tarayıcı, servis çalışanımızın nerede olduğunu ve kapsamının ne olduğunu bildiğine göre, servis çalışanını yüklemeye çalışacaktır. Bu aşamada hiçbir şey yapmamayı seçebilirsiniz, ancak yine de bunun önbelleğe alma işleminin çoğunun gerçekleştiği aşama olduğunu belirtmek isteriz. Örneğin, varlığı önbelleğe alma işlemi genellikle şu şekilde yapılır:

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

self.addEventListener('install', ( event ) => {
    event.waitUntil(  
        caches.open(cacheName).then((cache) => {
              geri dön cache.addAll(assetsToCache);
        })
      );
});

Yukarıdaki örnekte görebileceğiniz gibi, varlıklarımızı önbelleğe almak için daha sonra PWA'mızı çevrimdışı özellikli hale getirmek için kullanacağımız Önbellek API'sini kullanıyoruz. Bu önbelleğe alma işlemi, yükleme olayı sırasında gerçekleşir.

aktivasyon

Kurulum aşamasından sonra artık Service Worker'ı aktif hale getirebiliriz. Ancak bu etkinleştirme aşaması normalde otomatik olarak gerçekleşmez ve hizmet çalışanının etkinleşmesi için sayfaları kontrol eden herhangi bir hizmet görevlisinin bulunmadığından emin olmalısınız.

Alternatif olarak, servis çalışanınızın etkinleştirme sürecini skipWaiting() yöntemini kullanarak da otomatikleştirebilirsiniz.

 const cacheName = 'site-cache-v1'
const entityToCache = [
    '/pwa-örnekleri/',
    '/pwa-examples/index.html',
    '/pwa-examples/css/styles.css',
    '//pwa-examples/js/app.js',
]
self.addEventListener('install', ( event ) => {
    self.skipBekliyor(); // beklemeyi atla
    event.waitUntil(  
        caches.open(cacheName).then((cache) => {
              geri dön cache.addAll(assetsToCache);
        })
      );
});

Web'in servis çalışanına ihtiyacı var

Bu noktada, hizmet çalışanının Web'in atması gereken neredeyse nihai bir adım olduğu konusunda hemfikiriz. Kullanıcılar giderek daha fazla uygulama benzeri özellikler talep ediyor ve PWA'nın yazılım dağıtımının geleceği haline geldiği gerçeğini bir araya getirdiğinde, Web'in önümüzdeki yıllarda çok fazla potansiyeli var gibi görünüyor.

Mağaza vitrinini dönüştürmek isteyen Magento tüccarları için işletmeniz için uygun maliyetli ve eksiksiz bir başsız PWA çözümü sunuyoruz.