PWA olarak Noel Baba İzleyici

Siteyi görüntüleyin

Özet

Santa Tracker, 2016 yılbaşı sezonu için çevrimdışı Progresif Web Uygulaması (Progresif Web Uygulaması) sürümüne hızla geçirildi. Bu güncelleme kısmen de mevcut sahne tasarımımız sayesinde oldu.

Sonuçlar

  • Noel Baba, ana ekrana (ATHS) ve çevrimdışına eklemeyi destekleyen bir Progresif Web Uygulamasıdır (PWA)
  • Uygun oturumların% 10'u ATHS simgesi aracılığıyla başlatıldı
  • Kullanıcıların% 75'i, web bileşenlerinin iki temel parçası olan özel öğeleri ve gölge DOM'u yerel olarak destekliyordu.
  • Lighthouse 81 puanı
  • Service Worker API aracılığıyla çevrimdışı kullanım, yalnızca ziyaret edilen sahneleri önbelleğe almak ve yeni sürümlerde sessizce yeni sürüme geçirmek için geç yükleme özelliğine sahiptir.

Arka plan

Noel Baba Radarı, Google'da bir yıl sonu geleneğidir. Her yıl Aralık ayı boyunca yeni yılı oyunlar ve eğitici deneyimlerle kutlayabilirsiniz. Noel Baba güzel bir mola verirken, cüceler Santa Tracker'ı hem web'de hem de Android için açık kaynak olarak yayınlamak üzere çalışır.

Santa Tracker, web'deki çoğu modern tarayıcıyı destekleyen ve Polymer kullanılarak yazılmış birçok benzersiz "sahne" içeren büyük ve etkileşimli bir sitedir. Bir kullanıcının tarayıcısının "modern" olup olmadığının değerlendirilmesi, özellik algılama aracılığıyla belirlenir: Noel Baba, diğerlerinin yanı sıra Set ve Web Performance API'yi gerektirir.

2016'da, çoğu sahne için çevrimdışı deneyimi desteklemek üzere Santa Tracker'ın arkasındaki motoru yükselttik. YouTube videoları tarafından desteklenen veya Noel Baba'nın canlı konumuyla ilgili sahneler bunlara dahil değildir. Elbette, bu sahneler yalnızca Kuzey Kutbu ile doğrudan bağlantılı olduğunda görüntülenebilir! 📶☃️

Android cihazda Noel Baba Takip Cihazı
Android cihazda Noel Baba Takip Aracı

Meydan okumalar

Noel Baba; telefonlarda, tabletlerde ve masaüstü bilgisayarlarda sorunsuz çalışan bir duyarlı tasarım kullanır. Stilize edilmiş görseller ve tatil temalı sesler dahil olmak üzere etkileyici multimedya unsurların kullanılması site, ilgi odağıdır. Ancak, Santa Tracker'ın normal yapısı birkaç yüz megabayttır! Bunun birkaç nedeni vardır:

  • Noel Baba 35'ten fazla dilde desteklenir, bu nedenle 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 gayretle çalışır ve genellikle ay boyunca yeni, kritik güncellemeleri yayınlar. Bu, yinelenen ziyaretlerde kullanıcının tarayıcısı tarafından önbelleğe alınmış öğelerin yenilenmesi gerekebileceği anlamına gelir.

Bu zorluklar şunlardır:

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

...naif bir çevrimdışı stratejinin kullanılamamasına yol açabilir.

Polymer'den üretilmiş Noel Baba

Bir adım geri çekilip Noel Baba'nın çevrimdışı PWA'ya nasıl yükseltildiğini anlamadan önce genel tasarımından bahsetmek iyi olur.

Noel Baba, tek sayfalık bir uygulamadır. İlk olarak Polymer 0.5'te yazılmıştır ve şimdi Polymer 1.7'ye yükseltilmiştir. Noel Baba ortak bir kod kümesinden (yönlendirici, paylaşılan gezinme öğeleri vb.) oluşur. Ayrıca birçok benzersiz "sahne" vardır.

Ön yükleyici

Her sahneye farklı bir URL (/village.html, /codelab.html ve /boatload.html) üzerinden erişilebilir ve kendi web bileşenleridir. Bir kullanıcı bir sahneyi açtığında, Santa Tracker deposunda /scenes/[[sceneName]] altında bulunan gerekli tüm HTML ve öğelerini (resimler, ses, css, js) önceden yükleriz. Bu sırada kullanıcılar ilerleme durumunu gösteren kolay bir ön yükleyici görür.

