PWA olarak Noel Baba İzleyici

Siteyi görüntüleyin

Özet

Santa Tracker 2016 tatil sezonu için hızla çevrimdışı bir Progresif Web Uygulaması'na yükseltildi. Mevcut sahne tasarımımız da yardımcı oldu.

Sonuçlar

• Noel Baba, ana ekrana (ATHS) ve çevrimdışı içerik ekleme özelliğini destekleyen bir Progresif Web Uygulamasıdır (PWA).
• Uygun oturumların% 10'u ATHS simgesinden başladı
• Kullanıcıların% 75'i, web bileşenlerinin iki temel parçası olan özel öğeleri ve gölge DOM'yi yerel olarak destekliyordu.
• Lighthouse puanı 81
• Çevrimdışı, Service Worker API aracılığıyla, yalnızca ziyaret edilen sahnelerin önbelleğe alınması ve yeni sürümlerde sessizce yükseltilmesi için geç yükleme ile bağlantı kurulur.

Arka plan

Noel Baba Radarı, Google'da yeni yıl geleneğidir. Her yıl, Aralık ayı boyunca yeni yıl sezonunu oyunlar ve eğitim deneyimleriyle kutlayabilirsiniz. Noel Baba da hak ettikleri bir mola verirken elfler, Noel Baba Tracker'ı hem web'de hem de web'de Android.

Web üzerinde, Santa Tracker birçok benzersiz "sahne" içeren büyük, etkileşimli bir sitedir ve Polimer: Modern tarayıcıların çoğunu destekler. Kullanıcının tarayıcısının "modern" olup olmadığının değerlendirilmesi özellik algılama ile belirlenir: Noel Baba'nın isteği Set ve Web Performance API ve diğerleri.

2016'da Santa Tracker'ın ardındaki motoru yeni sürüme geçirerek çoğu kullanıcı için çevrimdışı deneyimi sahneler. YouTube videoları ile desteklenen veya Noel Baba'nın canlı konumunu gösteren sahneler dahil değildir. tabii ki yalnızca Kuzey Kutbu ile doğrudan bağlantısıyla kullanılabilir. 📶☃️

Meydan okumalar

Noel Baba, telefon, tablet ve masaüstünde iyi çalışan, duyarlı bir tasarıma sahip. Site, stilize edilmiş görseller ve tatil temalı ses dahil olmak üzere harika multimedya içerikleri sunuyor. Ancak, Santa Tracker'ın normal bir derlemesi birkaç yüz megabayttır! Bunun birkaç nedeni vardır:

• Noel Baba 35'ten fazla dilde desteklendiği için birçok öğenin yinelenmesi gerekir.
• Farklı platformların farklı medya desteği vardır (ör. mp3 ve ogg).
• Multimedya dosyaları bazen farklı boyut ve çözünürlüklerde sağlanır.

Noel Baba'nın elfleri de Aralık boyunca yoğun bir şekilde çalışıyor ve sık sık yeni ve önemli güncellemeler yayınlıyor. ele alacağız. Bu nedenle, kullanıcının tarayıcısı tarafından önbelleğe alınmış öğelerin tekrar ziyaretlerde yenilenmesi gerekebilir.

Bu zorluklar:

• Farklı "sahneler" için büyük multimedya kaynakları
• Ay boyunca yayınlanan değişiklikler

...naif bir çevrimdışı stratejinin uygun olmamasına neden olur.

Noel Baba, Polymer ile inşa edildi

Biraz geri çekilip Noel Baba'nın genel tasarımı hakkında çevrimdışı PWA'ya yükseltti.

Noel Baba, ilk olarak Polymer 0.5'te yazılmış ve şimdi Polymer'e yükseltilen tek sayfalık bir uygulamadır. 1.7. Noel Baba, paylaşılan bir kod kümesinden (yönlendirici, paylaşılan gezinme öğeleri vb.) oluşur. Ayrıca birçok benzersiz "sahne" içerir.

Her sahneye farklı bir URL üzerinden erişilebilir: /village.html, /codelab.html ve /boatload.html—ayrı bir web bileşenidir. Bir kullanıcı bir sahneyi açtığında, ona ait gerekli tüm HTML ve öğeleri (resimler, ses, css, js), Bunlar, Santa Tracker deposunda /scenes/[[sceneName]] altında bulunur. Bu sırada kullanıcılar ilerlemeyi gösteren kullanıcı dostu bir ön yükleyici görür.

Böylece kullanıcının görmediği sahneler için gereksiz öğeler yüklemek zorunda kalmazız. (bu da çok fazla veri). Bu, aynı zamanda dahili bir "önbellek manifesti" tutmamız gerektiği anlamına da ve gerekli tüm öğelerin her sahneyi hazırlar. Önbellek manifesti, dosya adından MD5 karma karmasına eşleme depolayan bir JSON dosyasıdır geri bildirim gönderebileceksiniz.

Kullandığınız öğeleri yükleyin

