Blazor Server projesine PWA desteği eklemek

You can read this article in English here.

Blazor Server projenize Progressive Web Application (PWA) desteğini hızlı bir şekilde eklemek ister misiniz?

Aşağıdaki 3 adımı takip ederek hızlı bir şekilde projenize PWA desteğini aktif edebilirsiniz.

1. Adım: Geçici Blazor WASM Projesi Oluşturma

Blazor WASM projesinin varsayılan desteklerinden birisi de PWA desteğidir. CLI üzerinden kolay bir şekilde geçici bir Blazor WASM projesi oluşturalım.

dotnet new blazorwasm -o {PROJE_ADI} — pwa

2. Adım: PWA Dosyalarının Taşınması

Blazor WASM projesi oluşturduktan sonra {PROJE_ADI}\wwwroot altındaki ilgili dosyaları Blazor Server projemizdeki wwwroot dizinine taşıyoruz.

Dosyalar

1. manifest.json
2. service-worker.js
3. service-worker.published.js
4. icon-512.png (opsiyonel)

3. Adım: Blazor Server Projesinde PWA Aktivasyonu

Projemizin _Host.cshtml dosyasında blazor.server.js referansının hemen altına aşağıdaki serviceWorker kaydını ekliyoruz.

<script>
navigator.serviceWorker.register(‘service-worker.js’);
</script>

Yine _Host.cshtml dosyasının head bölümüne manifest dosyamızı çağırıyoruz.

<link rel=”manifest” href=”manifest.json” />

Artık Blazor Server projemizin PWA desteği hazır!