Blazor WebAssembly를 사용하여 PWA를 만드는 간단한 방법

이 강좌는 Blazor WebAssembly 응용 프로그램에서 점진적 웹 응용 프로그램(PWA)을 만드는 간단한 방법을 보여 줍니다.PWA는 데스크톱과 모바일 장치에서 일등 시민으로 간주되는 오프라인 작업의 설치 가능한 네트워크 응용 프로그램이다.

실행 중인 프레젠테이션

이 강좌에서, Blazor FIRE Calculator 프로젝트를 설치 가능한 점진적인 웹 응용 프로그램으로 전환하는 과정을 안내합니다.
이 프로젝트의 전체 코드는 available on GitHub이다.

유용한 Nuget 패키지

Blazor 응용 프로그램을 PWA로 바꾸려고 시도할 때 가장 친한 친구는 SQL MisterMagoo의 Blazor.PWA.MSBuild입니다.본문을 작성할 때, v1.0.0은 방금 발표되었지만, 최신 버전을 마음대로 설치하십시오.Nuget 패키지를 설치하려면 패키지 관리자 콘솔에서 다음 명령을 실행합니다.

Install-Package BlazorPWA.MSBuild -Version 1.0.0

프로젝트에 패키지가 활성화되어 있는지 확인하십시오.이것은 목록을 만드는 구축 과정에 갈고리를 추가할 것입니다.json 및 ServiceWorkerjs 파일, 이것은 PWA가 정상적으로 실행되는 데 필요한 것입니다.
그렇습니다!이 프로젝트는 사용자 정의가 필요 없이 상자를 열면 바로 사용할 수 있다.다행히도 PWA를 맞춤형으로 제작하려면 여러 가지 방법이 있습니다.

사용자 정의 PWA

PWA 이름 변경

당신이 변경하고 싶은 첫 번째 일은 당신의 PWA 이름입니다.응용 프로그램은 짧은 이름과 긴 이름 두 개를 사용합니다.짧은 이름은 PWA를 설치한 후 응용 프로그램 이니시에이터에서 사용하는 이름입니다.설치 대화 상자에서 긴 이름을 사용합니다.
항목의 이름을 설정하려면 항목에 속성을 설정합니다.csproj 파일.예시에서 BlazorFireCalculators에 다음 줄을 추가했습니다.csproj.

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

아이콘 변경

다음은 응용 프로그램에 첨부된 아이콘을 변경해야 할 수도 있습니다.이 아이콘은 설치 대화 상자, 로드 화면 및 응용 프로그램 이니시에이터에 나타나므로 브랜드를 반영하기를 원할 것입니다.
아이콘을 변경하는 가장 간단한 방법은 프로젝트의 wwwroot 폴더에 두 개의 새 이미지 파일을 저장하는 것입니다.그중 하나는 아이콘-192라고 명명해야 한다.png와 다른 아이콘 - 512.파푸아뉴기니.이 파일들은 생성 과정에서 자동으로 발견되고 목록에 채워집니다.json.

캐시 자동 업데이트

내 응용 프로그램에서 BlazorPWA를 강제하고 싶습니다.프로젝트를 생성할 때마다 서비스 보조 프로세스의 내용을 다시 생성하는 MSBuild이것은 생성할 때 필요한 모든 파일이 캐시에 자동으로 추가됩니다. 설령 내가 생성 사이에 새 파일을 추가했다 하더라도.
업데이트를 업로드할 때 응용 프로그램이 원격 클라이언트의 캐시를 업데이트하는 방법을 알 수 있도록 버전 제어 시스템도 포함됩니다.이 두 줄 코드를 추가합니다.csproj 파일.

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

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

사용자 지정 설치 대화 상자

또한 PWA 응용 프로그램을 설치할 수 있을 때 Blazor 응용 프로그램에 설치 알림이 표시되길 바랍니다.브라조르프바.MSBuild는 사용자가 응용 프로그램을 설치할 수 있도록 아래쪽에 자동으로 알림을 포함합니다.이 기본 동작은 당신에게 적합할 수 있지만, 사용자 정의를 하기로 결정했습니다.
Blazor 응용 프로그램에 자동 경보가 아닌 사용자 정의 경보를 표시하도록 하려면 응용 프로그램에 다음 줄을 추가합니다.csproj 파일.

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

    <ServiceWorkerRegisterInstallableType>installable-blazor</ServiceWorkerRegisterInstallableType>

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

이제 Shared/MainLayout을 엽니다.면도기이 파일에 배너를 추가하면 사용자가 PWA를 설치할 것인지 라우팅 끝점에 착륙하든 선택할 수 있습니다.PWA 설치 프로세스의 일부인 갈고리와 결합하기 위해 JavaScript 실행 시 도우미를 주입합니다.

@inject IJSRuntime JSRuntime

다음에 html 코드를 추가하여 어떤 유형의 현수막을 표시합니다.나는 간단한 현수막과 문자, 그리고 두 개의 단추를 가지고 있다.

@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 부울을 정의합니다.그런 다음 응용 프로그램에 UI 새로 고침을 알리는 의뢰 OnInstallable을 정의합니다.
기본적으로 BlazorPWA입니다.MSBuild 도구는 PWAInstallable이라는 호출 가능한 방법을 찾아서 설치 대화상자를 UI에 추가하는 것을 터치하기 때문에 이 방법의 이름을 계속 사용합니다.
마지막으로 설치 단추의 OnClick 이벤트를 처리하는 방법을 만들었습니다.이 방법은 이전에 주입한 JS가 실행될 때 BlazorPWA가 자동으로 생성하는 함수를 실행합니다.MSBuild는 ServerWorkerRegister.js에 MainLayout.razor is on GitHub의 전체 코드를 정의합니다.

밑줄

Blazor WebAssembly 응용 프로그램을 성숙한 점진적인 웹 응용 프로그램으로 바꾸는 것은 매우 간단합니다!이 강좌는 서비스 워커 캐시를 설정하는 데 도움을 주고 응용 프로그램의 PWA 호출을 처리하는 데 유용한 사용자 정의 설정을 보여 줍니다.이 강좌를 따르고 Blazor에서 PWA를 만들면 데스크톱이나 모바일 시스템에 설치할 수 있는 프로그램을 만들었습니다.이것은 응용 프로그램 이니시에이터에서 시작할 수 있고 오프라인으로 작업할 수 있으며 클라이언트 장치의 다른 응용 프로그램처럼 업데이트를 받을 수 있습니다.GitHub에서 source code for the entire project을 테스트할 수 있습니다.
demo is available