ASP.NET Core Blazor İlerlemiş 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.
• Ana bilgisayarın işletim sistemi başlat menüsü, uygulama yerleşim paneli veya ana ekrandan 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

Bir komut kabuğunda --pwa anahtarıyla bir 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 öğesini bir ItemGroup öğesine ekleyin:

  <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ürmüyorsanız-f|--framework seçeneğini belirtin. Aşağıdaki örnek .NET 5 için uygulamayı oluşturur:

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

• ASP.NET Core GitHub deposunun dal başvuru kaynağı ve varlıklarına bağlantı sağlayan aşağıdaki URL'ye gidin. Uygulamanıza uygulanan Dalları veya etiketleri değiştir açılan listesinden üzerinde çalıştığınız sürümü seçin.

  Blazor WebAssembly proje şablonu wwwroot klasör (dotnet/aspnetcore GitHub depo main dalı)

  Uyarı

  .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 etiketler arasında geçiş yap açılır listesini kullanın. Daha fazla bilgi için ASP.NET Core kaynak kodu için bir sürüm etiketi nasıl seçilir (dotnet/AspNetCore.Docs #26205) bölümüne bakın.

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

• Kapanış </body> etiketinin içine, blazor.webassembly.js betik etiketinden hemen sonra aşağıdaki JavaScript'i ekleyin.

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

  seçeneğiupdateViaCache: 'none' aşağıdakilerin olmasını sağlar:

  • Tarayıcı, hizmet çalışanı betiğinin önbelleğe alınmış sürümlerini kullanmaz.
  • Hizmet çalışanı güncelleştirmeleri, HTTP önbelleğe alma tarafından engellenmeden güvenilir bir şekilde uygulanır.
  • PWA uygulamaları, hizmet çalışanlarını daha tahmin edilebilir bir şekilde güncelleştirebilir.

  Bu, hizmet çalışanı güncelleştirmelerinin doğru şekilde uygulanmasını engelleyebilen önbelleğe alma sorunlarını giderir. Bu, çevrimdışı işlevsellik için hizmet çalışanlarına bağımlı olan PWA'lar için özellikle önemlidir.

Yükleme ve uygulama bildirimi

PWA şablonu kullanılarak oluşturulan bir uygulamayı ziyaret ederken, kullanıcılar uygulamayı işletim sistemi başlat menüsüne, takma birimine veya giriş 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üğmesine ve ardından Home ekrana seçeneğine tıklamaları 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 manifest.json dizinindeki dosyaya wwwroot 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ışı destekleyen bir PWA dağıtmayı planlıyorsanız, birkaç önemli uyarı ve bilgi notu vardır. Bu senaryolar çevrimdışı PWA'ların doğasındadır ve Blazor öğesine ö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ğ sekmesi sekmesinde tarayıcıda çevrimdışı modu simüle edin.

   Google Chrome geliştirici araçlarındaki 'Ağ' sekmesinde, tarayıcı modu açılır listesinin 'Çevrimiçi'den 'Çevrimdışı'na değiştirildiği alan.

Hizmet çalışanı kullanarak sağlanan çevrimdışı destek bir web standardıdır, özel olarak Blazor'ya ait değ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.
• Her iki hizmet çalışanı dosyasına ortak mantığı yüklemek için self.importScripts kullanın.

Ö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ğ, belirli istekleri engelleyen veya yönlendiren bir tutsak WIFI portalının bulunması gibi durumlarda belirli URL'ler için hatalı 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, service-worker-assets.js'yi HTTP önbelleğinden indirmesini önlemek için, örneğin bir hizmet çalışanının yeni sürümünü dağıtırken oluşabilecek geçici bütünlük denetimi hatalarını çözmek amacıyla, wwwroot/index.html içindeki hizmet çalışanı kaydı, updateViaCache'nin none olarak ayarlanmasını kullanır:

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

seçeneğiupdateViaCache: 'none' aşağıdakilerin olmasını sağlar:

• Tarayıcı, hizmet çalışanı betiğinin önbelleğe alınmış sürümlerini kullanmaz.
• Hizmet çalışanı güncelleştirmeleri, HTTP önbelleğe alma tarafından engellenmeden güvenilir bir şekilde uygulanır.
• PWA uygulamaları, hizmet çalışanlarını daha tahmin edilebilir bir şekilde güncelleştirebilir.

Bu, hizmet çalışanı güncelleştirmelerinin doğru şekilde uygulanmasını engelleyebilen önbelleğe alma sorunlarını giderir. Bu, çevrimdışı işlevsellik için hizmet çalışanlarına bağımlı olan PWA'lar için özellikle önemlidir.

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 uygulamanın yüklenmiş mantığı en son sürüm olmayabilecek belirli bir anda alınan anlık görüntüden gelebilir.

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, bir hizmet çalışanı varlıklar manifestosu oluşturur ve bu, service-worker-assets.js olarak adlandırılır. 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 onInstall içindeki service-worker.published.js işlevinde 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. Önceki davranışların hiçbiri Blazor'e özgü değildir; bunlar sadece PWA şablon seçeneği tarafından sağlanan varsayılan deneyimdir. 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. İçindeki mantık, onFetch fonksiyonu içinde service-worker.published.js ile uygulanır.

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

Sunucu tarafından işlenen sayfaları destekleme

Kullanıcının, örneğin uygulamadaki başka bir derin bağlantı olan /counter gibi bir URL'ye ilk kez gittiğinde ne olacağını göz önünde bulundurun. Bu gibi durumlarda, /counter olarak önbelleğe alınmış içeriği döndürmek istemezsiniz; bunun yerine uygulamanızı başlatmak için /index.html olarak önbelleğe alınmış Blazor WebAssembly içeriğinin tarayıcı tarafından yüklenmesi 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 onFetch içindeki service-worker.published.js işlevinde 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. Sunucuya yönelik normal yalnızca çevrimiçi istekler olarak işlenmesi gereken /Identity/ içeren tüm URL'ler için service-worker.published.jsonFetch mantığını değiştirin. Ş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 bunları /index.html kullanarak çö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 ServiceWorkerAssetsManifest MSBuild özelliğini tanımlıyorsa, Blazor derleme araçları belirtilen ada sahip bir hizmet işçisi varlık 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, wwwroot çıkış dizinine yerleştirilir, böylece tarayıcı bu dosyayı /service-worker-assets.js isteyerek alabilir. 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.

Manifesto şu öğeleri 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ığı onInstallservice-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ı, .html, .css, .js ve .wasm gibi tipik web dosyası adı uzantılarıyla eşleşen dosyaları ve Blazor WebAssembly'ye özgü dosya türlerini getirir ve önbelleğe alır. Bu dosya türleri arasında .pdb dosyaları (tüm sürümler) ve .dll dosyaları (ASP.NET Core, .NET 7 veya önceki sürümlerde) bulunur.

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ımlanan çıktı ayrı olarak kontrol edilmelidir. Yalnızca ServiceWorkerAssetsManifestItem hizmet çalışanı varlıkları manifestosunda 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. Mekanizma, uygulamasından Blazor WebAssemblybağımsızdır ve kullanıcı uygulamayı etkin bir şekilde kullanmasa bile sunucu herhangi bir zamanda anında iletme bildirimleri gönderebilir. Daha fazla bilgi için ASP.NET Core Blazor Progressive Web Applications (PWA) için push bildirimleri bölümüne 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 veya localStorage 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.

Uygulamadan ayrıldıktan sonra güncellemenin tamamlanması

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ı kontrol ederseniz, aşağıdakine benzer bir şey görebilirsiniz:

"Uygulamanızı görüntüleyen sekmeler veya pencereler olarak 'istemciler' listesi boş olmadığı 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 garantisinden vazgeçmiş 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 sayfalara müdahale

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. Dizin wwwroot milyonlarca görüntü içeriyorsa, servis çalışanı hepsini getirip önbelleğe almaya çalışır ve bu süreç aşırı bant genişliği tüketir, büyük ihtimalle de başarıyla tamamlanmaz.

Manifest’in içeriğinin hangi alt kümesinin getirilip önbelleğe alınacağını kontrol etmek için, onInstall içindeki service-worker.published.js fonksiyonunu düzenleyerek belirli 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:

• "AccountClaimsPrincipalFactory<TAccount>'yi, son oturum açan kullanıcıyı depolayan ve uygulama çevrimdışı olduğunda depolanan kullanıcıyı kullanan bir üreticiyle 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 kayıtlı 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

Kimlik doğrulaması için istemci tarafı SignalR çıkış noktaları arası anlaşma