ASP.NET Çekirdek Blazor Aşamalı Web Uygulaması (PWA)

Blazor Aşamalı Web Uygulaması (PWA), modern tarayıcı API'lerini ve bir masaüstü uygulaması gibi davranan özellikleri kullanan tek sayfalı bir uygulamadır (SPA).

Blazor WebAssembly standart tabanlı bir istemci tarafı web uygulaması platformu olduğundan, aşağıdaki özellikler için gereken PWA API'leri de dahil olmak üzere herhangi bir tarayıcı API'sini kullanabilir:

• Çevrimdışı çalışma ve ağ hızından bağımsız olarak anında yükleme.
• Yalnızca bir tarayıcı penceresinde değil kendi uygulama penceresinde çalışıyor.
• Konağın işletim sistemi başlat menüsünden, takma biriminden veya home ekranından başlatılıyor.
• Kullanıcı uygulamayı kullanmasa bile arka uç sunucusundan anında iletme bildirimleri alma.
• Arka planda otomatik olarak güncelleştiriliyor.

Aşağıdakilerden dolayı bu uygulamaları açıklamak için aşamalı sözcüğü kullanılır:

• Bir kullanıcı önce uygulamayı diğer SPA'lar gibi web tarayıcılarında bulabilir ve kullanabilir.
• Daha sonra, kullanıcı işletim sistemine yüklemeye ve anında iletme bildirimlerini etkinleştirmeye devam eder.

PWA şablonundan proje oluşturma

Visual Studio

Yeni Blazor WebAssembly bir Uygulama oluştururken Aşamalı Web Uygulaması onay kutusunu seçin.

Visual Studio Code / .NET CLI

Anahtarla --pwa bir komut kabuğunda PWA projesi oluşturmak için aşağıdaki komutu kullanın:

dotnet new blazorwasm -o MyBlazorPwa --pwa

Yukarıdaki komutta -o|--output seçeneği, adlı MyBlazorPwauygulama için yeni bir klasör oluşturur.

Mevcut Blazor WebAssembly bir uygulamayı PWA'ya dönüştürme

Bu bölümdeki yönergeleri izleyerek mevcut Blazor WebAssembly bir uygulamayı PWA'ya dönüştürün.

Uygulamanın proje dosyasında:

• Aşağıdaki ServiceWorkerAssetsManifest özelliği bir PropertyGroupiçine ekleyin:

    ...
    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
  </PropertyGroup>
  

• Aşağıdaki ServiceWorker öğeyi öğesine ItemGroupekleyin:

  <ItemGroup>
    <ServiceWorker Include="wwwroot\service-worker.js" 
      PublishedContent="wwwroot\service-worker.published.js" />
  </ItemGroup>
  

Statik varlıkları almak için aşağıdaki yaklaşımlardan birini kullanın:

• Komut kabuğunda komutuyla dotnet new ayrı, yeni bir PWA projesi oluşturun:

  dotnet new blazorwasm -o MyBlazorPwa --pwa
  

  Yukarıdaki komutta -o|--output seçeneği, adlı MyBlazorPwauygulama için yeni bir klasör oluşturur.

  Bir uygulamayı en son sürüm için dönüştüremiyorsanız seçeneğini belirtin -f|--framework . Aşağıdaki örnek, ASP.NET Core sürüm 5.0 için uygulamayı oluşturur:

  dotnet new blazorwasm -o MyBlazorPwa --pwa -f net5.0
  

• Aşağıdaki URL'deki ASP.NET Core GitHub deposuna gidin. Bu depo, dal başvuru kaynağına ve varlıklarına main bağlanır. Uygulamanıza uygulanan Dalları veya etiketleri değiştir açılan listesinden üzerinde çalıştığınız sürümü seçin.

  Blazor WebAssembly project template wwwroot folder (dotnet/aspnetcore GitHub depo main dalı)

  Not

  .NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

  Oluşturduğunuz uygulamadaki kaynak wwwroot klasörden veya GitHub deposundaki dotnet/aspnetcore başvuru varlıklarından aşağıdaki dosyaları uygulamanın wwwroot klasörüne kopyalayın:

  • icon-192.png
  • icon-512.png
  • manifest.webmanifest
  • service-worker.js
  • service-worker.published.js

