Blazor WebAssembly: C#’ta PWA arayüzleri nasıl kullanılır?
Aşamalı Web Uygulamaları (PWA’lar), web tabanlı bir uygulama modelidir. Devreye alındıktan sonra, çevrimdışı çalışma ve ana ekranda veya sistem tepsisinde bir simge de dahil olmak üzere makul ölçüde modern bir web tarayıcısının bulunduğu her yerde çalışabilirler.
Buna paralel olarak, Project Fugu gibi girişimler, geçmişte ek web platformu arayüzlerini web’e getirdi. Bunlar, yerel dosya sistemine erişmek için Dosya Sistemi Erişim API’sini, panoyla çalışmak için Async Clipboard API’yi ve içerik paylaşmak için işletim sistemi işlevselliğine entegre etmek için Web Share API’yi içerir. Bu arayüzler tüm web uygulamaları için kullanılabilir.
Diğer API’ler, web uygulamasının kullanıcının sistemine yüklenmesini gerektirir. Bu, örneğin, PWA simgesinde küçük bir rozet görüntüleyen Rozetleme API’si veya yüklendiğinde belirli dosya uzantıları için bir PWA’yı değiştirici olarak kaydeden Dosya Yönetimi API’si için geçerlidir.
Web Platformu API’leri herkes içindir
Microsoft Blazor WebAssembly tek sayfalı uygulama çerçevesi, PWA’ları uygulamak için de uygundur. Blazor WebAssembly projeleri için proje şablonunda, geliştiriciler PWA desteğini etkinleştirmek için bir kutuyu işaretleyebilir.
Blazor WebAssembly, web uygulamalarını C# ile yazmak isteyen .NET geliştiricileri için popüler bir seçimdir. Doğal olarak, web platformu arayüzleri, Blazor WebAssembly kullanıcıları da dahil olmak üzere tüm web geliştiricilerine fayda sağlar. Bununla birlikte, API’ler genellikle JavaScript’i temel aldığından, C# dünyasında kullanım kolaylığı için uygun sarmalayıcılara ihtiyaç vardır.
Blazor WebAssembly uygulamaları için PWA desteği yalnızca bir onay kutusudur
Halihazırda pek çok sarmalayıcı paket mevcut
Neyse ki, birçok ilginç API’de NuGet aracılığıyla Blazor WebAssembly projenize yüklenebilecek açık kaynak paketleyiciler zaten var. NuGet paketlerini ve arayüz tarayıcı desteğini kullanma talimatları parantez içinde bağlantılıdır:
Blazor WebAssembly içinden Badge API’yi kullanın
Thinktecture.Blazor.Badging NuGet paketi aşağıda sunulmuştur. Rozet API’si, örneğin Yapılacaklar Listesi uygulamaları veya yapılacaklar listelerini veya okunmamış e-postaları görüntüleyen e-posta istemcileri için uygundur. API’nin öne çıkan bir kullanıcısı Twitter PWA’dır.
API, macOS ve Windows’ta sürüm 81’den beri Chromium tabanlı tarayıcılar tarafından desteklenmektedir. Apple, mevcut iOS ve iPadOS 16.4 beta 1’de arayüz için de destek sağlıyor.
Öncelikle, NuGet paketi Blazor WebAssembly projesine dahil edilmelidir:
dotnet add package Thinktecture.Blazor.Badging
Ardından, BadgingService’in IServiceCollection’a kaydedilmesi gerekir. Bu genellikle dosyada olur Program.cs:
builder.Services.AddBadgingService();
API eksikliğine hazırlıklı olun
Tüm API’ler, tüm tarayıcılarda ve işletim sistemlerinde desteklenmez. Örneğin, Android’deki uygulama rozetleri bu uygulamadan gelen bildirimlerin sayısını gösterir, bu nedenle arayüz burada geçerli değildir. Arayüz ayrıca yalnızca uygulama yüklenmişse kullanılabilir.
Bu nedenle, geliştiriciler her zaman aşamalı iyileştirme ilkesini kullanmalıdır: yalnızca mevcutsa bir arabirim kullanın. Aksi takdirde, çalışma zamanı hatası oluşabilir.
Bir arayüz mevcut değilse, özellik uygulamada gizlenmeli veya devre dışı bırakılmalıdır. Bazen geliştiricilerin kullanabileceği geri dönüş yaklaşımları da vardır. Örneğin, Rozetleme API’si söz konusu olduğunda, pencere başlığı, uygulama başlığının önüne parantez içinde bildirim sayısı eklenerek özelleştirilebilir: “(3) Harika Uygulamam”.
Farklılaşmaya izin vermek için, paketler genellikle yöntemi sağlar. IsSupportedAsync() API’nin varlığını kontrol etmek için hangi geliştiricilerin kullanabileceği:
var isSupported = await badgingService.IsSupportedAsync();
if (isSupported)
{
// enable badging feature
}
else
{
// use alternative implementation
}
API mevcutsa, rozete yöntem kullanılarak erişilebilir. SetAppBadgeAsync() ayarlanır. Bu yöntem, rozette görüntülenecek bir numara gerektirir. Alternatif olarak, “null” da iletilebilir, bu durumda genel bir çıkartma görüntülenir.
await badgingService.SetAppBadgeAsync(3);
Ve uygulama simgesinde istenen rozet şu şekilde görünür:
Sistem tepsisindeki Blazor WebAssembly uygulama simgesinin üzerine artık bir rozet yerleştirilmiştir
Sonuç olarak: Uygun bir şekilde güçlü Blazor WebAssembly uygulamaları
Web son yıllarda giderek daha güçlü hale geldi: Dosya Sistemi Erişim API’si sayesinde Microsoft, kod düzenleyicisi Visual Studio Code’u tarayıcıya (vscode.dev) getirebildi. Adobe, Photoshop’un web sürümünde Dosya Sistemi API’sini kullanır. Microsoft Paint’in web tabanlı paint.js.org (paint.js.org) klonu birkaç API’yi birleştirir.
Wrapper paketleri sayesinde Blazor WebAssembly uygulamaları, web platformunun güçlü yeni API’lerine de kolayca erişebilir.Arayüzler genellikle C# dünyasına sorunsuz bir şekilde entegre olur. Ve bununla, .NET geliştiricileri bile doğrudan tarayıcı için karmaşık üretkenlik uygulamaları yazabilir.
(harita)
Haberin Sonu