Blazor で PWAを作る - C#+WPFチューニング戦記

最近C#も良くなってきましたが、Web開発環境も良くなってきました。いろいろなことができるのは良いことです。

今回はBlazor 0.7.0 で PWA(プログレッシブWebアプリ)を作ってみました。

Blazor 0.7.0 の環境構築はこちらのとおりです。

Blazor 0.7.0 experimental release now available | ASP.NET Blog

おおまかには以下が必要です。

.NET Core 2.1 SDK（2.1.500以降）
ASP.NETおよびWeb開発ワークロードを選択したVisual Studio 2017（15.9以降）
Visual Studio Marketplace の最新の Blazor Language Services extension
コマンドラインで以下を実行

dotnet new -i Microsoft.AspNetCore.Blazor.Templates

Blazorのプロジェクトの立ち上げ方は前回のブログのスライドを参考にしてください。

Blazor を用いたスクリプトレスWebアプリ開発の可能性 - C#+WPFチューニング戦記

テンプレートで生成したプロジェクト *.Server に NuGetから以下を追加します。

WebEssentials.AspNetCore.PWA

*.Server側のStartup.csのConfigureServicesを以下のように書き換えます。

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
            services.AddProgressiveWebApp();
            services.AddResponseCompression(options =>
            {
                options.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(new[]
                {
                    MediaTypeNames.Application.Octet,
                    WasmMediaTypeNames.Application.Wasm,
                });
            });
        }

*.Client側のwwwroot に PWA に必要な manifest.json を追加します。以下は例です。重要なのは記載したファイルをちゃんと実在させることです。(iconsとか)

{
  "name": "Progressive Web App",
  "short_name": "PWA",
  "description": "Creating PWA in ASP.NET Core.",
  "icons": [
    {
      "src": "/images/icon192x192.png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icon512x512.png",
      "sizes": "512x512"
    }
  ],
  "display": "standalone",
  "start_url": "/"
}

index.html を大体以下のように書き換えます。manifestの追加とserviceWorkerの追加です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <title>BlazorPwaSample</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
    <link rel="manifest" href="/manifest.json" />
</head>
<body>
    <app>Loading...</app>

    <script src="_framework/blazor.webassembly.js"></script>
    <script>'serviceWorker' in navigator && navigator.serviceWorker.register('/serviceworker')</script>
</body>
</html>

PWAを期待通りにブラウザーから切り離して動かすにはhttpsでなければなりません。IIS Express上で動かしてみるとよいでしょう。ちゃんとPWAとして動いているかどうかは、Chromeの右上のメニューに「Progressive Web App で開く」という項目が出ているかでわかります。

f:id:proprogrammer:20181117180544p:plain

切り離してみると、この通りブラウザではない普通のアプリケーション風の形になります。

Blazor0.7.0の目玉機能である「カスケードパラメーター」と「デバッグ機能の強化」はまだこれから体験してみようと思っています。