Bu yaklaşım, kullanıcının görmediği sahneler için gereksiz öğeler (bu çok fazla veri anlamına gelir) yüklemek zorunda olmadığımız anlamına gelir. Bu aynı zamanda her sahne için gerekli tüm öğelerin dahili bir "önbellek manifestini" saklamamız gerektiği anlamına da gelir. Önbellek manifesti, dosya adından bir MD5 karmasına eşlemenin depolandığı bir JSON dosyasıdır.

Kullandıklarınızı yükleyin

Bu model tüm siteyi bir defada önceden yüklemek yerine, yalnızca kullanıcının ziyaret ettiği sahneler için gereken kaynakları sunarak bant genişliğinden tasarruf sağlar. Santa Tracker, Polymer'in özel öğeleri yükleme süresi yerine çalışma zamanında yükseltme yeteneğinden faydalanır. Aşağıdaki snippet'i inceleyin:

<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>

Noel Baba Takip Aracı, bir sahneyi yüklemek için aşağıdaki adımları uygular, ör. boatload-scene:

  1. Tüm sahne öğeleri (<boatload-scene> dahil) başlangıçta bilinmeyendir ve bazı ek özelliklerle HTMLUnknownElement olarak kabul edilir.
  2. Seçilen sahne değiştirildiğinde <lazy-pages> öğesi bilgilendirilir.
  3. <lazy-pages> öğesi, sahne öğesini ve path özelliğini çözerek HTML içe aktarma dosyasını scenes/boatload/boatload-scene_en.html yükler. Bu öğe, Polimer öğesini ve bağımlı öğelerini içerir.
  4. Kullanımı kolay ön yükleyici gösteriliyor.
  5. HTML içe aktarma işlemi yüklenip yürütüldükten sonra <boatload-scene> şeffaf bir şekilde, yıl sonu neşesiyle dolu gerçek bir Polimer öğesine yükseltilir. 🎄🎉

Bu yaklaşımın kendine özgü zorlukları var. Örneğin, yinelenen web bileşenlerini dahil etmek istemeyiz. İki sahne ortak bir öğe kullanıyorsa, ör. paper-button, derleme sürecimizin bir parçası olarak bunu kaldırıp Noel Baba'nın paylaşılan koduna ekleriz.

Çevrimdışı tasarım

Santa Tracker, Polymer ve lazy-pages sayesinde zaten sahnelere düzenli bir şekilde bölünmüş durumda. Ayrıca, her sahnenin kendi dizini var. Santa Tracker'ın hizmet çalışanı, bir kullanıcının tarayıcısında çevrimdışı çalışmayı sağlayan temel parçayı, paylaşılan kod ile "sahne" arasındaki farkı dikkate alacak şekilde tasarladık.

Service Worker'ın arkasındaki teori nedir? Desteklenen bir tarayıcıdaki bir kullanıcı sitenizi yüklediğinde, ön uç HTML'si hizmet çalışanının yüklenmesini isteyebilir. Santa Tracker'ın hizmet çalışanı, /sw.js adresindedir. Bu işlem, Noel Baba'nın paylaştığı tüm kodları önceden önbelleğe alacak bir install etkinliği tetikler. Bu nedenle, çalışma zamanında hiçbir şeyin getirilmesine gerek yoktur.

GB akış diyagramı

Service Worker yüklendikten sonra tüm HTTP isteklerine müdahale edebilir. Santa Tracker için basitleştirilmiş karar akışı şu şekilde görünür:

  1. İstek zaten önbelleğe alındı mı?
    • İsteğinizi aldık. Önbelleğe alınan yanıtı döndürür.
  2. İstek, "views/bot_yükle-scene_tr.html" gibi bir sahne diziniyle eşleşiyor mu?
    • 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, kullanıcı internete bağlı değilken bile Santa Tracker'ın 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 geçmek için idealdir.

Keen gözlemciler, önbelleğe alma stratejimizin içerikte değişikliklere izin vermediğini görebilir. Bir dosya kullanıcının tarayıcısında önbelleğe alındıktan sonra hiçbir zaman değiştirilmez. Bununla ilgili daha fazla bilgi verilecektir.

Canlı yayınları yapacağız

