胖虎的工具箱-编程导航 胖虎的工具箱-编程导航

MAUI + Masa Blazor 开发带自动更新功能的安卓App

2年前 (2022) 程序员胖胖胖虎阿
240 0 0

自动更新主要下面4个步骤

  1. 获取最新版本号
  2. 提示用户发现更新，等待用户确认更新
  3. 下载最新的apk包
  4. 安装apk包

下面从创建MAUI项目开始

1、创建Maui Blazor Server应用

MAUI + Masa Blazor 开发带自动更新功能的安卓App

2、安装Masa.Blazor，并添加引用

dotnet add package Masa.Blazor

在 wwwroot/index.html 中引入资源文件

<!-- masa blazor css style -->
    <link href="https://masa-blazor-docs-dev.lonsid.cn/_content/Masa.Blazor/css/masa-blazor.min.css" rel="stylesheet">
    <link href="https://cdn.masastack.com/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.masastack.com/npm/materialicons/materialicons.css" rel="stylesheet">
    <link href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.masastack.com/stack/fonts/roboto/font-roboto.css">

<!--js(should lay the end of file)-->
    <script src="_content/BlazorComponent/js/blazor-component.js"></script>

在 _Imports.razor 添加，对Masa Blazor 的全局引用

@using Masa.Blazor
@using BlazorComponent

在MauiProgram.cs中注入服务

builder.Services.AddMasaBlazor();

修改Shared / MainLayout.razor文件，设置MApp为根元素

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>
    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>
        <article class="content px-4">
            <MApp>@Body</MApp>
        </article>
    </main>
</div>

项目属性中修改-已共享MAUI-中的应用程序ID及版本
MAUI + Masa Blazor 开发带自动更新功能的安卓App
## 3、开始编写代码
创建Service目录，添加IUpgradeService.cs接口

namespace MauiMasaBlazorDemo.Service
{
    public interface IUpgradeService
    {
        /// <summary>
        /// 检查更新
        /// </summary>
        /// <param name="url">
        /// 检查URL
        /// </param>
        /// <returns></returns>
        Task<Dictionary<string, string>> CheckUpdatesAsync(string url);

        /// <summary>
        /// 下载安装文件
        /// </summary>
        /// <param name="url">
        /// 下载URL
        /// </param>
        /// <param name="action">
        /// 进度条处理方法
        /// </param>
        /// <returns></returns>
        Task DownloadFileAsync(string url, Action<long, long> action);

        /// <summary>
        /// 安装APK的方法
        /// </summary>
        void InstallNewVersion();
    }
}

​
这里需要使用到 FileProvider，在Android 7之后出于安全考虑不再支持content://URL 或file:///URL这种文件访问方式，可参考FileProvider | Android Developers ，我们先添加一下对应配置

在Platforms/Android/Resources下面新建xml文件夹，并添加provider_paths.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <paths>
        <root-path name="root" path="" />
        <files-path name="files" path="" />
        <cache-path name="cache" path="" />
        <external-path name="camera_photos" path="" />
        <external-files-path name="external_file_path" path="" />
        <external-cache-path name="external_cache_path" path="" />
    </paths>
</resources>

修改Platforms / Android下面的AndroidManifest.xml文件，在application下添加provider，再添加一个安卓安装的权限REQUEST_INSTALL_PACKAGES

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true">
        <provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="com.masa.mauidemo.fileprovider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/provider_paths" />
        </provider>
    </application>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES" />
</manifest>

​
在Platforms / Android下添加UpgradeService.cs

获取版本号可以通过MAUI提供的 VersionTracking，该类还有很多版本相关的功能，可参考

Version tracking - .NET MAUI | Microsoft Docs

Intent 是一种运行时绑定（run-time binding）机制，Android的三个基本组件 Activity，Service和Broadcast Receiver 都是通过Intent机制激活的，有兴趣可参考
Intent | Android Developers

using Android.Content;
using Android.OS;
using MauiMasaBlazorDemo.Service;

namespace MauiMasaBlazorDemo
{
    public class UpgradeService : IUpgradeService
    {
        readonly HttpClient _client;
        public UpgradeService()
        {
            _client = new HttpClient();
        }
        public async Task<Dictionary<string, string>> CheckUpdatesAsync(string url)
        {
            var result = new Dictionary<string, string>();
            // 获取当前版本号
            var currentVersion = VersionTracking.CurrentVersion;
            var latestVersion = await _client.GetStringAsync(url);
            result.Add("CurrentVersion", currentVersion);
            result.Add("LatestVersion", latestVersion);
            return result;
        }

