BGA WebView App

[golangnerd]

Hi everyone!

First-time poster here, and I've got an inspiration that's got me excited. I apologize for the extreme lengthy post (here's the TLDR in pastebin), but bear with me because I think it's worth discussing.

I believe these posts are kind of what I am talking about, but maybe there have been other people discussing native app full screen web browser before.

I've never officially published an app solo end to end, but I'm proficient in languages like Golang outside of the PHP we write for our favorite board games on this platform, so strict languages on native comes fairly naturally. I've contributed to apps using React Native and WebView with a JavaScript bridge for message passing. In our app, we don't use push notifications, so I'm not fully versed in how they're set up in React Native or similar projects supporting both Android and iOS. I have a potential solution to enhance our gaming experience.

Imagine if we could deliver web bridge messages during each player's turn, triggering true native push notifications for any game table a player is at. This way, gamers receive real-time updates when it's their turn. We'd still keep email notifications as usual but add a slick, full-screen web browser app that maintains background app refreshes to keep WebSockets active on BGA.

Has anyone discussed this with the website owners or developers? I understand they might be hesitant about the costs of "your turn" text messages, but push notifications are a fantastic alternative. Gamers would love to see real-time updates on both live and turn-based games on both their IOS and Android tablets or phones.

As a user, I don't believe the core Javascript of BGA is a true PWA setup for browser notifications, as they just use the standard button and sound on a real-time game you don't need an additional popup. But where the native app comes into play is phone or tablet or even turn-based games during my day. I sometimes don't check email and would love a push notification with priority and even badges natively!

I've already got my first working game on here (lockandchain) and could create a proof of concept by injecting this function on my playerTurn state:

Code: Select all

    onEnteringState: function (stateName, args) {
      console.log("Entering state: " + stateName);

      switch (stateName) {
        case "playerTurn":
          this.updatePlayerColors(args.args.players);
          this.updateBoardState(args.args.locks);
          if (this.isCurrentPlayerActive()) {
            dojo.style("confirm_button", "display", "inline-block");
          } else {
            dojo.style("confirm_button", "display", "none");
          }
          break;
      }
    },

As a proof of concept, I could build a small app that injects this function on my playerTurn:

Code: Select all

window.WebViewBridge.send(JSON.stringify({ PlayerId: xxx, GameId: 1234, Event: "activeplayer" }));

And maybe setup a web view in kotlin or ios either through native separate apps or react native. Either way the code cant be that complex at all once the javascript pipeline is setup in an example app.

Code: Select all

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="1px" />
        

Code: Select all

    fun initializeWebView() {
        var webView: WebView = findViewById(R.id.webview)
        var loadingView: LinearLayout = findViewById(R.id.loading)
        var unavailableReconnecting: LinearLayout = findViewById(R.id.unavailableReconnecting)
        var maxAttempts: LinearLayout = findViewById(R.id.maxAttempts)

        webView.webViewClient = object : WebViewClient() {
            var hasError = false

            override fun onReceivedSslError(
                view: WebView?,
                handler: SslErrorHandler,
                error: SslError?
            ) {
                handler.proceed() // Ignore SSL certificate errors and proceed
            }

            override fun shouldOverrideUrlLoading(
                view: WebView?,
                request: WebResourceRequest?
            ): Boolean {
                return super.shouldOverrideUrlLoading(view, request)
            }

            override fun onReceivedError(
                view: WebView?,
                request: WebResourceRequest?,
                error: WebResourceError?
            ) {
                super.onReceivedError(view, request, error)
                Thread.sleep(2000)
                hasWebError = true
            }

            override fun onPageFinished(view: WebView, url: String) {
                // on page load of HTML, fire anything in kotlin such as hiding a loader or a native component
                //webView.visibility = View.VISIBLE
                //loadingView.visibility = View.INVISIBLE
            }
        }

        webView.settings.javaScriptEnabled = true
        webView.settings.domStorageEnabled = true
        webView.settings.databaseEnabled = true

        webView.setOnTouchListener { _, event ->
            when (event.action) {
                MotionEvent.ACTION_DOWN -> {
                     // do stuff later
                }
            }
            false // Return true to indicate that the listener has consumed the event
        }

        var jsi: JavaScriptInterface = JavaScriptInterface(webView, led, applicationContext)
        webView.addJavascriptInterface(jsi, "WebViewBridge")
    }

Later, we could involve the BGA owners and get them to call similar code during any state with "type" => "activeplayer" or multiplayer mode active. They could trigger the event so implementers don't need to handle it in the base Dojo app.

I’m looking for guidance and collaboration. I have a modern Kotlin app example, and Android is easier for me since I don't pay for Apple iOS. An APK would be perfect to email the BGA owners for proof of concept. The goal is to show a working "your turn" notification with background refreshes.

Does anyone have experience setting up a modern Kotlin app with notifications and handling deep sleep on Android who wants to contribute? Our board game fanbase would love a native app, even though it's just a website. Faster turnarounds on any game would be a hit!

And if you read this much and know IOS I could use help on writing native too unless people know of good webview notification examples on github I can look at for my concept.

I realize Android users can utilize Chrome with a PWA install as an app and push notifications work ok? I haven't tested this on live games. But with IOS that is not possible at this time and frankly, I have maintained another native IOS app: https://solemomentsclub.com which is also a native IOS app built from pwabuilder.com and a webview, but it was insane what we had to do to get notifications working in ios on a pwa. And knowing that BGA is not a true PWA with true notifications hooked in. I would think maybe a JS bridge message can simply send one in a native IOS websocket that is alive through a background refresh, but I may be wrong. I've only been a BGA member for 6 months so I only know so much about the platform.

Cheers!

[quietmint]

Er, are you aware BGA already supports real-time push notifications for both desktop and mobile browser, and already has a web-view app? (If you have the web-view app installed, clicking the notification launches it already)

https://boardgamearena.com/preferences? ... ifications

[sm11963]

Is the existing WebView app only for Android? Following that link on iOS (either Chrome or Safari), I just get “Sorry, web push notifications are not supported on your browser.”

[quietmint]

Browser notifications should work almost everywhere that Google Chrome works. I know for sure it works on both Windows and Mac OS computers, and on Android mobile. I never tried on iPhone or other browsers besides Chrome.

Once you get to that page, you might need to allow notifications for the BGA website in specific by clicking the settings/"adjust sliders" icon that is displayed on the left side of the address bar in front of the URL.

https://support.google.com/chrome/answer/3220216

[thoun]

Apple force safari engine for all browsers on iOS, so even if you use Chrome on iPhone, you'll have the Safari engine, and the problems that come with it (no support of PWA, and probably not push notifications either)