Daha önce de belirttiğimiz gibi, Noel Baba'nın elfleri Aralık boyunca gayretle çalışır ve sık sık ay boyunca yeni güncellemeler yayınlamak zorunda kalırlar. Santa Tracker'ın bir sürümü oluşturulduğunda bu uygulamaya benzersiz bir etiket verilir. Örneğin, v20161204112055, yayın 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 "önbellek manifest"inde saklarız. Bu işlem, modern bir katı hal diskinde 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 da yeni sürümden sonra, değişmemiş olsalar bile tüm öğelerin farklı bir URL'ye sahip olacağı ve tarayıcı veya hizmet çalışanı tarafından önbelleğe alınan her şeyin, biz ekstra çalışma yapmadığımız sürece işe yaramayacağı anlamına gelir.

Ayrıca, https://santatracker.google.com/ adresinde bulunan ve "Üretim" kaynakları (Noel Baba'nın dizin HTML'si ve hizmet çalışanı) olarak adlandırdığımız kaynakların yeni sürümünü dağıtırız. Bunu yaptığınızda eski sürümün üzerine yazılır.

Statik diyagram

Santa Tracker her yüklendiğinde, tarayıcı güncellenmiş bir hizmet çalışanı olup olmadığını kontrol eder ve varsa hizmeti getirir. Ö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 manifestine" bakar. Bu değer, kullanıcının mevcut önbelleğiyle karşılaştırılır. Öğelerin farklı bir MD5 karması varsa bunları önbellekten silip tarayıcıdan yeniden getirmesini isteriz. Ancak çoğu durumda, önbelleğe alınan içerik büyük ölçüde aynıdır veya çok küçük farklılıkları vardır.

Önbellek şeması

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ışı tarama deneyimi

Tabii ki çevrimdışı deneyimi desteklemek ve bir web sitesinin çevrimdışı çalışacağını beklemeyebilecek kullanıcıların anlamasını kolaylaştırmak için kullanıcı arayüzünde de bazı değişiklikler yapmak zorunda kaldık.

Küçük bir banner çevrimdışı göz atarken bunu size bildirir. Önbelleğe alınmayan tüm sahneler "dondurulur" ve tıklanamaz. Bu şekilde, kullanıcılar mevcut olmayan içeriğe erişemez.

Çevrimdışı

Noel Baba Takipçisi, Noel Baba'nın API'sine düzenli istekler yapar. Bu istekler başarısız olur veya zaman aşımına uğrarsa kullanıcının çevrimdışı olduğu varsayılır. Tarayıcının yerleşik navigator.onLine özelliği yerine bu API'yi kullanırız. Bu özellik yalnızca kullanıcının çevrimiçi olup olmadığını bildirir. (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) olmasına rağmen, Noel Baba 35'ten fazla farklı dilde inşa edilip kullanıma sunuluyor.

Bir kullanıcı Santa Tracker'ı yüklediğinde, yayınlanacak dili seçmek için tarayıcının dilini ve diğer işaretleri kullanırız. Kullanıcıların büyük ç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, yukarıdaki örnekte olduğu gibi, Santa Tracker'ın yeni bir sürümünün kullanıma sunulduğu durumlarda olduğu gibi, yeni bir dil seçerse, bunu mevcut bir yükseltme varmış gibi değerlendiririz.

Dil

Başka bir deyişle, hizmet çalışanı amacıyla Santa Tracker'ın mevcut sürümü aslında bir (build,language) unsurudur.

Ana ekrana ekle

Noel Baba çevrimdışı çalıştığından ve bir hizmet çalışanı sağladığından, uygun kullanıcılardan bunu ana ekranlarına yüklemeleri istenir. 2016'da uygun yüklemelerin yaklaşık% 10'u ana ekran simgesinden geldi.

Sonuç

Mevcut Polymer ve web bileşeni kullanımımız sayesinde mevcut sahne tasarımımız sayesinde Santa Tracker'ı hızlı bir şekilde çevrimdışı bir PWA'ya dönüştürerek güvenilir ve etkileşimli bir deneyim elde etmeyi başardık. Ayrıca etkili yükseltmeler gerçekleştirmek için derleme sistemimizden yararlanarak yalnızca değiştirilen öğeleri geçersiz kılar.

Noel Baba büyük ölçüde özel olarak tasarlanmış bir çözüm olsa da birçok ilkesine Polymer Project'in Uygulama Araç Kutusu'ndan ulaşabilirsiniz. Sıfırdan yeni bir PWA oluşturuyorsanız göz atmanızı veya çerçeveden bağımsız bir yaklaşım arıyorsanız Workbox Kitaplığı'nı denemenizi öneririz.