        public void InstallNewVersion()
        {
            var file = $"{FileSystem.AppDataDirectory}/{"com.masa.mauidemo.apk"}";

            var apkFile = new Java.IO.File(file);

            var intent = new Intent(Intent.ActionView);
            // 判断Android版本
            if (Build.VERSION.SdkInt >= BuildVersionCodes.N)
            {
                //给临时读取权限
                intent.SetFlags(ActivityFlags.GrantReadUriPermission);
                var uri = FileProvider.GetUriForFile(Android.App.Application.Context, "com.masa.mauidemo.fileprovider", apkFile);
                // 设置显式 MIME 数据类型
                intent.SetDataAndType(uri, "application/vnd.android.package-archive");
            }
            else
            {
                intent.SetDataAndType(Android.Net.Uri.FromFile(new Java.IO.File(file)), "application/vnd.android.package-archive");
            }
            //指定以新任务的方式启动Activity
            intent.AddFlags(ActivityFlags.NewTask);
            
            //激活一个新的Activity
            Android.App.Application.Context.StartActivity(intent);
        }

        public async Task DownloadFileAsync(string url, Action<long, long> action)
        {
            var req = new HttpRequestMessage(new HttpMethod("GET"), url);
            var response = _client.SendAsync(req, HttpCompletionOption.ResponseHeadersRead).Result;
            var allLength = response.Content.Headers.ContentLength;
            var stream = await response.Content.ReadAsStreamAsync();
            var file = $"{FileSystem.AppDataDirectory}/{"com.masa.mauidemo.apk"}";
            await using var fileStream = new FileStream(file, FileMode.Create);
            await using (stream)
            {
                var buffer = new byte[10240];
                var readLength = 0;
                int length;
                while ((length = await stream.ReadAsync(buffer, 0, buffer.Length)) != 0)
                {
                    readLength += length;
                    action(readLength, allLength!.Value);
                    // 写入到文件
                    fileStream.Write(buffer, 0, length);
                }
            }
        }
    }
}

其中com.masa.mauidemo.apk 为安装文件apk的文件名称。

在MauiProgram.cs中添加注入，这里使用条件编译，在平台为Android时使用

#if ANDROID
            builder.Services.AddSingleton<IUpgradeService, UpgradeService>();
#endif

在Pages中新增Index.razor.cs

using BlazorComponent;
using Masa.Blazor;
using MauiMasaBlazorDemo.Service;
using Microsoft.AspNetCore.Components;

namespace MauiMasaBlazorDemo.Pages
{
    public partial class Index
    {
        [Inject]
        public IPopupService PopupService { get; set; }

        [Inject]
        private IUpgradeService UpgradeService { get; set; }
        private int Ps { get; set; }

        private long TotalBytesToReceive { get; set; }

        private long BytesReceived { get; set; }

        private long _unReadMsgCnt = 0;

        private bool _updateDialog;
        /// <summary>
        /// 获取最新版本
        /// </summary>
        /// <returns></returns>
        public async Task GetVersionNew()
        {
            var result = await UpgradeService.CheckUpdatesAsync($"https://你的域名/update.txt?t={DateTime.Now.ToUniversalTime().Ticks}");
            if (result["CurrentVersion"] != result["LatestVersion"])
            {
                var confirm = await PopupService.ConfirmAsync($"检测到新版本，是否升级", "版本号为：" + result["LatestVersion"]);
                if (confirm)
                {
                    _updateDialog = true;
                    await UpgradeService.DownloadFileAsync("https://你的域名/com.masa.mauidemo.apk", DownloadProgressChanged);
                    UpgradeService.InstallNewVersion();
                }
            }
            else
            {
                await PopupService.AlertAsync($"当前版本已经是最新版,版本号为：" + result["LatestVersion"], AlertTypes.Success);
            }
        }

        private void DownloadProgressChanged(long readLength, long allLength)
        {
            InvokeAsync(() =>
            {
                var c = (int)(readLength * 100 / allLength);

                if (c > 0 && c % 5 == 0) //刷新进度为每5%更新一次，过快的刷新会导致页面显示数值与实际不一致
                {
                    Ps = c; //下载完成百分比
                    BytesReceived = readLength / 1024; //当前已经下载的Kb
                    TotalBytesToReceive = allLength / 1024; //文件总大小Kb
                    StateHasChanged();
                }
            });
        }
    }
}

