Blazor和PWA让桌面、安卓&iOS App开发多了一个选择和可能
分类: Blazor入门 ◆ 标签: #Asp.Net core基础 #.Net #Web #Blazor ◆ 发布于: 2023-05-21 21:44:07
桌面开发、安卓ios开发对于很多用户来说都是成本很大的选项，因为一个项目需要花多几份的钱，例如你不得不要花安卓开发维护的钱，iOS开发维护的钱，还有网站开发维护的钱，然而自己的项目并不是那么吃资源，或者高大上的项目，无非都是增删查改这些最为基础的业务的组合。有没有新技术可以解决这类的问题？以前想着在web app里就画个框框，框框里的内容都走html5, 如今有了PWA，框框也不要画了，还能省省发行渠道费用，技术上是一个很值得考虑的选项。
前面我们介绍了什么是Blazor, 以及Blazor的两个Hello World应用，一个基于WebAssembly技术，一个是基于Server技术，没有看过介绍的同学可以快速的通过如下的链接回顾一下：
什么是Blazor?
Hello, Blazor World! (基于WebAssembly部署)
Hello, Blazor World! (基于Blazor Server部署)
深入理解Blazor Server技术
Razor Page入门指南
Razor语法参考
今天我们再来给大家展示一个非常有意思的技术：即使用Blazor创建PWA应用。
Blazor是基于组件式的UI解决方案，特别是基于WebAssembly的部署模型，该模型是直接在客户端运行，也即你的C#代码和dotnet 运行时(runtime)直接在用户的浏览器上运行，访问基于Blazor Webassembly构建的应用的时候，浏览器首先会下载dotnet运行时(runtime)和您的程序集到客户端，然后dotnet 运行时会直接在浏览器的线程里运行C#代码，直接在浏览器端基于DOM进行UI渲染。
那么PWA是什么呢？
PWA全称是：Progressive Web Apps，是由 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案。简单来说就是你使用PWA技术开发的web应用可以被安装到您的设备上，像设备上的本地应用一样运行，这些设备可以是PC桌面，也可以Mac 桌面，还可以是你的iPhone手机，你的安卓手机（突然想想，是不是大多数的iOS App，和安卓 app开发人员快失业？要有危机感呀。）
由于Blazor的特性，Blazor搭配PWA是绝配，天衣无缝，利用Blazor提供的工具以及dotnet提供的工具可以很容易的创建一个基于Blazor的PWA 应用。
下面就开始我们的简单的基于BlazorPWA应用之旅吧，可以说使用dotnet和Blazor, 这个过程简单到令人发指。
使用VS code和dotnet 命令行来创建
启动命令行:
dotnet new blazorwasm -o HelloWorld --pwa
注意创建的时候需要加入选项 --pwa, 即表明我们需要创建一个PWA的Web应用，使用模板:blazorwasm, 表示一个基于Webassembly的基于客户端运行的Blazor应用。尝试运行该demo
dotnet run
安装到桌面： 点击浏览器的位置栏的加号，即可以安装到桌面。
安装成功后，可以在windows的主菜单上显示：
可以将该应用添加到win10的此贴菜单上:
启动之后，看上去也本地的应用表现基本一致：
下面我们再测试一下，将PWA应用安装到MacBookPro上和华为手机以及iPhone 12上，在这些设备上安装之前，需要先发布一下本项目，并使用一个远程可以访问的站点发布该应用，我选择的是在Azure上创建一个Web App, 需要注意的是基于Blazor Webassembly发布的应用基本上是一个静态的网站。首先发布该应用:只需要把wwwroot下的文件上传到你的Azure Web app下就可以了，您可以选择测试我的这个demo站点(只是为了demo的站点，将来会被删除) https://mytestweb.chinacloudsites.cn/安装到华为手机和iPhone
使用华为浏览器访问地址：https://mytestweb.chinacloudsites.cn/
选择最右侧的三个点，出现菜单选择“添加至"
安装成功后如下图:
现在可以像本地的App一样启动这个基于Blazor开发的PWA应用了：
运行效果和本地应用基本一致了。运行在iPhone上的效果
