RoiBest PWA 接入Cocos Creator实现方案

之前业务需要接入RoiBest PWA用于推广，基于如何保持主渠道改动小，兼容成本最小需求，分享下接入方案

一、方案概述

ROIBest PWA 通过在独立域名下部署 index.html 入口文件，与常规 Web 入口进行隔离。 页面通过在 HTML 中注入特定 meta 标签（如 ShellName、UA、RemoteUrl 等），实现以下能力：

• 渠道区分（不同 Shell）
• PWA 与普通 Web 环境区分
• 动态加载远程资源

整体实现为：壳（入口 HTML）与业务资源解耦，运行时动态拉取资源。

---

二、实现原理

1. Meta 标记机制

通过在 index.html 中注入配置，实现运行时环境识别与资源定位：

<meta name="ShellName" content="[渠道标识]" />
<meta name="RemoteUrl" content="[远程资源服务器地址]" />
<meta name="UA" content="pwa" />
<meta name="RoiBestAppId" content="[应用 ID]" />

字段说明：

字段	作用
ShellName	渠道标识
RemoteUrl	远程资源服务器地址
UA	标识当前为 PWA 环境
RoiBestAppId	应用 ID

---

2. 静态资源路径调整

所有资源路径需从相对路径改为绝对路径，确保资源可从 CDN 正确加载：

<img src="[远程资源服务器地址]/image/bg.png" />
<script src="[远程资源服务器地址]/main.js"></script>

---

3. 动态脚本加载

通过运行时拼接远程地址加载资源：

function loadScript(moduleName, cb) {
  function scriptLoaded() {
    document.body.removeChild(domScript);
    domScript.removeEventListener('load', scriptLoaded, false);
    cb && cb();
  }

  var domScript = document.createElement('script');
  domScript.async = true;
  domScript.src = "[远程资源服务器地址]" + moduleName;

  domScript.addEventListener('load', scriptLoaded, false);
  document.body.appendChild(domScript);
}

---

三、业务侧改造

1. 资源管理（ResManager）

为适配 PWA，需要在资源加载时支持远程路径：

public async getBundle(bundleName: BundleSource, onProgress?: ProgressCallback, onError?: ErrorCallBack): Promise<cc.AssetManager.Bundle> {
    return new Promise((resolve, reject) => {

        let bundle = this.loadBundles[bundleName];
        if (bundle) {
            resolve(bundle);
            return;
        }

        let option = onProgress ? { onProgress } : null;

        let remoteRootPath = '';
        const remoteUrl = Platform.getRemoteUrl();

        if (remoteUrl !== "") {
            remoteRootPath = remoteUrl + "assets/";
        }

        cc.assetManager.loadBundle(remoteRootPath + bundleName, option, (err, bundle) => {
            if (!err) {
                this.loadBundles[bundleName] = bundle;
                resolve(bundle);
            } else {
                onError && onError(err);
                reject(err);
            }
        });
    });
}

---

2. 发布脚本

需要自己根据项目结构及实际情况进行改造，下面的目录结构仅是我这边的情况。

（1）脚本路径

$root/publish_roibest_pwa_web.sh

（2）执行流程

sh publish_roibest_pwa_web.sh

执行过程包含：

• 输入资源版本号
• 选择环境（测试 / 正式）
• 选择远程资源服务器
• 配置 ShellName
• 自动生成 PWA 包

（3）核心输出内容

• 修改后的 index.html
• PWA 发布资源包（zip）
• 自动注入版本号与配置

---

四、ROIBest 后台操作

1. 上传版本

• 将生成的 PWA 包上传至 ROIBest 后台

2. 获取推广链接

• 后台生成推广链接
• 用于渠道投放与用户访问

---