Blatherを使ったPWAを作成する簡単な方法

このチュートリアルでは、単純な方法をあなたのBlazor webassemblyアプリからプログレッシブWebアプリケーション(PWA)を作成することを示します.PWAはオフラインで動作するデスクトップとモバイル上で一流の市民として扱われるインストール可能なWebアプリケーションです.

作業デモ

このチュートリアルでは、私は私の電源を使用するプロセスを介してあなたを歩いてBlazor FIRE Calculator プロジェクトは、プログレッシブ進行ウェブアプリケーションに.
プロジェクトの完全なコードはavailable on GitHub .

役に立つnugetパッケージ

あなたの親友があなたのBlazorアプリをPWAに変換しようとするときBlazor.PWA.MSBuild によって.この書き込み時、V 1.0.0リリースされましたが、最新のリリースバージョンをインストールしてください.Nugetパッケージをインストールするには、次のコマンドをパッケージマネージャーコンソールで実行します.

Install-Package BlazorPWA.MSBuild -Version 1.0.0

プロジェクトのパッケージが有効になっていることを確認してください.これはマニフェストを生成するビルドプロセスにフックを追加します.JSONとサービスワーカー.あなたのPWAが適切に機能するために必要なJSファイル.
それだ!プロジェクトは、カスタマイズが必要ボックスなしで動作します.幸いにも、あなたのPWAにカスタマイズをしたい場合は、方法があります.

カスタマイズ

変更PWA名

あなたが変更したい最初のことはあなたのPWAの名前です.あなたのアプリケーション、短い名前と長い名前で使用される2つの名前があります.短い名前は、あなたのPWAがインストールされると、アプリランチャーで使用される名前です.長い名前は、インストールダイアログで使用されます.
プロジェクトの名前を設定するには、プロジェクトにいくつかのプロパティを設定します.csprojファイル.私の例では、次の行をBlazorfirecculculatorに追加しました.csproj

<PropertyGroup>
    <ManifestShortName>FIRE Calculator</ManifestShortName>
    <ManifestLongName>Blazor FIRE Calculator</ManifestLongName>
</PropertyGroup>

アイコンを変更

あなたが変更することが次のことは、あなたのアプリを伴うアイコンです.このアイコンは、インストール画面で、画面を読み込み、アプリケーションのランチャーで表示されますので、間違いなくあなたのブランドを反映するようにします.
アイコンを変更する最も簡単な方法は、2つの新しいイメージファイルをプロジェクトのWWWRootフォルダーに保存することです.Icon - 192と命名すべきです.PNGと他のIcon - 512PNGこれらのファイルは、ビルドプロセス中に自動的に発見され、マニフェストに設定されます.JSON

キャッシュの自動更新

私のアプリでは、私はBlazorpwaを強制したかった.MSBuildは、プロジェクトを構築するたびに、サービスワーカーのコンテンツを再生成します.これにより、ビルド中にすべての必須ファイルがキャッシュに自動的に追加されます.ビルドの間に新しいファイルを追加したとしても.
私も私のアプリが上流のクライアント上でキャッシュを更新するために知っているようにversioningシステムが含まれて上流に更新プログラムをプッシュします.これらの2行のコードを追加します.csprojファイル.

<PropertyGroup>
    <ServiceWorkerCacheVersion>1</ServiceWorkerCacheVersion>
    <ServiceWorkerForce>true</ServiceWorkerForce>

    <ManifestShortName>FIRE Calculator</ManifestShortName>
    <ManifestLongName>Blazor FIRE Calculator</ManifestLongName>
</PropertyGroup>

カスタマイズインストールダイアログ

私も私のBlazorアプリケーションは、私のPWAアプリがインストール可能なときにインストール通知を表示したい.Blazorpwa.MSBuildには、ユーザーがアプリケーションをインストールできるように自動的に下部に通知が含まれます.このデフォルト動作はあなたのために働くかもしれません、しかし、私はそれをカスタマイズすることに決めました.
自動的に1つを生成する代わりにカスタム警告を表示する処理をあなたのBlazorアプリを強制的に、次の行を追加します.csprojファイル.

