Bulletin ekibinin PWA geliştirirken Service Worker'lar hakkında öğrendikleri.
Bu, Google Bulletin ekibinin çıkardığı derslerle ilgili blog yayını dizisinin ilkidir. oluştururken de aynı anda kullanabilirsiniz. Bu yayınlarda karşılaştığımız zorluklardan bazılarını paylaşacağız, ve tehlikelerden kaçınmaya yönelik genel tavsiyeleri inceledik. Hayır PWA'lara (Progresif Web Uygulaması) eksiksiz bir genel bakış sunar. Amacımız, ekibimizin tecrübelerinden öğrendiklerimizi paylaşmaktır.
Bu ilk gönderimde, önce biraz arka plan bilgisinden bahsedeceğiz ve daha sonra bazı temel bilgileri ele alacağız.
Arka plan
Bulletin, 2017'nin ortalarından 2019'un ortalarına kadar aktif geliştirme aşamasındaydı.
Neden PWA oluşturmayı tercih ettik?
Geliştirme sürecine geçmeden önce, PWA oluşturmanın neden cazip bir seçenek olduğunu inceleyelim. şu seçeneği belirleyin:
- Hızlı iterasyon yapabilme. Bu, özellikle Bulletin'ın pilot uygulama olarak birden fazla pazarda çalışır.
- Tek kod tabanı. Kullanıcılarımız Android ve iOS arasında aşağı yukarı eşit bir şekilde dağılmıştı. PWA'nın anlamı iki platformda da çalışacak tek bir web uygulaması geliştirebildik. Bu da hızı artırdı. daha iyi anlamanızı sağlar.
- Kullanıcı davranışından bağımsız olarak hızlı bir şekilde güncellenir. PWA'lar vahşi ortamda güncel olmayan müşteri sayısını azaltır. Arka ucu kırmayı başardık ve müşterileri için çok kısa bir taşıma süresiyle değişiklikler yaşar.
- Birinci ve üçüncü taraf uygulamalarıyla kolayca entegre edilir. Bu tür entegrasyonlar bir zorunluluktu görebilirsiniz. PWA ile genelde yalnızca URL açmak gerekiyordu.
- Uygulama yükleme zorluğu ortadan kaldırıldı.
Çerçevemiz
Bulletin için Polymer'i kullandık ancak modern, iyi desteklenen nasıl çalışacağını öğreteceğim.
Service Worker'lar hakkında öğrendiklerimiz
Hizmet olmadan PWA'nız olamaz çalışan ekleyin. Hizmet çalışanları gelişmiş önbelleğe alma stratejileri, çevrimdışı yetenekler, arka plan senkronizasyonu, gibi özellikler katabilir. Ancak Service Worker'lar karmaşıklık yaratsa da elde ettikleri avantajların kat kat fazla olduğunu fark ettik. gerekir.
Mümkünse oluşturun
Service Worker komut dosyasını elle yazmaktan kaçının. Service Worker'ları elle yazmak için manuel işlem gerekir Önbelleğe alınan kaynakları yönetme ve çoğu Service Worker kütüphanesinde ortak kullanılan mantığı yeniden yazma; Workbox olarak ayarlanır.
Bununla birlikte, şirket içi teknoloji yığınımız nedeniyle bir kitaplık oluşturup metin hizmet çalışanıdır. Aşağıdaki derslerimiz de bazen bunu yansıtabilir. Şunun için tehlikeler: oluşturulmamış hizmet çalışanlarını okumanızı öneririz.
Tüm kitaplıklar hizmet çalışanıyla uyumlu değildir
Bazı JS kitaplıkları, bir hizmet çalışanı tarafından çalıştırıldığında beklendiği gibi çalışmayan varsayımlarda bulunur. Örneğin,
window veya document olduğu varsayıldığında ya da hizmet için uygun olmayan bir API kullanıldığında
çalışanlar (XMLHttpRequest, yerel depolama alanı vs.). Uygulamanız için gereken kritik kitaplıkları
uygulamalarınızın hizmet çalışanlarıyla uyumlu olduğundan emin olun. Bu PWA (Progresif Web Uygulaması) için
gapi.js içeriyordu, ancak
Service Worker'ları desteklemediği için işlem yapılamıyor. Kütüphane yazarları ayrıca,
Mümkün olduğunda Service Worker kullanımını desteklemek için JavaScript bağlamıyla ilgili gereksiz varsayımlar
Örneğin, Service Worker ile uyumlu olmayan API'lerden kaçınarak tüm dünyada
durum.
Başlatma sırasında IndexedDB'ye erişmekten kaçınma
Şu durumlarda IndexedDB'yi okuma Service Worker komut dosyanızı başlatın, aksi takdirde istenmeyen şu durumla karşılaşabilirsiniz:
- Kullanıcının IndexedDB (IDB) sürümü N olan web uygulaması var
- Yeni web uygulaması IDB sürümü N+1 ile aktarılır
- Kullanıcı, yeni hizmet çalışanının indirilmesini tetikleyen PWA'yı ziyaret eder
- Yeni hizmet çalışanı,
installetkinlik işleyicisini kaydetmeden önce IDB'den okuma yaparak bir N'den N+1'e giden IDB yükseltme döngüsü - Kullanıcının sürümü N olan eski bir istemcisi olduğundan Service Worker yükseltme işlemi etkin olarak kilitleniyor veritabanının eski sürümüne hâlâ açık bağlantılar
- Hizmet çalışanı kilitleniyor ve hiçbir zaman yüklenmiyor
Bizim örneğimizde önbellek, Service Worker yüklemesi sırasında geçersiz kılınmıştır. Bu nedenle, Service Worker uygulama yüklemediğinden, kullanıcılar güncellenmiş uygulamayı hiçbir zaman almamıştır.
Dayanıklı hale getirin
Service Worker komut dosyaları arka planda çalışsa da komut dosyaları herhangi bir anda sonlandırılabilir. G/Ç işlemlerinin (ağ, IDB vb.) ortasında. Uzun süren her süreç dilediğiniz zaman devam ettirilebilir.
Sunucuya büyük dosyalar yükleyen ve IDB’ye kaydedilen bir senkronizasyon işlemi söz konusu olduğunda, çözümümüz dahili yükleme kitaplığımızın devam ettirilebilir içeriklerinden yararlanmaktı. devam ettirilebilir yükleme URL'sini yüklemeden önce IDB'ye kaydetmeli ve bu URL'yi sonraki ilkinde tamamlanmamışsa yüklemeyi de seçebilirsiniz. Ayrıca uzun süren herhangi bir G/Ç işleminden önce durumu, her bir kayıt için sürecin hangi aşamasında olduğumuzu belirtmek üzere IDB'ye kaydedildi.
Küresel duruma bağımlı olmama
Service Worker'lar farklı bir bağlamda yer aldığı için var olmasını beklediğiniz pek çok simge
devam eder. Kodumuzun büyük bir kısmı hem window bağlamında hem de Service Worker bağlamında (ör.
günlük kaydı, bayraklar, senkronizasyon vb.). Kodun, kullandığı hizmetler konusunda savunma amaçlı olması gerekir. Örneğin,
veya çerezlere izin vermez. Tekliflerinizi otomatikleştirmek ve optimize etmek için
globalThis
global nesneye tüm bağlamlarda çalışacak şekilde atıfta bulunmalıdır. Depolanan verileri de kullan
komut dosyasının ne zaman sonlandırılacağı ve ne zaman biteceği ile ilgili bir garanti olmadığı için,
devleti tahliye etti.
Yerel gelişim
Service Worker'ların önemli bir bileşeni, kaynakları yerel olarak önbelleğe almaktır. Ancak, geliştirme sırasında bu
Özellikle güncellemeler geç yapıldığında, istediğinizin tam tersi olur. Hâlâ istiyorsanız
Böylece sorunlarda hata ayıklamak veya diğer API'lerle çalışabilirsiniz.
arka plan senkronizasyonu veya bildirimler. Chrome'da bunu Chrome Geliştirici Araçları aracılığıyla yapabilirsiniz:
Ağ için atla onay kutusunu (Uygulama paneli > Hizmet çalışanları bölmesi) etkinleştirin
Ağ panelinde Önbelleği devre dışı bırak onay kutusunu etkinleştirmeyi ve
önbelleği devre dışı bırakın. Daha fazla tarayıcıyı kapsamak için farklı bir çözüm için
geliştiricide varsayılan olarak etkin olan hizmet çalışanımızda önbelleğe almayı devre dışı bırakan bir işaret dahil
inşa eder. Bu, geliştiricilerin her zaman en son değişiklikleri önbelleğe alma sorunu yaşamadan almalarını sağlar. İnsanların
Cache-Control: no-cache üstbilgisinin de eklenmesi, tarayıcının şunları yapmasını önlemek için önemlidir:
herhangi bir öğeyi önbelleğe almayı unutmayın.
Deniz Feneri
Lighthouse, bir dizi hata ayıklama birçok araç daha var. Bir siteyi tarar ve PWA'lar, performans, ve diğer en iyi uygulamaları ele alacağız. Lighthouse'u sürekli entegrasyonu sırasında bir bildirim alırsınız. kriterlerini karşılaması gerekir. Bu aslında daha önce başımıza geldi. Service Worker kurulum yapmıyordu. bunu fark etmedik. CI'mızın bir parçası olarak Lighthouse'un olması önlendi.
Sürekli teslimi benimseyin
Service Worker'lar otomatik güncelleme yapabildiği için kullanıcılar yükseltmeleri sınırlandıramaz. Bu vahşi ortamda güncel olmayan müşteri sayısını önemli ölçüde azaltıyor. Kullanıcı uygulamamızı açtığında hizmet çalışanı yeni istemciyi geç indirirken eski istemciye hizmet verir. Bir Yeni bir istemci indirildiğinde, yeni özelliklere erişmek için kullanıcıdan sayfayı yenilemesi istenir. Hatta kullanıcı bu isteği yoksaydı. Sayfayı yenilediğinde yeni sürümü yüklüdür. Sonuç olarak kullanıcının şekilde değiştirebilirsiniz.
Zarar veren arka uç değişikliklerini çok kısa bir sürede kullanıma sunabildik ve kullanabilirsiniz. Genelde kullanıcıların yeni müşterilere güncelleme yapmadan önce zarar veren değişikliklerdir. Uygulama eskiyken de hizmet vereceği için eski istemciler tarafından kullanılması mümkündü. uzun süre açmamış olması durumunda aktif olarak değerlendirilecektir. iOS'te Service Worker'lar birkaç hafta sonra çıkarıldı bu nedenle böyle bir durum yoktur. Android için bu sorun, veya manuel olarak süresi dolan içeriklerin birkaç hafta sonra Pratikte, hiç karşılaşmadığımız sorunlarından kurtulmaya çalışırsınız. Belirli bir ekibin burada ne kadar katı olmak istediği kendi özel kullanımlarına bağlıdır PWA'lar, iOS/Android uygulamalarından önemli ölçüde daha fazla esneklik sağlar.
Service Worker'da çerez değerlerini alma
Bazen bir hizmet çalışanı bağlamında çerez değerlerine erişmek gerekir. Bizim örneğimizde
jeton oluşturmak üzere çerez değerlerine erişmek ve birinci taraf API isteklerinin kimliğini doğrulamak üzere gereklidir.
hizmet çalışanı için document.cookies gibi eşzamanlı API'ler kullanılamıyor. Her zaman ayrıntılı bir
hizmet çalışanından etkin (pencereli) müşterilere çerez değerlerini istemek için mesaj gönderse de
Service Worker, pencereli istemciler olmadan arka planda çalışabilir.
kullanılabilir (ör. arka plan senkronizasyonu sırasında). Bu sorunu çözmek için
ön uç sunucusu ile çalışmayı kolaylaştırır. Hizmet çalışanı,
ağ isteğini gönderir ve çerez değerlerini almak için yanıtı okuyun.
Oyunun yayınlanmasıyla birlikte Cookie Store API, Bu geçici çözüm, Güvenli Arama'nın düzgün çalışmasını sağladığından tarayıcı çerezlerine eşzamansız erişim sağlar ve doğrudan hizmet çalışanı tarafından kullanılabilir.
Oluşturulmayan Service Worker'ların sorunları
Önbelleğe alınan statik dosya değiştiğinde hizmet çalışanı komut dosyasının değişeceğinden emin olun
Yaygın bir PWA kalıbı, bir Service Worker'ın çalışma sırasında tüm statik uygulama dosyalarını yüklemesidir.
install aşamasıyla birlikte, istemciler için doğrudan Cache Storage API önbelleğine
sonraki ziyaretler . Hizmet çalışanları yalnızca tarayıcı, hizmetin
çalışan komut dosyası bir şekilde değiştiğinden, Service Worker komut dosyası dosyasının kendisini
önbelleğe alınmış bir dosya değiştirildiğinde
şekilde değişmesini sağlar. Bunu,
hizmet çalışanı komut dosyamızda statik kaynak dosya kümesi oluşturduk. Böylece her sürüm,
Service Worker JavaScript dosyası. Şu gibi Service Worker kitaplıkları:
Workbox, bu işlemi sizin için otomatikleştirir.
Birim testi
Service Worker API'leri, global nesneye etkinlik işleyiciler ekleyerek çalışır. Örneğin:
self.addEventListener('fetch', (evt) => evt.respondWith(fetch('/foo')));
Bu, test etmek zor olabilir çünkü etkinlik tetikleyicisiyle, etkinlik nesnesiyle ve tüm ayrıntıları
respondWith() geri çağırmasını yapıp sözü bekleyin ve ardından sonuçtan emin olun.
yapılandırmanın daha kolay bir yolu, tüm uygulamaları başka bir dosyaya aktarmaktır. Böylece,
test edilir.
import fetchHandler from './fetch_handler.js';
self.addEventListener('fetch', (evt) => evt.respondWith(fetchHandler(evt)));
Service Worker komut dosyası birim testinde yaşanan zorluklar nedeniyle temel hizmet çalışanımızı komut dosyasını mümkün olduğunca sade hale getirerek uygulamanın büyük bir kısmını diğer modüllere ayırmanızı sağlar. Başlangıç bu dosyalar yalnızca standart JS modüllerini içeriyordu. Bu dosyalar, standart test kitaplıklar.
2. ve 3. bölümler için bizi takip edin
Bu serinin 2. ve 3. bölümlerinde medya yönetimi ve iOS'a özgü sorunlardan bahsedeceğiz. Şu durumda: Google'da PWA oluşturma hakkında daha fazla bilgi edinmek isterseniz yazar profillerimizi ziyaret ederek bize nasıl ulaşabilirsiniz: