How will Twitch Embed updates affect mobile app embeds?

API
43

I was able to make this solution work for iOS and Android. In case it is helpful, let me share how I set up the tests.

The first thing I did was create an index.html file with the following code and uploaded it to my website. I’ll change the domain for the example to be mywebsite.com and the embed is therefore viewable at https://mywebsite.com/embed.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
  <iframe src="https://player.twitch.tv/?channel=insomniac&parent=mywebsite.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>
</body>
</html>

To show this Twitch embed in iOS, I have a ContentView.swift file with the main struct defines like this:

struct ContentView: View {
    var body: some View {
        Webview(url: URL(string: "https://mywebsite.com/embed")!)
    }
}

Then I have the scene function in the scene delegate defined as seen below. That displays the Twitch embed as expected when opening the iOS phone simulator.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {

    let contentView = ContentView()

    if let windowScene = scene as? UIWindowScene {
        let window = UIWindow(windowScene: windowScene)
        window.rootViewController = UIHostingController(rootView: contentView)
        self.window = window
        window.makeKeyAndVisible()
    }
}

For Android, I tried the example using Kotlin and API level 28. In my MainActivity.kt onCreate function, I set up a WebView like this, though removed a lot of settings for the sake of this post:

mWebView = findViewById<View>(R.id.webview) as WebView
mWebView.loadUrl("https://mywebsite.com/embed")

This displayed the Twitch embed in the WebView as expected on my virtual Pixel 3a that I set up for running the application.

2 Likes