Uygulamanın wwwroot/index.html dosyasında:

• Bildirim ve uygulama simgesi için öğeler ekleyin <link> :

  <link href="manifest.webmanifest" rel="manifest" />
  <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
  <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
  

• Aşağıdaki <script> etiketi, betik etiketinden hemen sonra kapanış </body> etiketine blazor.webassembly.js ekleyin:

      ...
      <script>navigator.serviceWorker.register('service-worker.js');</script>
  </body>
  

Yükleme ve uygulama bildirimi

PWA şablonu kullanılarak oluşturulan bir uygulamayı ziyaret ederken, kullanıcılar uygulamayı işletim sisteminin başlat menüsüne, takma birimine veya home ekranına yükleme seçeneğine sahiptir. Bu seçeneğin sunulma şekli kullanıcının tarayıcısına bağlıdır. Edge veya Chrome gibi masaüstü Chromium tabanlı tarayıcıları kullanırken, URL çubuğunun içinde bir Ekle düğmesi görünür. Kullanıcı Ekle düğmesini seçtikten sonra bir onay iletişim kutusu alır:

iOS'ta, ziyaretçiler Safari'nin Paylaş düğmesini ve Giriş Ekranına Ekle seçeneğini kullanarak PWA'yı yükleyebilir. Android için Chrome'da kullanıcıların sağ üst köşedeki Menü düğmesini ve ardından Ekrana ekle'yi seçmesi Home gerekir.

Uygulama yüklendikten sonra, adres çubuğu olmadan kendi penceresinde görünür:

Pencerenin başlığını, renk düzenini, simgesini veya diğer ayrıntılarını özelleştirmek için projenin wwwroot dizinindeki dosyaya manifest.json bakın. Bu dosyanın şeması web standartlarına göre tanımlanır. Daha fazla bilgi için bkz . MDN web belgeleri: Web Uygulaması Bildirimi.

Çevrimdışı destek

PWA şablonu seçeneği kullanılarak oluşturulan uygulamalar çevrimdışı çalıştırma desteğine sahiptir. Bir kullanıcının önce çevrimiçiyken uygulamayı ziyaret etmesi gerekir. Tarayıcı, çevrimdışı çalışmak için gereken tüm kaynakları otomatik olarak indirir ve önbelleğe alır.

Önemli

Geliştirme desteği, değişiklik yapma ve bunları test etme ile ilgili olağan geliştirme döngüsüne müdahale eder. Bu nedenle, çevrimdışı destek yalnızca yayımlanan uygulamalar için etkinleştirilir.

Uyarı

Çevrimdışı etkinleştirilmiş bir PWA dağıtmayı planlıyorsanız, birkaç önemli uyarı ve uyarı vardır. Bu senaryolar çevrimdışı PWA'ların doğasındadır ve öğesine Blazorözgü değildir. Çevrimdışı etkin uygulamanızın nasıl çalıştığı hakkında varsayımlarda bulunmadan önce bu uyarıları okuduğunuzdan ve anladığınızdan emin olun.

Çevrimdışı desteğin nasıl çalıştığını görmek için:

1. Uygulamayı yayımlayın. Daha fazla bilgi için bkz . ASP.NET Core'u Blazorbarındırma ve dağıtma.

2. Uygulamayı HTTPS destekleyen bir sunucuya dağıtın ve uygulamaya güvenli HTTPS adresinden bir tarayıcıda erişin.

3. Tarayıcının geliştirme araçlarını açın ve Uygulama sekmesinde konak için bir Hizmet Çalışanının kayıtlı olduğunu doğrulayın:

   

4. Sayfayı yeniden yükleyin ve Ağ sekmesini inceleyin. Hizmet Çalışanı veya bellek önbelleği, sayfanın tüm varlıklarının kaynakları olarak listelenir:

   

5. Tarayıcının uygulamayı yüklemek için ağ erişimine bağımlı olmadığını doğrulamak için:

   • Web sunucusunu kapatın ve sayfanın yeniden yüklenmesini içeren uygulamanın normal çalışmaya nasıl devam ettiğine bakın. Benzer şekilde, yavaş bir ağ bağlantısı olduğunda uygulama normal çalışmaya devam eder.
   • Ağ sekmesinde tarayıcıya çevrimdışı modun benzetimini yapın:

   