Bu model, bant genişliğinden tasarruf sağlar. Bunun yerine, yalnızca kullanıcının ziyaret ettiği sahneler için gereken kaynakları sunar. aynı anda tüm siteyi önceden yüklemekten daha iyidir. Santa Tracker, Polymer'in özel öğeleri zamanında değil, çalışma zamanında yükseltme özelliğinden yararlanıyor. yükleme süresidir. Aşağıdaki snippet'i göz önünde bulundurun:

<lazy-pages id="lazypages" selected-item="&#123;{selectedScene}}" ... >
    <dorf-scene id="village" route="village" icon="1f384" permanent
        mode$="[[mode]]"
        path$="scenes/dorf/dorf-scene_[[language]].html"
        class="santa-scene" allow-page-scrolling></dorf-scene>

    <boatload-scene route="boatload" icon="26f5"
        path$="scenes/boatload/boatload-scene_[[language]].html"
        loading-bg-color="#8fd7f7"
        loading-src="scenes/boatload/img/loading.svg"
        logo="scenes/boatload/img/logo.svg"
        class="santa-scene"></boatload-scene>

Santa Tracker bir sahneyi yüklemek için şu adımları uygular: ör. boatload-scene:

1. Tüm sahne öğeleri (<boatload-scene> dahil) başlangıçta bilinmez ve hepsi Bazı ek özelliklerle HTMLUnknownElement.
2. Seçilen sahne değiştirildiğinde <lazy-pages> öğesi bilgilendirilir.
3. <lazy-pages> öğesi, sahne öğesini ve path özelliğini çözümleyerek HTML'yi yükler scenes/boatload/boatload-scene_en.html içe aktar. Bu, Polimer öğesini ve ona bağlı öğelerini içerir.
4. Uygun ön yükleyici gösterilir.
5. HTML içe aktarma işlemi yüklendikten ve yürütüldükten sonra, <boatload-scene> şeffaf bir şekilde bayram neşesiyle dolu gerçek bir polimer elementi. 🎄🎉