<PropertyGroup>
    <ServiceWorkerCacheVersion>2</ServiceWorkerCacheVersion>
    <ServiceWorkerForce>true</ServiceWorkerForce>

    <ServiceWorkerRegisterInstallableType>installable-blazor</ServiceWorkerRegisterInstallableType>

    <ManifestShortName>FIRE Calculator</ManifestShortName>
    <ManifestLongName>Blazor FIRE Calculator</ManifestLongName>
</PropertyGroup>

さて、共有/メインレイアウトを開きます.かみそり.このファイルにバナーを追加することによって、あなたのユーザーがどんなルーティングルートエンドに関係なくあなたのPWAをインストールするオプションを与えられるのを確実にします.ここでは、PWAインストールプロセスの一部であるフックに接続するために、JavaScriptランタイムヘルパーを注入します.

@inject IJSRuntime JSRuntime

次に、いくつかのタイプのバナーを表示するHTMLコードを追加します.私のテキストと2つのボタンとシンプルな旗です.

@if (Installable)
{
    <div class="row justify-content-center">
        <div class="install-prompt col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3">
            <span>Install app?</span>
            <button class="installButton btn btn-primary" @onclick="@(() => InstallClicked())">Yes</button>
            <button class="cancelButton btn btn-danger" @onclick="@(()=>Installable=false)">No</button>
        </div>
    </div>
}

また、以下のCSSスタイルを使用しています.

.install-prompt {
    background-color: #54595f;
    color: #fff;
    position: fixed;
    bottom: 0.5rem;
    padding: 0.5rem;
    display: flex;
    font-size: 1.5rem;
    border-radius: .25rem;
    z-index: 99;
}
    .install-prompt .installButton {
        margin-left: auto;
        width: 4em;
    }

    .install-prompt .cancelButton {
        margin-left: 0.3rem;
        width: 4em;
    }

メインレイアウトに戻ります.Razor、呼び出しを処理する必要があります.

@code
{
    static bool Installable = false;
    static Action OnInstallable;
    protected override void OnInitialized()
    {
        OnInstallable = () => InvokeAsync(StateHasChanged);
    }
    [JSInvokable]
    public static Task PWAInstallable()
    {
        Installable = true;
        OnInstallable.Invoke();
        return Task.CompletedTask;
    }
    ValueTask InstallClicked()
    {
        Installable = false;
        return JSRuntime.InvokeVoidAsync("BlazorPWA.installPWA");
    }
}

まず、定義するInstallable Boolは、通知を表示または非表示に使用されます.次に、デリゲートOnInstallable これは、UIをリフレッシュするアプリケーションに通知されます.
デフォルトでは、Blazorpwa.MSBuildツールは呼び出されるメソッドを探しますPWAInstallable UIへのインストールダイアログの追加をトリガーするために、私は先に行き、そのメソッド名を使いました.
最後に、インストールボタンのOnClickイベントを処理するメソッドを書いた.このメソッドは、以前に噴射されたJSランタイムを使用して、Blazorpwaによって自動的に生成される関数を実行します.で定義されているServerWorkerRegister.js コンプリートコードMainLayout.razor is on GitHub .

最下部

あなたのBlazor Webbassemblyアプリを本格的なプログレッシブウェブアプリに変換することは簡単です!このチュートリアルでは、サービスワーカーのキャッシュを設定し、あなたのアプリケーションのPWA呼び出しを処理するためのいくつかの有用なカスタマイズを示した.このチュートリアルに従うとBlazorでPWAを作成することにより、あなたのデスクトップやモバイルシステムにインストールすることができますアプリケーションを作成している.これは、アプリのランチャーから起動することができますが、オフラインで動作し、それはあなたのクライアントのデバイス上の他のアプリと同じように更新を受け取ることができます.The source code for the entire project はGithubにあり、demo is available テストするために.
Source