IsAppInstallable

[suntong]

https://go-app.dev/reference#Context

// Reports whether the app is installable.
IsAppInstallable() bool

when will it be true?

I've tried on desktop and on my Android phone, neither is true.

[mlctrez]

Of these three options, only the after 1 second option produces the desired result.

func (r *Root) OnMount(ctx app.Context) {
	fmt.Println("OnMount (immediate) : ctx.IsAppInstallable()", ctx.IsAppInstallable())

	ctx.Defer(func(context app.Context) {
		fmt.Println("OnMount (Defer) : ctx.IsAppInstallable()", context.IsAppInstallable())
	})

	ctx.After(1*time.Second, func(context app.Context) {
		fmt.Println("OnMount (After) : ctx.IsAppInstallable()", context.IsAppInstallable())
	})
}

//  OnMount (immediate) : ctx.IsAppInstallable() false
//  OnMount (Defer) : ctx.IsAppInstallable() false
//  OnMount (After) : ctx.IsAppInstallable() true

This appears to be a timing issue with the javascript located in app.js not being ready at the time the function is called.

Some logging in the app.js might track down further what is going on.

[mlctrez]

Added some logging to app.js:

So goappWatchForUpdate() in app.js is called first and adds an event listener for beforeinstallprompt :

function goappWatchForUpdate() {
  console.log("app.js: goappWatchForUpdate()")
  window.addEventListener("beforeinstallprompt", (e) => {
    console.log("app.js: goappWatchForUpdate() window.addEventListener(\"beforeinstallprompt\")")
    e.preventDefault();
    deferredPrompt = e;
    goappOnAppInstallChange();
  });
}

This event listener will set the deferredPrompt variable to the value of the event. goappIsAppInstallable() checks this variable:

function goappIsAppInstallable() {
  console.log("app.js: goappIsAppInstallable()")
  console.log("app.js: goappIsAppInstallable() deferredPrompt!=null", deferredPrompt != null)
  return !goappIsAppInstalled() && deferredPrompt != null;
}

So effectively IsAppInstallable should only be checked by a component that implements app.AppInstaller :

var _ app.AppInstaller = (*InstallButton)(nil)

type InstallButton struct {
	app.Compo
	installable bool
}

func (i *InstallButton) OnAppInstallChange(ctx app.Context) {
	i.installable = ctx.IsAppInstallable()
}

func (i *InstallButton) Render() app.UI {
	return app.Button().Disabled(!i.installable).Text("install").
		OnClick(func(ctx app.Context, e app.Event) {
			ctx.ShowAppInstallPrompt()
		})
}

[suntong]

Bravo! Thanks a lot!

This is me trying to add above

However, when I tried it on my Android phone, the install button is still greyed out.

Any way to troubleshoot it myself? How was the log turned on pls?

[mlctrez]

@suntong

Adding the log was a bit complex. I had to copy app.js ( which is generated dynamically by go-app ) into my project and setup a redirect from /app.js to /web/app.js ( my copy ). Then I added log statements to the javascript manually.

If you have an android phone I would suggest using remote-debugging which lets you bring up developer tools and inspect things.

I did just try it right now and the install button was disabled, but a reload causes it to work correctly. There is something odd with /manifest.webmanifest in that it occasionally errors with "error on line 1" and the file is empty.

[suntong]

Hmm.. I did try to reload several time on my Android before reporting back, and I just verified again that reloading will not get the install button to ben enabled on my end, without using remote-debugging.

I think I won't go down the path of enabling remote-debugging or hack app.js myself.
I'll wait until I can verify that things can work out of the box by default then close the issue.

[mlctrez]

One quick thing you can check is see if chrome on android thinks the application is installable.
If that option is not available then the service worker is not getting initialized correctly. https://go-app.dev/install#android

[suntong]

OK, I did a test and found that my chrome on android thinks the application is installable, so the service worker is getting initialized correctly.

[mlctrez]

Did some more testing with debug logging in app.js and go-app :

What I think is happening here is that the execution of app.js and the initialization of the wasm is indeterminate. ( one sometimes happens before the other )

https://mlctrez.github.io/goappdemo/ has the code that @suntong provided, deployed to github pages with some additional debugging added to app.js and go-app app.RunWhenOnBrowser() to determine when function calls are happening.

Changes:

	onAppInstallChange := FuncOf(onAppInstallChange(&disp))
	defer onAppInstallChange.Release()
	Window().Set("goappOnAppInstallChange", onAppInstallChange)
	Log("go-app: set goappOnAppInstallChange")

var log = function (msg) {  console.log("app.js: " + msg) }

log("entry")

var goappNav = function () { log("goappNav stub called") };
var goappOnUpdate = function () { log("goappOnUpdate stub called") };
var goappOnAppInstallChange = function () { log("goappOnAppInstallChange stub called") };

When install status is detected correctly:
app.js: goappWatchForUpdate() is called after go-app has set the function goappOnAppInstallChange

When install status is not detected correctly:
app.js: goappWatchForUpdate() is called before go-app has set the function goappOnAppInstallChange

app.js was modified to log when the stubs at the top are called before being replaced by the wasm code in app.RunWhenOnBrowser():

From the last log, app.js is calling the function goappOnAppInstallChange before the wasm code had a chance to replace it, printing out the "stub" message.

Not sure what the correct solution is here. I've tested code in app.js that waits for go-app to initialize the functions before calling goappWatchForUpdate(). This seems to work on mobile but breaks desktop.