Blazor PWA 소개

dimohy · 12월 6, 2020, 4:31오전

Blazor가 PWA를 지원한다는 것을 아는 사람은 드문것 같습니다. 아래 ASP.NET 문서를 보면 Blazor를 프로그래시브 웹 어플리케이션으로 빌드하는 방법을 알려줍니다.

※ 저도 해보지는 않아서, 이게 Blazor WebAssembly만 가능한지 Blazor Server도 가능한지는 확인이 필요하네요. (문서상으로는 Blazor WebAssembly만 가능한 것 처럼 보입니다만)

※ 참고로 PWA는 본 닷넷 데브 포럼도 지원합니다. 우측 상단 플러스 버튼으로 모바일 및 데스크탑 환경에 설치할 수 있습니다.

ASP.NET Core Blazor WebAssembly를 사용하여 프로그레시브 웹 애플리케이션 빌드 | Microsoft Docs

dimohy · 12월 6, 2020, 6:38오전

PWA는 호스팅 모델과 상관없다는 내용이 보이네요. Blazor Server에서 해보고 댓글로 결과 공유하겠습니다.

dimohy · 12월 6, 2020, 8:56오전

Visual Studio 2019에서 Blazor WebAssembly App을 선택 후,

추가 정보의 Progressive Web Application을 선택하면

컴파일 후 실행했을 때 다음과 같이 설치 아이콘이 활성화 되는것을 볼 수 있습니다.

설치후,

다음과 같이 PWA형태로 실행됨을 볼 수 있습니다.

설치되었으므로 이후 설치된 어플리케이션 처럼 접근해서 실행할 수 잇습니다.

모바일도 크롬의 메뉴를 통해 유사하게 설치 가능합니다.

dimohy · 12월 6, 2020, 8:59오전

Xamarin Forms가 많이 최적화 되었지만 여전히 설피 파일의 크기가 크고, 최초 실행될 때의 대기시간이 긴 편이므로, PWA가 대안이 될 수 있습니다. 특히, Blazor와 결합한다면 현업에서도 괜찮은 대안이 되지 않을까 합니다.
※ 물론 Blazor WebAssembly 형태는 모바일에서 상당히 느린 로딩시간을 가지므로 아직은 비추천입니다.

dimohy · 12월 6, 2020, 9:17오전

확인 결과 PWA는 Blazor와 종속성이 없습니다. 즉, Blazor Server로도 PWA를 사용할 수 있습니다. 확인하기 위해 Blazor WebAssembly에 PWA를 체크하여 프로젝트를 생성한 후,
아이콘 파일, manifest.json, service-worker.js를 wwwroot에 복사한 후, _Host.cshtml에 아래와 같이 추가하면 됩니다.

dimohy · 12월 6, 2020, 9:26오전

Blazor PWA 정리

PWA는 Blazor랑 직접적인 상관은 없습니다. 다만, 조사해봐야겠지만 js interop 형태의 라이브러리는 제공하지 않을까 합니다.
Blazor WebAssembly보다는 Blazor Server PWA가 현재는 바로 현업에 쓰일 수 있어 보입니다.
결국에 Blazor나 Uno 등을 사용해서 개발을 진행하고, PWA를 적절히 잘 이용해 모바일 앱 & 웹 등 일괄 서비스를 배포할 수 있다는 시나리오가 가능해집니다.
이는 초기 빠르게 서비스를 완성해서 다양한 플렛폼에 배포해야 하는 서비스를 만들고자 하는 스타트업 회사에 필요한 시나리오가 아닐까 생각합니다.

dimohy · 12월 6, 2020, 9:55오전

Uno도 PWA샘플이 있길래 모바일에 설치해봤는데, 다운로그 받아야 하는 dll이 케시가 되는지 설치후에는 로딩은 꽤 빨리 됩닏다. 하지만, 화면으로 진입 후 메뉴 선택 등 너무 느리네요. 아마 샘플이 미리 AOT가 적용되지 않은 샘플인것 같습니다.

_jeonghwan · 9월 1, 2021, 5:14오전

최근에 저도 사용해본적이 있어 내용을 첨언합니다~~
PWA는 브라우저에서 지원되면 되는 기능입니다.
대부분의 PC브라우저 및 모바일 크롬등이 잘 지원합니다.
PWA는 모바일에서 플레이스토어 등을 거치지 않고 앱처럼 설치기능을 부여 가능하게합니다.
기타 service-worker.js를 통해 몇가지 기능등이 가능합니다.
PC에서도 위의 설명처럼 가능합니다.
IOS에서도 가능합니다.

네이버앱이나 카톡등 인앱브라우저에서는 설치가 지원하지 않습니다.
인앱브라우저에서 탈출시켜 크롬으로 사이트를 열게 하는 방법등이 이용됩니다.

BeforeInstallPromptEvent를 이용해서 사이트본문에 설치링크를 처리할수도 있습니다.