解决低网速展场iPad展示含视频的网站效果不佳的问题

insunshine • 2024年11月19日 11:35 • iPad资讯

前言

很久没发文了。之所以这样，不是因为没有题材，而是觉得对文章的内容、架构、完整性有一定的要求。但有时候，只想做一下笔记，若还要考虑前述的要求，那真的会导致发文频率下降。

所以，现阶段我调整了一下自己对发文的标准，只要有题材，稍微整理一下，即使没有很完整的架构、完整性，也可以做一下纪录。

缘起

前阵子某个客户碰上在展场上因网速过低而导致iPad展示网站效果不佳的状况，若网站页面图片素材不多倒是还好，还可以利用浏览器cache功能来解决，只要预先下载，下次开启就可以读取cache的图片。若有视频要拨放，就大大受展场网速过低影响。

因客户蛮常参加国内外展览，势必需要解决这样的问题。

寻找解决方案

目前最大问题是在于低网速时网站的视频拨放效果不佳（延迟），所以接下来寻找解决方案会以此当作痛点。

备注：

有试着将视频压缩仍然无法解决低网速的问题。
模拟低网速：使用 Chrome DevTool/ Network 模拟低网速环境。

其他寻找解决方案的考量因素包括：客户的展示机使用 iPad、官网使用 React.js 撰写、展示前网站修改频率高、视频定案后就不太会再频繁修改。

考虑几个可能的方案：

方案一：把网站打包成 app。如果网站要打包成桌面App可以使用 Electron 将网站打包成执行文件，但是 Electron 不支持移动版。若要将网站打包成iOS App，可以使用Ras Native改写原本的Raeact项目，主要是因为它们使用的是不同的渲染引擎和API。然后网站、图片跟视频也都可以打包进 iOS App，此时即使在低网速下，也不受此限制影响。
方案二：在 iPad 展示机内部装 API server，提供视频读取，让浏览器开启的网站可以不用读取远程服务器的视频，如此就不受低网速影响。

考虑开发时间有限，方案一的改写的时间成本较大，就不考虑此方案。定调方案二为我们解决问题的方向。

解决方案

如何在 iPad 安装 API server？

我常在本机端或远程主机建 API server，但就是没在 iPad 上安装过。

问了百度得知可以在 iOS 下载 iSH，然后在 iSH 中建立 API server。

甚么是 iSH？

iSH 是一个在 iOS 和 iPadOS 上运行的 Linux Shell 环境（ Alpine Linux ），可以让用户在手机和平板电脑上使用基于Linux的命令行工具和应用程序。它提供了一个完整的Linux Shell环境，包括Bash shell，以及各种基本的Linux命令和套件管理工具。

所以有了 iSH 这个工具，在 iPad 上建立 API server 就不是问题了。

以下是几点还需要考虑的需求及细节：

在 iSH 安装需要的工具：Alpine linux 是个很小的 linux shell，需要用到的工具、软件再依需求自行安装。 Alpine linux使用 apk 作为套件管理器，可以使用 apk 来安装需要的工具，例如 Vim、curl。
在 iSH 准备 API server 需要的环境，例如如果是 node.js 撰写的 API server 就需要 node.js 跟 npm，如果是 Python 撰写的 API server 就需要准备 Python 执行环境。不过后来因为 npm 下载套件有问题（不确定的原因是什么，但有网友测试是可以的），所以就改以 Python API server 来提供视频。
在用户于iPad上开启iSH时，就要顺便启动API server，因为不太可能让用户自执行琐碎的启动API server流程（进入iSH->cd到某个文件夹 ->bash下启动指令）。我们需要建立shell script来启动API server。另外，还需要在 iSH 的 start service 加入执行前述建立的 shell script。我们需要使用 OpenRC 来管理 alpine linux 的 services。
当 iPad 的 iSH 隐藏时，API server 仍需持续运作。
Python API server 项目及视频可以先通过百度drive （或其他方式）下载至 iPad 的 file system，存放在某个文件夹中，然后进入 iSH，指定 linux 的某个文件夹 mount iPad file system 的文件夹。
网站另有一个版本专门给 iPad 展示使用，针对视频，向 iPad 的 API server 请求。网站的图片素材仍然可以向远程服务器请求。

以上就是使用这个解决方案需要考虑的细节。详细的步骤可以参考上面的链接。