각 클라이언트에 설치하고 실행할 수 있는 점진적 웹앱 만들기

환경

비주얼 스튜디오

• 비주얼 스튜디오 2019

.NET

• .NET 5.0

프로그레시브 웹앱(PWA)이란 무엇입니까?

간단히 말해, Windows PC, iPhone 또는 Android와 같은 각 장치에 웹 응용 프로그램을 설치하고 사용할 수있는 응용 프로그램입니다.

Blazor WebAssembly의 현실은 표준화 된 WebAssembly 자체이므로 위의 구현이 가능합니다. 기본적으로 웹 응용 프로그램 기반이지만 Plus Alpha의 푸시 알림과 같은 기본 기능을 사용할 수도 있습니다.

사용자를위한 설치 절차는 대상 페이지를 방문하고 설치 버튼을 누르기 만하면 되므로 매우 간단합니다.

블레이저 웹어셈블리 PWA 프로젝트 만들기

기본적으로 Blazor WebAssembly 프로젝트를 만드는 것과 같습니다.

평소와 같이 프로젝트를 만들고 아래의 "추가 정보"화면이 나타나면 "프로그레시브 웹 응용 프로그램"을 확인하십시오.

PWA 관련 기능 외에도 Blazor WebAssembly 개발은 기본적으로 PWA 프리 패턴과 동일합니다.

비 PWA 프로젝트와의 차이점

PWA에서 프로젝트를 만들면 몇 개의 파일이 더 생깁니다.

또한 열index.html 면 이러한 파일을 참조하는 일부 코드가 추가됩니다.

PWA 사용해보기

디버깅을 위해 프로젝트를 실행합니다.

실행 샘플은 PWA가 없는 패턴과 정확히 동일하지만 PWA를 사용하여 실행할 때 설치 단추가 웹 브라우저에 추가되었음을 알 수 있습니다.

클릭하면 설치 확인이 표시되므로 설치를 시도합니다.

그러면 Blazor 앱을 실행할 수 있는 별도의 창이 열립니다. 웹 브라우저가 아닌 클라이언트 앱 역할을 하므로 그림과 같이 OS 관련 설정을 구성할 수도 있습니다.

설치되기 때문에 이와 같은 시작 메뉴에 등록되고 시작할 수 있습니다.

그러나 콘텐츠는 웹앱이므로 콘텐츠를 다운로드할 수 있는 서버가 없으면 사용할 수 없습니다. 예를 들어 디버그 실행 중에 설치하는 경우 디버깅을 위해 IIS Express를 시작하지 않으면 설치된 앱을 사용할 수 없습니다. 또한 PWA는 https 연결 없이 설치할 수 없습니다.

제거

제거 절차는 일반 설치된 앱의 경우와 동일합니다. 운영 방법은 설치의 대상 플랫폼에 따라 다릅니다.

변경 로그

2022/7/13

• PWA를 설치하려면 https가 필요하다는 설명이 추가되었습니다.

2022/3/30

• 초판