Appearance
使用开屏画面
开屏画面内容分类
静态/动态广告:持续 5 秒,除非用户手动关闭。
APP LOGO:持续最多 5 秒,用于遮盖网页内容加载过程,一旦加载完成就必须立即关闭,不应等到 5 秒结束。
开屏画面格式分类
既然开屏画面是为了加载别的内容拖延时间,那么它自身必然不能当场加载,而是要提前加载,这时候又分 2 种情况:
静态图片:因为体积小,所以在包括流量网络的任意环境下都可以加载。
动态视频:通常使用 MP4 格式,大小通常在 2MB 以内,使用强缓存,缓存的
expires
等同于广告截止日期,只在 WIFI 环境预加载。我们也往往在动态广告的角落看到“已在 WIFI 环境预加载”的提示。首先你需要让 APP 壳给 H5 提供当前网络环境信息,以便让 H5 得知当前是否是 WIFI 环境。这不难,不细说。
预加载方案
App.vue
读取localStorage
的splashScreenInfo
,根据信息向服务器定时轮询,询问服务器是否有新广告,有则缓存文件并更新localStorage
的splashScreenInfo
。
localStorage
的splashScreenInfo
至少有如下字段:
json
{
"id": 321,
"sourceUrl": "https://www.abc.com/123.mp4",
"linkUrl": "/lmn/xyz",
"expirationTime": 900000
}
checkForNewSplashScreen
的执行时机应是在首页全部加载完成之后开始执行。
伪代码如下,静态图片和动态视频的区别在于需要不需要判断 WIFI 环境:
js
// 使用 expired-storage 以支持存储 JSON 和过期时间
import ExpiredStorage from 'expired-storage';
const expiredStorage = new ExpiredStorage();
// 上一次存储的 splashScreenInfo
const splashScreenInfo = expiredStorage.getItem('splashScreenInfo') || {};
function checkForNewSplashScreen() {
if (NETWORK_STATE === 'WIFI') {
// 服务端根据上一次的广告 id 告诉你有没有新的广告
getNewSplashScreenInfo({ oldId: splashScreenInfo.id })
.then((response) => {
if (response.data.isNew) {
// 为了缓存图片或 MP4 文件
return getSource(response.data.sourceUrl).then(() => {
// expirationTime 是服务器计算出的还有多少秒过期,注意单位是秒
expiredStorage.setItem('splashScreenInfo', response.data, response.data.expirationTime);
});
}
})
.catch((e) => {});
}
}
// 5分钟轮询一次新广告
checkForNewSplashScreen();
setInterval(() => {
checkForNewSplashScreen();
}, 1000 * 60 * 5);