修改Index.razor 添加按钮、确认对话框、进度条组件。Masa blazor是国内不多可以完美支持MAUI的blazor组件

@page "/"
<MButton OnClick="GetVersionNew">
    <MLabel>检查更新</MLabel>
    <MIcon>mdi-home</MIcon>
</MButton>
<div class="text-center">
    <MDialog @bind-Value="_updateDialog"
             Width="500">
        <ChildContent>
            <MCard>
                <MCardTitle Class="text-h5 grey lighten-2">
                    正在更新请稍后...
                </MCardTitle>
                <MCardText>
                    @BytesReceived KB/@TotalBytesToReceive KB
                    <MProgressLinear Value="@Ps" Striped Height="15" Color="light-blue">
                        <strong>@Ps %</strong>
                    </MProgressLinear>
                </MCardText>
            </MCard>
        </ChildContent>
    </MDialog>
</div>

## 4、项目打包、签名、发布
项目属性中修改Android包格式为Apk
MAUI + Masa Blazor 开发带自动更新功能的安卓App
命令行生成一个安卓签名证书（部分手机没有证书签名不允许安装），过程中会提示输入证书密码，密码要记住，其他随意填

keytool -genkey -v -keystore masa-maui-demo.keystore -alias key -keyalg RSA -keysize 2048 -validity 10000

MAUI + Masa Blazor 开发带自动更新功能的安卓App
项目属性，切换到-Android-包签名，勾选“APK签名”密钥存储选择刚刚生成的keystore文件，输入密钥“存储密码”和“别名密码”，这两个密码都填刚刚生成证书的密码，别名不设置的情况下，也需要输入别名密码，否则会在发布时提示“打包进程失败”。
MAUI + Masa Blazor 开发带自动更新功能的安卓App
解决方案配置中切换到Release,生成一下项目，然后右键项目名称-选择发布，发布0.0.1版本，发布过程会自动对apk进行签名
MAUI + Masa Blazor 开发带自动更新功能的安卓App
点右下角的打开文件夹，找到签名之后的apk文件，上传到阿里云OSS，同时再上传一个名为update.txt的文本文件，内容为“0.0.1”，这两个文件的地址就是GetVersionNew方法中的两个地址。
MAUI + Masa Blazor 开发带自动更新功能的安卓App
注意：

1、如果使用的下载apk的协议不是https，那么需要在AndroidManifest.xml文件 application 节点中添加 android:usesCleartextTraffic="true"

2、如果是使用iis的话需要在MIEI中添加 MIME类型：

application/vnd.android.package-archive，否则apk文件无法下载

这样我们的自动升级功能就开发完毕了，如果程序新加了功能我们我们需要做：

1、修改项目的版本号，例如修改“应用程序显示版本”为0.0.2，应用程序版本：2

2、重新发布apk

3、上传到阿里云OSS，修改update.txt文件为0.0.2

下面为真机演示效果
MAUI + Masa Blazor 开发带自动更新功能的安卓App
扫码进群了解更多
MASA Blazor 欢迎你的加入!

MAUI + Masa Blazor 开发带自动更新功能的安卓App

版权声明：程序员胖胖胖虎阿 发表于 2022年11月8日 下午1:40。
转载请注明：MAUI + Masa Blazor 开发带自动更新功能的安卓App | 胖虎的工具箱-编程导航

相关文章

Intellij IDEA正版破解插件(Intellij IDEA安装及破解插件永久有效)
程序员胖胖胖虎阿
268
没有这 29 款插件的 Chrome 是没有灵魂的！
程序员胖胖胖虎阿
226
Mybatis-Plus如何使用分页
程序员胖胖胖虎阿
132
Visio文件编辑查看工具—Visio Viewer
程序员胖胖胖虎阿
235
Java岗大厂面试百日冲刺 - 日积月累，每日三题【Day15】—— Spring框架1
程序员胖胖胖虎阿
233
IntelliJ IDEA最新免费激活码(Intellij IDEA永久激活工具激活至2099年)
程序员胖胖胖虎阿
174

暂无评论

暂无评论...
致力于称为最好的程序员导航网站

友链申请 免责声明 关于我们

Copyright © 2022  胖虎的工具箱-编程导航   陇ICP备2022001249号