• 【Web技术】433- 在前端 IPA & APK 还能这样玩


    一、背景概述

    近期公司为了方便管理内部多个不同版本的测试包,打算在公司内部搭建一个类似蒲公英/fir.im 的安装包管理平台。经过本人的一番搜索在 Github 上发现了 fabu.love 这个项目,基于该项目搭建的应用发布平台,可支持安装包管理、检查更新,灰度发布等功能。此外该项目采用前后端分离的开发方式进行开发,前端技术栈采用 Vue+ElementUI,后端技术栈采用 Node.js+Koa,这对于我这个伪全栈来说是一个不错的选择。

    fabu.love 这个项目提供 Docker 和源码部署两种方式,作者推荐使用 Docker 方式进行部署,为了快速验证平台效果,本人也是采用 Docker 方式部署。在公司一些小伙伴的配合下,我们完成了第一阶段的测试,得出的结论是基本能满足公司内部的需求。但把结果汇报给 Boss 之后,Boss 又提出了一个需求,若公司目前使用的付费应用分发平台出现异常时,fabu.love 这个平台能否在关键的时刻顶上。对于这个问题,当时我无法给出明确的答复,因为那时我对该项目并没有深入了解且该平台也未经过深度的测试。为了能给出一个较为明确回复,我开始了 fabu.love 项目的源码之旅。

    二、项目分析

    经过对 fabu.love 源码一番研读之后,发现该项目若要作为第三方平台的“备胎”,提前要先解决以下几个问题:

    • 上传的包存在分发平台所在的服务器上,当并发量高的时候,肯定扛不住;

    • iOS 企业证书版安装时使用的 itms-services 协议对应的 plist 文件(XML 类型)是通过服务端渲染生成的,此外应用下载页使用的是短网址,也是需要在服务端做处理,高并发的时候也会存在问题;

    • 应用下载页面未对下载进行验证并限制下载地址的有效期,无法防止恶意下载。

    针对前面的两个问题,通过修改项目的源码,我们都已经解决了,主要的解决方案是等安装包上传成功并成功解析后,把安装包和 iOS 平台对应的 plist 文件同步上传到第三方云存储,比如七牛云。对于第三个问题,我们也初步制定了处理方案。在研读该项目源码的过程中,发现了一个用于解析安装包的插件 —— app-info-parser,接下来我们来介绍一下 app-info-parser。

    三、app-info-parser 简介

    app-info-parser 是一个解析器用于解析 .ipa.apk 文件。当解析完成后,它会以 JSON 的形式返回 AndroidManifest.xmlInfo.plist 文件中的内容。该解析插件同时支持 Node.js 和浏览器平台。

    3.1 安装 app-info-parser

    1. npm install app-info-parser

    2. # or yarn

    3. yarn add app-info-parser

    3.2 Node.js 使用示例

    1. const AppInfoParser = require('app-info-parser')

    2. const parser = new AppInfoParser('../packages/test.apk') // or xxx.ipa

    3. parser.parse().then(result => {

    4. console.log('app info ----> ', result)

    5. console.log('icon base64 ----> ', result.icon)

    6. }).catch(err => {

    7. console.log('err ----> ', err)

    8. })

    除了导入 AppInfoParser 解析器之外,在使用过程中还可以按需导入 IPA 或 APK 安装包的解析器,具体可以参考 app-info-parser 说明文档。

    3.3 浏览器使用示例

    1. <input type="file" name="file" id="file" onchange="fileSelect()">

    2. <script src="/dist/app-info-parser.js"></script>

    3. <script>

    4. function fileSelect () {

    5. const files = document.getElementById('file').files

    6. const parser = new AppInfoParser(files[0])

    7. parser.parse().then(result => {

    8. console.log('app info ----> ', result)

    9. console.log('icon base64 ----> ', result.icon)

    10. }).catch(err => {

    11. console.log('err ----> ', err)

    12. })

    13. }

    14. </script>

    fabu.love 是在后台对安装包进行解析,为了加快用户下载的速度并减少对发布平台的压力,我们还需要把安装包再次上传到第三方云存储,这样的话安装包就需要两次传输。如果在前端解析安装包的话,就可以在成功解析和成功上传之后,再把安装包的信息和对应的下载地址一次性提交到后端。

    四、iOS itms-services 协议

    itms-service 是 Apple 为 iOS 企业用户提供的无线分发安装方式所使用的协议,使用这种方式发布应用不需要通过 App Store,任何 iOS 设备都可以安装企业用户通过这种方式发布的应用而没有设备数目的限制。itms-service 协议的格式如下:

    1. itms-services://?action=download-manifest&url=http://domain/ios/manifest.plist

    基于该协议用户就可以从 Safari 浏览器直接打开上述格式的 itms-services 协议的链接,即可在 iOS 设备上直接安装链接所指向的应用。协议中的 url 参数指向的是一个 plist 文件的 url 链接,该文件是一个 XML 格式的配置文件,以下是 iOS 安装包的 plist 文件模板:

    1. <?xml version="1.0" encoding="UTF-8"?>

    2. <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">

    3. <plist version="1.0">

    4. <dict>

    5. <key>items</key>

    6. <array>

    7. <dict>

    8. <key>assets</key>

    9. <array>

    10. <dict>

    11. <key>kind</key>

    12. <string>software-package</string>

    13. <key>url</key>

    14. <string>{{{ downloadUrl }}}</string>

    15. <key>md5-size</key>

    16. <integer>{{{ fileSize }}}</integer>

    17. </dict>

    18. <dict>

    19. <key>kind</key>

    20. <string>display-image</string>

    21. <!-- optional. indicates if icon needs shine effect applied. -->

    22. <key>needs-shine</key>

    23. <true/>

    24. <key>url</key>

    25. <string>{{{ iconUrl }}}</string>

    26. </dict>

    27. </array>

    28. <key>metadata</key>

    29. <dict>

    30. <key>bundle-identifier</key>

    31. <string>{{{ bundleID }}}</string>

    32. <key>bundle-version</key>

    33. <string>{{{ versionStr }}}</string>

    34. <key>kind</key>

    35. <string>software</string>

    36. <key>title</key>

    37. <string>{{{ appName }}}</string>

    38. </dict>

    39. </dict>

    40. </array>

    41. </dict>

    42. </plist>

    在 fabu.love 项目中是通过 mustache 模板引擎来动态生成 iOS 应用所对应的 plist 文件。

    五、总结

    本文介绍了 fabu.love 应用发布平台和 app-info-parser Apk 和 Ipa 应用包解析插件,除此之外还介绍了 iOS itms-services 协议。对应用发布平台感兴趣的小伙伴,可以参考一下 fabu.love 这个项目,如果遇到问题的话,欢迎一起讨论。

    六、参考资源

    • Github - app-info-parser

    • Github - fabu.love

    原创系列推荐

    1. JavaScript 重温系列(22篇全)

    2. ECMAScript 重温系列(10篇全)

    3. JavaScript设计模式 重温系列(9篇全)

    4. 正则 / 框架 / 算法等 重温系列(16篇全)

    5. Webpack4 入门(上)|| Webpack4 入门(下)

    6. MobX 入门(上) ||  MobX 入门(下)

    7. 59篇原创系列汇总

    回复“加群”与大佬们一起交流学习~

    点这,与大家一起分享本文吧~

    个人博客:http://www.pingan8787.com 微信公众号【前端自习课】和千万网友一起,每日清晨,享受一篇前端优秀文章。 目前已连续推送文章 600+ 天,愿每个人的初心都能一直坚持下去!
  • 相关阅读:
    git如何忽略特殊文件
    一文了解H5照片上传过程
    Vue组件通信方式(8种)
    H5 拍照图片旋转、压缩和上传
    Chrome插件推荐
    高效开发之使用Cmder替换cmd
    使用git配置ssh的文章推荐
    360极速浏览器如何默认设置必应搜索引擎
    notepad 多文档切换
    centos下kill、killall、pkill命令区别
  • 原文地址:https://www.cnblogs.com/pingan8787/p/13069581.html
Copyright © 2020-2023  润新知