Bu yaklaşımın kendine özgü zorlukları var. Örneğin, yinelenen web bileşenleri eklemek istemeyiz. İki sahnede ortak bir öğe kullanılıyorsa (ör. paper-button, geliştirme sürecinin bir parçası olarak Noel Baba'nın paylaştığı koda ekleyeceksiniz.

Çevrimdışı tasarım

Santa Tracker zaten Polymer ve lazy-pages sayesinde düzenli bir şekilde sahnelere ayrılmış; artı her sahnenin kendi dizini vardır. Santa Tracker'ın Service Worker'ı, çevrimdışına izin veren ve çevrimdışına izin veren temel parça, Paylaşılan kod yerine "sahne" fark etmek için kullanıcının tarayıcısına düşünebilirsiniz.

Service Worker'ın arkasındaki teori nedir? Desteklenen tarayıcıdaki bir kullanıcı sitenizi yüklediğinde ön uç HTML'si, hizmet çalışanının yüklenmesini isteyebilir. Santa Tracker için hizmet çalışanı /sw.js adresinde çalışır. Bu işlem, Noel Baba'nın paylaşılan kodunun tamamını önbelleğe alacak bir install etkinliği tetikler. Dolayısıyla hiçbir şeyin önbelleğe alınması gerekmez. anında getirilir.

Hizmet çalışanı yüklendikten sonra tüm HTTP isteklerine müdahale edebilir. Santa Tracker için basitleştirilmiş karar akışı şu şekildedir:

1. İstek zaten önbelleğe alınmış mı?
   • Çok güzel! Önbelleğe alınan yanıtı döndürün.
2. İstek, "Sahneler/Tekne Yükü/Kayık Yükleme-scene_tr.html" gibi bir sahne diziniyle mi eşleşiyor?
   • Bir ağ isteği gerçekleştirin ve sonucu kullanıcıya döndürmeden önce önbellekte depolayın.
3. Aksi takdirde normal bir ağ isteği gerçekleştirin.

Akışımız ve install etkinliğimiz, Santa Tracker'ın kullanıcı internete bağlı olmadığında bile yüklenmesine olanak tanır. Ancak yalnızca kullanıcının daha önce yüklediği sahneler kullanılabilir. Bu, oyunu tekrar oynamak ve rekorunuzu kırmak için mükemmeldir.

Dikkatli gözlemciler, önbelleğe alma stratejimizin içerikte değişikliklere izin vermediğini fark edebilir. Bir dosya, kullanıcının tarayıcısında önbelleğe alındıktan sonra hiçbir zaman değiştirilmez. Buna daha sonra değineceğiz.

Canlı olarak yayınlayacağız

Daha önce de belirttiğimiz gibi, Noel Baba'nın elfleri Aralık ayı boyunca sıkı çalışıyorlar ve sık sık kendilerini ay boyunca yeni güncellemeler alırsınız. Santa Tracker'ın sürümü oluşturulduğunda, bu öğeye benzersiz bir etiket verilir. Örneğin, v20161204112055, zaman damgası (4 Aralık 2016, 11:20:55).

Bu etiketli sürüm için her dosyanın bir MD5 karmasını oluşturur ve bunu 'önbelleğimizde' manifest'ini gönderin. Modern bir katı hal diskinde bu, derleme işlemine yalnızca birkaç saniye ekler.

Her sürüm, Google'ın statik önbelleğe alma sunucusunda benzersiz bir yola dağıtılır. Yani, eski sürümler hiçbir zaman kaldırılmaz. Bu durum, yeni bir sürümden sonra tüm öğelerin farklı bir URL'ye sahip olacağı anlamına gelir. ve tarayıcı ya da Service Worker tarafından önbelleğe alınan her şey, gerekli düzeltmeyi yapmadıkça iş yükünüz artar.

Ayrıca, "prod" adını verdiğimiz yeni bir sürümü de dağıtıyoruz. kaynaklar: Noel Baba'nın dizini HTML ve hizmeti https://santatracker.google.com/ adresinde yaşayan bir çalışan. Bu işlem, eski sürümün üzerine yazılır.

Santa Tracker her yüklendiğinde tarayıcı, güncellenmiş bir hizmet çalışanı olup olmadığını kontrol eder ve kullanılabilir. Örneğimizde her sürüm, bayt olarak farklı bir kod oluşturur. Tarayıcı bunu bir yükseltme olarak görür ve yeni bir install etkinliği gerçekleştirir.

Bu noktada, kullanıcının tarayıcıları yeni "önbellek manifesti"ne bakar. Bu değer, kullanıcının mevcut önbelleğiyle karşılaştırılır ve öğelerin farklı bir MD5 karması varsa bunları önbellekten silip tarayıcıdan yeniden getirmesini isteyin. Ancak çoğu durumda, önbelleğe alınan içerik büyük ölçüde aynıdır veya çok küçük farklılıklara sahiptir.

Santa Tracker'da, hizmet çalışanının yükseltilmesi, kullanıcının tarayıcısının hemen yeniden yüklenmesine neden olur.

Çevrimdışı göz atma deneyimi

Elbette çevrimdışı deneyimi desteklemek ve daha birçok farklı özelliğin kullanımına sunmak için kullanıcı arayüzünde bir web sitesinin çevrimdışı olarak çalışmasını beklemeyen kullanıcılar için bunların anlaşılması daha kolaydır.

Küçük bir banner, çevrimdışı web'de gezinirken bunu belirtir. Önbelleğe alınmamış tüm sahneler "dondu" durumunda ve tıklanamaz. Böylece kullanıcılar mevcut olmayan içeriklere erişemez.

Santa Tracker, Noel Baba'nın API'sine düzenli olarak istek gönderir. Bu istekler başarısız olursa veya zaman aşımına uğrarsa kullanıcının çevrimdışı olduğunu varsayarız. Tarayıcının yerleşik navigator.onLine uygulaması yerine bu API'yi kullanıyoruz. özelliği: Bu yalnızca kullanıcının çevrimiçi olup olmadığını bize bildirin. (Buna Lie-Fi da denir).

Uluslararası bağlantı

Kullanıcılarımızın çoğu İngilizce (ardından Japonca, Portekizce, İspanyolca ve Fransızca) için, Noel Baba 35'ten fazla farklı dilde geliştirilip yayınlandı.

Bir kullanıcı Santa Tracker'ı yüklediğinde, tarayıcının dili ve diğer işaretleri görürsünüz. Kullanıcıların çoğunluğu hiçbir zaman bu dilin üzerine yazmaz. Bununla birlikte, kullanıcı seçicimiz aracılığıyla yeni bir dil seçerse bunu bir yeni sürüme geçiş işlemi olarak değerlendiririz kullanılabilir—yukarıdaki örnekte olduğu gibi, Santa Tracker'ın yeni sürümü kullanıma sunulduğunda.

Bir başka deyişle, hizmet çalışanının amaçları doğrultusunda Santa Tracker'ın mevcut sürümü aslında (build,language) anlamına gelir.

Ana ekrana ekle

Noel Baba çevrimdışı olarak çalıştığı ve hizmet çalışanı sağladığı için uygun kullanıcılardan uygulamayı yüklemeleri istenir ana ekrana taşıyabiliyor. 2016'da uygun yüklemelerin yaklaşık% 10'u ana ekran simgesinden geldi.

Sonuç

Santa Tracker'ı hızlı bir şekilde çevrimdışı bir PWA'ya dönüştürerek güvenilir, etkileşimli bir mevcut sahne tasarımımız sayesinde bu deneyimi artırdık. Mevcut Polymer ve Web bileşenleri Ayrıca, etkili yükseltmeler yapmak için derleme sistemimizden yararlanarak yalnızca değiştirilmiş öğeleri geçersiz kılar.

Noel Baba genellikle özel olarak tasarlanmış bir çözüm olsa da ilkelerinin birçoğu Polymer Projenin Uygulama Araç Kutusu. Sıfırdan yeni bir PWA oluşturuyorsanız veya belirli bir özellik arıyorsanız yaklaşımdan bağımsız olarak, Çalışma Kutusu Kitaplığı.