9
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[.NET 8]素のBlazorWebAppにチョイ足しでPWAを作る

Last updated at Posted at 2023-12-05

忙しい人向けに結論

  1. Blazor Web Appテンプレートでアプリケーションを作成する。
  2. サーバ側プロジェクトの App.razor<head> タグ内で manifest を参照する。
  3. 同じくサーバ側プロジェクトの App.razor<body> タグ内の最後で service-worker.js を参照する。
  4. サーバ側プロジェクト内の wwwroot フォルダ内に以下を配置する。
    • manifest.webmanifest
    • service-worker.js
    • manifest.webmanifest 内で参照している icon ファイル
  5. デバッグ実行する。
    image.png

ね、簡単でしょう?
以下で、解説をしていきます。

Blazor Web Appって?

Blazor Web Appは.NET 8より追加されたプロジェクトテンプレートで、.NET 7までのBlazor ServerとBlazor WebAssemblyを合体させたようなものです。
具体的には、ページやコンポーネント単位でサーバーサイドレンダリング、ストリーミングレンダリング、WebAssemblyでの動作を自動的に選択し、クライアントの状況に応じたインタラクティブなWebアプリを実現するテンプレートとなっています。
Blazor ServerとBlazor WebAssemblyのメリットの両方を享受できるため、これから新規に開発するのであればBlazor Web Appテンプレートを使用していくのが良い判断と言えるでしょう。

Blazor Web Appテンプレートでアプリケーションを作成する

Visual Studio 2022を使用して説明していきます。
まずはBlazor Web Appテンプレートを選択して、新しいプロジェクトを作成します。
image.png

任意のプロジェクト名を設定します。ここでは BlazorApp1 で進めます。
image.png

追加情報では以下の通り設定します。

項目
フレームワーク .NET 8.0(長期的なサポート)
認証の種類 なし
HTTPS用の構成
Interactive render mode Auto (Server and WebAssembly)
Interactivity location Per page/component
Include sample pages
Do not use top-level statements

image.png

作成ボタンをクリックすると以下のプロジェクトが生成されます。
image.png

BlazorApp1 がサーバ側のプロジェクト、 BlazorApp1.Client がクライアント側のプロジェクトになります。

App.razor の編集

続いて、以下のコードを参考にサーバ側の Components/App.razor ファイルを編集します。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="BlazorApp1.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
+   <link href="manifest.json" rel="manifest" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
+   <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>

</html>

Blazor WebAssemblyアプリから manifest.webmanifestservice-worker.js をコピーする

自分でmanifestファイルやservice-workerを作成しても良いですが、手間がかかるので、Blazor WebAssemblyアプリからコピーしましょう。
Blazor WebAssmblyアプリ テンプレートを使用し、新しいプロジェクトを追加します。
image.png

任意のプロジェクト名を設定します。ここでは、 BlazorApp2 とします。
image.png

追加情報では以下の通り設定します。

項目
フレームワーク .NET 8.0(長期的なサポート)
認証の種類 なし
HTTPS用の構成
プログレッシブ Web アプリケーション
Include sample pages
最上位レベルのステートメントを使用しない

image.png

プロジェクトを追加すると以下のようになります。
image.png

続いて、 BlazorApp2 の以下のファイルを BlazorApp1wwwroot フォルダにコピーします。

  • wwwroot/icon-192.png
  • wwwroot/icon-512.png
  • wwwroot/manifest.webmanifest
  • wwwroot/service-worker.js
  • wwwroot/service-worker.published.js

コピー後のプロジェクト構成は以下のようになると思います。
image.png

最後に、 BlazorApp1wwwroot/manifest.webmanifest を一部修正します。

{
- "name": "BlazorApp2",
+ "name": "BlazorApp1",
- "short_name": "BlazorApp2",
+ "short_name": "BlazorApp1",
  "id": "./",
  "start_url": "./",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#03173d",
  "prefer_related_applications": false,
  "icons": [
    {
      "src": "icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ]
}

デバッグ実行する

インストールダイアログが登場します。
image.png

当たり前ですがインストールすれば、PWAとして動作します。
image.png

おわり

これを参考にみなさんもよい.NETライフを!

最後の最後にちょっとだけ宣伝を

この記事を書いた @nr_ck が主宰するサークルきじのしっぽは、2023年12月31日のコミックマーケット103に参加します!
新刊は 「.NETだってM5Stackしたい!」 (A5/36ページ)です!

ご興味ある方はぜひお越しください~!
東京ビッグサイト 東2ホールU56aで待ってるよ!

9
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?