Hizmet çalışanı kullanarak çevrimdışı destek bir web standardıdır, özel Blazordeğildir. Hizmet çalışanları hakkında daha fazla bilgi için bkz . MDN web belgeleri: Hizmet Çalışanı API'si. Hizmet çalışanlarının yaygın kullanım düzenleri hakkında daha fazla bilgi edinmek için bkz . Google Web: Hizmet Çalışanı Yaşam Döngüsü.

Blazor'nin PWA şablonu iki hizmet çalışanı dosyası oluşturur:

• wwwroot/service-worker.js, geliştirme sırasında kullanılır.
• wwwroot/service-worker.published.js, uygulama yayımlandıktan sonra kullanılır.

İki hizmet çalışanı dosyası arasında mantık paylaşmak için aşağıdaki yaklaşımı göz önünde bulundurun:

• Ortak mantığı tutmak için üçüncü bir JavaScript dosyası ekleyin.
• Ortak mantığı her iki hizmet çalışanı dosyalarına yüklemek için kullanın self.importScripts .

Önbellek öncelikli getirme stratejisi

Yerleşik service-worker.published.js hizmet çalışanı, önbellek öncelikli bir strateji kullanarak istekleri çözümler. Başka bir deyişle hizmet çalışanı, kullanıcının ağ erişimine sahip olup olmadığına veya sunucuda daha yeni bir içerik kullanılabilir olmasına bakılmaksızın önbelleğe alınmış içeriği döndürmeyi tercih eder.

Önbellek öncelikli strateji değerlidir çünkü:

• Güvenilirlik sağlar. Ağ erişimi boole durumu değildir. Bir kullanıcı yalnızca çevrimiçi veya çevrimdışı değildir:

  • Kullanıcının cihazı çevrimiçi olduğunu varsayabilir, ancak ağ beklemek için pratik olmayacak kadar yavaş olabilir.
  • Ağ, şu anda belirli istekleri engelleyen veya yönlendiren bir tutsak WIFI portalı olması gibi belirli URL'ler için geçersiz sonuçlar döndürebilir.

  Bu nedenle tarayıcının API'sinin navigator.onLine güvenilir olmaması ve bağımlı olmaması gerekir.

• Doğruluğu sağlar. Hizmet çalışanı çevrimdışı kaynakların önbelleğini oluştururken, kaynakların tam ve kendi kendine tutarlı bir anlık görüntüsünün zamanında tek bir anda getirildiğinden emin olmak için içerik karması kullanır. Bu önbellek daha sonra atomik birim olarak kullanılır. Gereken tek sürümler zaten önbelleğe alınmış olan sürümler olduğundan ağdan daha yeni kaynaklar istemenin bir anlamı yoktur. Diğer her şey tutarsızlık ve uyumsuzluk riski taşır (örneğin, birlikte derlanmamış .NET derlemelerinin sürümlerini kullanmaya çalışmak).

Tarayıcının HTTP önbelleğinden gelmesini service-worker-assets.js engellemeniz gerekiyorsa( örneğin, hizmet çalışanının yeni bir sürümünü dağıtırken geçici bütünlük denetimi hatalarını çözmek için) içindeki hizmet çalışanı kaydını wwwroot/index.html updateViaCache 'none' olarak ayarlayın:

<script>
  navigator.serviceWorker.register('/service-worker.js', {updateViaCache: 'none'});
</script>

Arka plan güncelleştirmeleri

Zihinsel bir model olarak, çevrimdışı ilk PWA'nın yüklenebilen bir mobil uygulama gibi davrandığını düşünebilirsiniz. Uygulama, ağ bağlantısından bağımsız olarak hemen başlatılır, ancak yüklenen uygulama mantığı en son sürüm olmayabilecek belirli bir noktaya anlık görüntüden gelir.

PWA şablonu, Blazor kullanıcı her ziyaretinde ve çalışan bir ağ bağlantısı olduğunda arka planda kendilerini otomatik olarak güncelleştirmeye çalışan uygulamalar üretir. Bunun çalışma şekli aşağıdaki gibidir:

