拉起App的另一种方式：应用与页面的交互(2)

见解分享

2024-02-18 05:05:28

无需浏览器扩展实现页面与应用程序的通信

随着技术的发展，页面与应用程序之间的无缝通信变得越来越重要。上一次，我们探讨了利用浏览器扩展实现通信的方法。这次，我们将深入探讨另一种更灵活的方式，它无需浏览器扩展，并涵盖更广泛的通信场景。

为什么需要这种方式？

通过 URI 拉起应用程序时，页面端无法接收应用程序的任何反馈，从而无法判断应用程序是否已被拉起。为了解决这个问题，我们考虑了以下方式：

应用程序被拉起后向后端发送一条消息
页面监听后端的消息，接收消息后表明应用程序已被拉起

这种方式的优点：

无需使用浏览器扩展
页面和应用程序可直接通信
可通过后端传递数据，如拉起应用程序时所需参数

这种方式的缺点：

需要后端支持
存在安全风险，如后端被攻击，应用程序可能被恶意拉起

实现步骤

后端实现

后端提供一个接口，应用程序被拉起后可向其发送消息。以下是一个示例实现：

// 后端代码
@PostMapping("/app/launch")
public void launchApp(@RequestBody String message) {
    // 解析消息，获取应用程序的包名和参数
    String packageName = message.substring(0, message.indexOf("="));
    String params = message.substring(message.indexOf("=") + 1);

    // 根据包名和参数拉起应用程序
    Intent intent = new Intent(Intent.ACTION_MAIN);
    intent.setComponent(new ComponentName(packageName, "com.example.MainActivity"));
    intent.putExtra("params", params);
    startActivity(intent);
}

应用程序实现

应用程序监听后端发来的消息，接收消息后表明应用程序已被拉起。以下是一个示例实现：

// 应用程序代码
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // 注册广播接收器，监听后端发来的消息
    IntentFilter intentFilter = new IntentFilter();
    intentFilter.addAction("com.example.app.LAUNCH");
    registerReceiver(new BroadcastReceiver() {
        @Override
        public void onReceive(Context context, Intent intent) {
            // 接收到消息，判断应用程序已被拉起
            String params = intent.getStringExtra("params");
            // 根据参数做相应处理
        }
    }, intentFilter);
}

页面实现

页面监听后端发来的消息，接收消息后表明应用程序已被拉起。以下是一个示例实现：

// 页面代码
window.addEventListener("message", function(event) {
    if (event.origin !== "https://example.com") {
        return;
    }

    // 接收到消息，判断应用程序已被拉起
    if (event.data === "app_launched") {
        // 根据需要做相应处理
    }
});

代码示例：

// 后端代码
@PostMapping("/app/launch")
public void launchApp(@RequestBody String message) {
    // 省略代码
}

// 应用程序代码
@Override
protected void onCreate(Bundle savedInstanceState) {
    // 省略代码
}

// 页面代码
window.addEventListener("message", function(event) {
    // 省略代码
});