プログレッシブWEBアプリをC#.NETで構築する際の例
C# (.NET) を使って PWA(プログレッシブ Web アプリ)を構築する最も一般的な方法として、ASP.NET Core + Blazor WebAssembly を例に、PWA機能を付与するサンプル構成を示します。✅ C# / .NET で PWA を構築する一般的な方法1. ASP.NET Core MVC / Razor Pages に PWA対応を追加する2. Blazor WebAssembly を PWA として構築する(最も簡単)特に Blazor WebAssembly は PWA対応が標準で、テンプレート1つでアプリ化できます。ここでは Blazor WebAssembly の PWA例を紹介します。🎯 Blazor WebAssembly で PWA を作る手順■ 1. 新規プロジェクトの作成Visual Studio または CLI で以下を選びます。● Visual Studio「Blazor WebAssembly App」→ 「Progressive Web Application (PWA)」にチェック● CLIdotnet new blazorwasm -o MyPwaApp --pwaこれだけで PWA 化された Web アプリ が生成されます。■ 2. プロジェクトの構成(主要 PWA 部分)作成すると以下のファイルが自動生成されています:wwwroot/ ├── manifest.json ← PWA設定ファイル ├── service-worker.js ← Service Worker 本体 ├── service-worker.published.js ← 公開時向けSW └── icon-192.png/icon-512.png📌 manifest.json(例)ホーム画面アイコンやアプリ情報が記載されます。{ "name": "My PWA App", "short_name": "PWAApp", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#0277bd", "icons": [ { "src": "icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "icon-512.png", "type": "image/png", "sizes": "512x512" } ]}📌 Service Worker(service-worker.js)例Blazor のテンプレート例(キャッシュ戦略):self.addEventListener('install', event => { console.log('Service Worker: Install'); event.waitUntil( caches.open('my-pwa-cache-v1') .then(cache => { return cache.addAll([ './', './index.html', './manifest.json' ]); }) );});self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => response || fetch(event.request)) );});Blazor 公開版では service-worker.published.js がより高度なキャッシュ制御を行います。■ 3. ASP.NET Core 側(Program.cs)Blazor 起動処理:var builder = WebApplication.CreateBuilder(args);// Blazor と静的ファイルを有効化builder.Services.AddRazorPages();builder.Services.AddServerSideBlazor();var app = builder.Build();app.UseHttpsRedirection();app.UseBlazorFrameworkFiles();app.UseStaticFiles();app.MapFallbackToFile("index.html");app.Run();■ 4. デプロイして PWA を確認ブラウザ(Chrome / Edge)でアプリを開き、アドレスバーの「インストール」アイコンまたはメニュー → アプリをインストールが表示されれば PWA として機能しています。🎉 結果:.NET だけで PWA が構築できるオフライン対応アプリのような起動高速キャッシュWebAssembly(C#)で実行が実現できます。