• Derleme sırasında proje adlı service-worker-assets.jsbir hizmet çalışanı varlıkları bildirimi oluşturur. Bildirim; içerik karmaları dahil olmak üzere .NET derlemeleri, JavaScript dosyaları ve CSS gibi uygulamanın çevrimdışı çalışması için gereken tüm statik kaynakları listeler. Kaynak listesi, hangi kaynakların önbelleğe alındığını bilmesi için hizmet çalışanı tarafından yüklenir.
• Kullanıcı uygulamayı her ziyaretinde tarayıcı yeniden istekte bulunur service-worker.js ve service-worker-assets.js arka planda çalışır. Dosyalar, mevcut yüklü hizmet çalışanıyla bayt için bayt olarak karşılaştırılır. Sunucu bu dosyalardan herhangi biri için değiştirilmiş içerik döndürürse, hizmet çalışanı kendi yeni bir sürümünü yüklemeyi dener.
• Kendi yeni sürümünü yüklerken, hizmet çalışanı çevrimdışı kaynaklar için yeni, ayrı bir önbellek oluşturur ve önbelleği içinde service-worker-assets.jslistelenen kaynaklarla doldurmaya başlar. Bu mantık içindeki service-worker.published.jsişlevinde onInstall uygulanır.
• Tüm kaynaklar hatasız yüklendiğinde ve tüm içerik karmaları eşleştiğinde işlem başarıyla tamamlanır. Başarılı olursa, yeni hizmet çalışanı etkinleştirme için bekleme durumuna girer. Kullanıcı uygulamayı kapatır kapatmaz (kalan uygulama sekmeleri veya pencereleri yoktur), yeni hizmet çalışanı etkin hale gelir ve sonraki uygulama ziyaretleri için kullanılır. Eski hizmet çalışanı ve önbelleği silinir.
• İşlem başarıyla tamamlanmazsa, yeni hizmet çalışanı örneği atılır. Güncelleştirme işlemi, istemcinin istekleri tamamlayabilen daha iyi bir ağ bağlantısına sahip olduğunu umarak kullanıcının bir sonraki ziyaretinde yeniden denendi.

Hizmet çalışanı mantığını düzenleyerek bu işlemi özelleştirin. Yukarıdaki davranışlardan hiçbiri, PWA şablonu seçeneği tarafından sağlanan varsayılan deneyime Blazor özgü değildir. Daha fazla bilgi için bkz . MDN web belgeleri: Hizmet Çalışanı API'si.

İstekler nasıl çözümlenir?

