BGA WebView App
Posted: 16 August 2024, 13:33
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:
As a proof of concept, I could build a small app that injects this function on my playerTurn:
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.
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!
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;
}
},Code: Select all
window.WebViewBridge.send(JSON.stringify({ PlayerId: xxx, GameId: 1234, Event: "activeplayer" }));
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")
}
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!