Önbellek öncelikli getirme stratejisi bölümünde açıklandığı gibi, varsayılan hizmet çalışanı önbellek öncelikli bir strateji kullanır ve bu da kullanılabilir olduğunda önbelleğe alınmış içerik sunmaya çalıştığı anlamına gelir. Belirli bir URL için önbelleğe alınmış içerik yoksa (örneğin arka uç API'sinden veri istediğinde) hizmet çalışanı normal bir ağ isteğine geri döner. Sunucuya ulaşılabilirse ağ isteği başarılı olur. Bu mantık içindeki işlevin içinde onFetch service-worker.published.jsuygulanır.

Uygulamanın bileşenleri arka uç API'lerinden Razor veri istemeye güveniyorsa ve ağ kullanılamaması nedeniyle başarısız istekler için kolay bir kullanıcı deneyimi sağlamak istiyorsanız, uygulamanın bileşenlerinde mantık uygulayın. Örneğin, isteklerin etrafında HttpClient kullanıntry/catch.

Sunucu tarafından işlenen sayfaları destekleme

Kullanıcı veya uygulamadaki başka bir derin bağlantı gibi /counter bir URL'ye ilk kez gittiği zaman ne olacağını göz önünde bulundurun. Böyle durumlarda, önbelleğe alınmış içeriği olarak /counterdöndürmek istemezsiniz, ancak bunun yerine tarayıcınızın uygulamanızı Blazor WebAssembly başlatmak için önbelleğe alınmış /index.html içeriği yüklemesi gerekir. Bu ilk istekler, aşağıdakilerden farklı olarak gezinti istekleri olarak bilinir:

• subresource görüntüler, stil sayfaları veya diğer dosyalar için istekler.
• fetch/XHR API verileri için istekler.

Varsayılan hizmet çalışanı, gezinti istekleri için özel durum mantığı içerir. Hizmet çalışanı, istenen URL'ye bakılmaksızın için /index.htmlönbelleğe alınmış içeriği döndürerek istekleri çözümler. Bu mantık içindeki service-worker.published.jsişlevinde onFetch uygulanır.

Uygulamanızın sunucu tarafından işlenen HTML döndürmesi gereken ve önbellekten hizmet /index.html vermemesi gereken belirli URL'leri varsa, hizmet çalışanınızın mantığını düzenlemeniz gerekir. Içeren /Identity/ tüm URL'lerin sunucuya yönelik normal yalnızca çevrimiçi istekler olarak işlenmesi gerekiyorsa mantığı değiştirin service-worker.published.js onFetch . Şu kodu bulun:

const shouldServeIndexHtml = event.request.mode === 'navigate';

Kodu aşağıdaki şekilde değiştirin:

const shouldServeIndexHtml = event.request.mode === 'navigate'
  && !event.request.url.includes('/Identity/');

Bunu yapmazsanız, ağ bağlantısından bağımsız olarak hizmet çalışanı bu TÜR URL'ler için istekleri durdurur ve kullanarak /index.htmlbunları çözümler.

Denetime dış kimlik doğrulama sağlayıcıları için ek uç noktalar ekleyin. Aşağıdaki örnekte, /signin-google Google kimlik doğrulaması denetimine eklenir:

const shouldServeIndexHtml = event.request.mode === 'navigate'
  && !event.request.url.includes('/Identity/')
  && !event.request.url.includes('/signin-google');

İçeriğin Development her zaman ağdan getirildiği ortam için herhangi bir eylem gerekmez.

Varlık önbelleğini denetleme

Projeniz MSBuild özelliğini tanımlıyorsa ServiceWorkerAssetsManifest , Blazorderleme araçları belirtilen ada sahip bir hizmet çalışanı varlıkları bildirimi oluşturur. Varsayılan PWA şablonu aşağıdaki özelliği içeren bir proje dosyası oluşturur:

<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>

Dosya çıkış dizinine wwwroot yerleştirilir, böylece tarayıcı bu dosyayı isteğiyle /service-worker-assets.jsalabilir. Bu dosyanın içeriğini görmek için bir metin düzenleyicisinde açın /bin/Debug/{TARGET FRAMEWORK}/wwwroot/service-worker-assets.js . Ancak, her derlemede yeniden oluşturulan dosyayı düzenlemeyin.

Bildirimde şu listeler:

• BlazorÇevrimdışı çalışması için gereken .NET derlemeleri ve .NET WebAssembly çalışma zamanı dosyaları gibi tüm yönetilen kaynaklar.
• Dış projeler ve NuGet paketleri tarafından sağlanan statik web varlıkları da dahil olmak üzere görüntüler, stil sayfaları ve JavaScript dosyaları gibi uygulamanın wwwroot dizininde yayımlamaya yönelik tüm kaynaklar.

içindeki mantığı onInstall service-worker.published.jsdüzenleyerek hizmet çalışanı tarafından bu kaynaklardan hangilerinin getirilip önbelleğe alınıp alınabileceğini denetleyebilirsiniz. Hizmet çalışanı, dosya .wasm.js.css(tüm sürümler) ve dosyalar (.html.NET 7 veya önceki sürümlerinde ASP.NET Core) gibi .pdb , , ve gibi tipik web dosyası Blazor WebAssemblyadı uzantılarıyla eşleşen dosyaları getirir ve .dll önbelleğe alır.

Uygulamanın wwwroot dizininde bulunmayan ek kaynakları eklemek için, aşağıdaki örnekte gösterildiği gibi ek MSBuild ItemGroup girdileri tanımlayın:

<ItemGroup>
  <ServiceWorkerAssetsManifestItem Include="MyDirectory\AnotherFile.json"
    RelativePath="MyDirectory\AnotherFile.json" AssetUrl="files/AnotherFile.json" />
</ItemGroup>

Meta AssetUrl veriler, tarayıcının kaynağı önbelleğe alırken kullanması gereken temel göreli URL'yi belirtir. Bu, disk üzerindeki özgün kaynak dosya adından bağımsız olabilir.

Önemli

ekleme ServiceWorkerAssetsManifestItem , dosyanın uygulamanın wwwroot dizininde yayımlanmasına neden olmaz. Yayımlama çıkışı ayrı olarak denetlenmelidir. Yalnızca ServiceWorkerAssetsManifestItem hizmet çalışanı varlıkları bildiriminde ek bir girişin görünmesine neden olur.

Anında iletme bildirimleri

Diğer PWA'lar gibi PWA da Blazor WebAssembly arka uç sunucusundan anında iletme bildirimleri alabilir. Kullanıcı uygulamayı etkin bir şekilde kullanmasa bile sunucu istediği zaman anında iletme bildirimleri gönderebilir. Örneğin, farklı bir kullanıcı ilgili bir eylem gerçekleştirdiğinde anında iletme bildirimleri gönderilebilir.

Anında iletme bildirimi gönderme mekanizması, herhangi bir teknolojiyi kullanabilen arka uç sunucusu tarafından uygulandığından tamamen bağımsızdır Blazor WebAssembly. ASP.NET Core sunucusundan anında iletme bildirimleri göndermek istiyorsanız Blazing Pizza atölyesinde uygulanan yaklaşıma benzer bir teknik kullanmayı göz önünde bulundurun.

İstemcide anında iletme bildirimi alma ve görüntüleme mekanizması da Blazor WebAssemblyhizmet çalışanı JavaScript dosyasında uygulandığından bağımsızdır. Bir örnek için Blazing Pizza atölyesinde kullanılan yaklaşıma bakın.

Çevrimdışı PWA'lar için uyarılar

Tüm uygulamalar çevrimdışı kullanımı desteklemeye çalışmamalıdır. Çevrimdışı destek önemli bir karmaşıklık eklerken, her zaman gerekli kullanım örnekleriyle ilgili değildir.

Çevrimdışı destek genellikle yalnızca geçerlidir:

• Birincil veri deposu tarayıcıda yerelse. Örneğin, bu yaklaşım, verileri localStorage veya IndexedDB'de depolayan bir IoT cihazı için kullanıcı arabirimine sahip bir uygulamada geçerlidir.
• Uygulama, her kullanıcıyla ilgili arka uç API'sinin verilerini getirmek ve önbelleğe almak için önemli miktarda çalışma gerçekleştirirse, veriler arasında çevrimdışı olarak gezinebilir. Uygulamanın düzenlemeyi desteklemesi gerekiyorsa, değişiklikleri izlemeye ve verileri arka uçla eşitlemeye yönelik bir sistem oluşturulmalıdır.
• Amaç, ağ koşullarından bağımsız olarak uygulamanın hemen yüklendiğini garanti etmekse. İsteklerin ilerleme durumunu göstermek için arka uç API istekleri çevresinde uygun bir kullanıcı deneyimi uygulayın ve ağ kullanılamadığı için istekler başarısız olduğunda düzgün davranın.

Buna ek olarak, çevrimdışı çalışabilen PWA'lar bir dizi ek komplikasyonla başa çıkmalıdır. Geliştiriciler, aşağıdaki bölümlerde yer alan uyarılar hakkında dikkatli bir şekilde bilgi sahibi olmalıdır.

Çevrimdışı destek yalnızca yayımlandığında

Geliştirme sırasında her değişikliğin arka plan güncelleştirme işleminden geçmeden hemen tarayıcıda yansıtılmasını istersiniz. Bu nedenle, Blazor'nin PWA şablonu yalnızca yayımlandığında çevrimdışı desteği etkinleştirir.

Çevrimdışı çalışabilen bir uygulama oluştururken, uygulamayı Development ortamda test etmek yeterli değildir. Uygulamanın farklı ağ koşullarına nasıl yanıt verdiğini anlamak için uygulamayı yayımlanmış durumunda test etmeniz gerekir.

Kullanıcı gezintisi uygulamadan uzaklaştıktan sonra güncelleştirme tamamlama

Kullanıcı tüm sekmelerde uygulamadan ayrılana kadar güncelleştirmeler tamamlanmaz. Arka plan güncelleştirmeleri bölümünde açıklandığı gibi, uygulamaya bir güncelleştirme dağıttığınızda tarayıcı güncelleştirme işlemini başlatmak için güncelleştirilmiş hizmet çalışanı dosyalarını getirir.

Birçok geliştiriciyi şaşırtır, bu güncelleştirme tamamlandığında bile kullanıcı tüm sekmelerde gezinene kadar etkili olmaz. Uygulamayı görüntüleyen tek sekme olsa bile, uygulamayı görüntüleyen sekmeyi yenilemek yeterli değildir. Uygulamanız tamamen kapatılana kadar, yeni hizmet çalışanı durumu etkinleştirmek için beklemede kalır. Bu, uygulamasına Blazorözgü değildir ancak standart bir web platformu davranışıdır.

Bu durum genellikle hizmet çalışanlarına veya çevrimdışı önbelleğe alınmış kaynaklarına yönelik güncelleştirmeleri test etmeye çalışan geliştiricilere sorun çıkarır. Tarayıcının geliştirici araçlarını iade ederseniz aşağıdakine benzer bir şey görebilirsiniz:

Uygulamanızı görüntüleyen sekmeler veya pencereler olan "istemciler" listesi belirsiz olduğu sürece, çalışan beklemeye devam eder. Hizmet çalışanlarının bunu yapma nedeni tutarlılığı garanti etmektir. Tutarlılık, tüm kaynakların aynı atomik önbellekten getirildiğini gösterir.

Değişiklikleri test ederken, önceki ekran görüntüsünde gösterildiği gibi "skipWaiting" bağlantısını seçip sayfayı yeniden yüklemeyi uygun bulabilirsiniz. Hizmet çalışanınızı "bekleme" aşamasını atlayıp güncelleştirmede hemen etkinleştirecek şekilde kodlayarak bunu tüm kullanıcılar için otomatikleştirebilirsiniz. Bekleme aşamasını atlarsanız, kaynakların her zaman aynı önbellek örneğinden tutarlı bir şekilde getirildiğinin garantisini vermiş olursunuz.

Kullanıcılar uygulamanın herhangi bir geçmiş sürümünü çalıştırabilir

Web geliştiricileri, geleneksel web dağıtım modelinde normal olduğundan, kullanıcıların web uygulamalarının yalnızca en son dağıtılan sürümünü çalıştırmasını bekler. Ancak, çevrimdışı ilk PWA, kullanıcıların en son sürümü çalıştırması gerekmeyen yerel bir mobil uygulamaya daha çok örnektir.

Arka plan güncelleştirmeleri bölümünde açıklandığı gibi, uygulamanıza bir güncelleştirme dağıttıktan sonra, güncelleştirme arka planda gerçekleştiğinden ve kullanıcı uzaklaşana kadar etkinleştirilmediğinden, mevcut her kullanıcı en az bir ziyaret için önceki sürümü kullanmaya devam eder. Ayrıca, kullanılan önceki sürüm, dağıtmış olduğunuz önceki sürüm olmayabilir. Önceki sürüm, kullanıcının bir güncelleştirmeyi en son ne zaman tamamladığından bağlı olarak herhangi bir geçmiş sürümü olabilir.

Uygulamanızın ön uç ve arka uç bölümleri API istekleri için şema hakkında sözleşme gerektiriyorsa bu sorun olabilir. Tüm kullanıcıların yükseltmiş olduğundan emin olana kadar geriye dönük uyumsuz API şeması değişikliklerini dağıtmamalısınız. Alternatif olarak, kullanıcıların uygulamanın uyumsuz eski sürümlerini kullanmasını engelleyin. Bu senaryo gereksinimi, yerel mobil uygulamalarla aynıdır. Sunucu API'lerinde hataya neden olan bir değişiklik dağıtırsanız, istemci uygulaması henüz güncelleştirilmemiş kullanıcılar için bozulur.

Mümkünse arka uç API'lerinize hataya neden olan değişiklikleri dağıtmayın. Bunu yapmanız gerekiyorsa, kullanımı önlemek için uygulamanın güncel olup olmadığını belirlemek için ServiceWorkerRegistration gibi standart Hizmet Çalışanı API'lerini kullanmayı göz önünde bulundurun.

Sunucu tarafından işlenen sayfalarla girişim

Sunucu tarafından işlenen sayfaları destekle bölümünde açıklandığı gibi, hizmet çalışanının tüm gezinti istekleri için içerik döndürme /index.html davranışını atlamak istiyorsanız, hizmet çalışanınızın mantığını düzenleyin.

Tüm hizmet çalışanı varlık bildirimi içeriği önbelleğe alınır

Varlık önbelleğe alma denetimi bölümünde açıklandığı gibi, dosya service-worker-assets.js derleme sırasında oluşturulur ve hizmet çalışanının getirmesi ve önbelleğe alması gereken tüm varlıkları listeler.

Bu liste, dış paketler ve projeler tarafından sağlanan içerik de dahil olmak üzere öğesine wwwrootyayılan her şeyi içerdiğinden, oraya çok fazla içerik koymamaya dikkat etmeniz gerekir. Dizinde wwwroot milyonlarca görüntü varsa, hizmet çalışanı aşırı bant genişliği tüketerek ve büyük olasılıkla başarıyla tamamlanmadığından hepsini getirip önbelleğe almaya çalışır.

içindeki işlevi service-worker.published.jsdüzenleyerek onInstall bildirimin içeriğinin hangi alt kümesinin getirilip önbelleğe alınması gerektiğini denetlemek için rastgele mantık uygulayın.

Kimlik doğrulaması ile etkileşim

PWA şablonu kimlik doğrulamasıyla birlikte kullanılabilir. Çevrimdışı özellikli bir PWA, kullanıcının ilk ağ bağlantısı olduğunda kimlik doğrulamasını da destekleyebilir.

Bir kullanıcının ağ bağlantısı olmadığında kimlik doğrulaması yapamaz veya erişim belirteçleri edinemez. Ağ erişimi olmadan oturum açma sayfasını ziyaret etmek "ağ hatası" iletisiyle sonuçlanır. Kullanıcının kimliğini doğrulamaya veya erişim belirteçleri elde etmeye çalışmadan çevrimdışıyken yararlı görevler gerçekleştirmesine olanak tanıyan bir UI akışı tasarlamanız gerekir. Alternatif olarak, ağ kullanılabilir olmadığında uygulamayı düzgün bir şekilde başarısız olacak şekilde tasarlayabilirsiniz. Uygulama bu senaryoları işleyecek şekilde tasarlanamazsa çevrimdışı desteği etkinleştirmek istemeyebilirsiniz.

Çevrimiçi ve çevrimdışı kullanım için tasarlanmış bir uygulama yeniden çevrimiçi olduğunda:

• Uygulamanın yeni bir erişim belirteci sağlaması gerekebilir.
• Uygulamanın, kullanıcının çevrimdışıyken hesaba yapılan işlemleri uygulayabilmesi için farklı bir kullanıcının hizmette oturum açıp açmadığını algılaması gerekir.

Kimlik doğrulamasıyla etkileşim kuran çevrimdışı bir PWA uygulaması oluşturmak için:

• öğesini AccountClaimsPrincipalFactory<TAccount> , son oturum açan kullanıcıyı depolayan ve uygulama çevrimdışı olduğunda depolanan kullanıcıyı kullanan bir fabrikayla değiştirin.
• Uygulama çevrimdışıyken işlemleri sıralayın ve uygulama çevrimiçi olduğunda bunları uygulayın.
• Oturumu kapatma sırasında depolanan kullanıcıyı temizleyin.

Örnek CarChecker uygulama, önceki yaklaşımları gösterir. Uygulamanın aşağıdaki bölümlerine bakın:

• OfflineAccountClaimsPrincipalFactory (Client/Data/OfflineAccountClaimsPrincipalFactory.cs)
• LocalVehiclesStore (Client/Data/LocalVehiclesStore.cs)
• LoginStatus bileşen (Client/Shared/LoginStatus.razor)

Ek kaynaklar

• Bütünlük sorunlarını giderme PowerShell betiği
• Kimlik doğrulaması için istemci tarafı SignalR çıkış noktaları arası anlaşma