Install Dashboard as an App in FireFox on Android

John_Nadeau · October 25, 2023, 1:40am

In Android, Chrome, I can log into Sharptools.io, select my Dashboard, then in Chrome, 3-Dot Menu, “Add to Home Screen”.

It installs a shortcut on the Home Page of the Phone “as an app”: That is, when you click it, it directly opens the Dashboard I selected (but NOT as additional Tab in Chrome; As its own App).

In contrast, in FireFox, log into Sharptools.io, select my Dashboard, then in FireFox, 3-Dot Menu, “Install”, and it installs an App.

However, in Firefox, when you click it, it opens the SharpTools.io Account Page… It does NOT go directly to the Dashboard I selected.

I know this “App” method works in FireFox for other web apps (like Blue Iris Software).

Is there any way to get FireFox to open the Dashboard I want “directly” from a shortcut on the Android Home Page (not just open the FireFox Browser and create an additional tab) ?

josh · October 25, 2023, 1:50am

I don’t use Firefox, so this is just a general troubleshooting idea: As part of your ‘Install’ process, navigate to your desired dashboard then refresh the page before trying the install option.

John_Nadeau · October 25, 2023, 8:46pm

Good suggestion, that did seem to get it to focus on the desired Dashboard.

But… I’m still not sure what’s going on

ON SOME Dashboards, I get the “Install” option from the FireFox Pull Down Menu, which installs the Dashboard as a Web App (when launching the shortcut, it DOES open the desired Dashboard as a Web App as a separate app… NOT as an additional “Tab” in the FireBox Browser)

Sadly: It does NOT give you the option to “re-name” the Shortcut (all Dashboards installed in this method result in the label "SharpTools.io", regardless of what the Dashboard is named). Perhaps that is something for FireFox to address/fix/enhance like Chrome does below.

Note: This is in Sharp Contrast to how Chrome allows an “Add to Home Screen”, then prompts for a “Name”, then installs as a Web App, which opens the desired Dashboard Directly.

THIS IS HOW FIREFOX INSTALLS A WEB APP TO THE HOME SCREEN:

THEN ON OTHER Dashboards, FireFox “picks up” the name of the Dashboard and adds it to the Shortcut Icon (but you can’t rename it like in chrome). HOWEVER, the resulting shortcut results in it being launched as an additional Tab in FireFox (NOT a separate Web App).

So what is different in each of the Dashboards that allows “some” to be installed by FireFox as Web Apps, but NOT pick up the “name” of the Dashboard, while others get installed basically as shortcuts to New Tabs in FireFox (and they pick up the Name of the Dashboard)???

One thing I tried/tested was start creating a new version of the offending Dashboards from scratch: Interestingly, THAT NEW TEST DASHBOARD DID INSTALL AS A WEB APP.

So Josh, if you got this far Could it be something in Dashboards created circa Feb 2023 vs newly created dashboards that’s causing older ones to install as Shortcuts to Tabs, rather than as Web Apps ??? I did try clearing my Browser History & Cache, as well as “re-saved” my offending Dashboard, but it didn’t make a difference.

josh · October 25, 2023, 10:13pm

There shouldn’t be. They all run on the same codebase.

John_Nadeau · October 25, 2023, 10:21pm

So what do you think…

If I recreate the offending Dashboard, Tile for Tile, Setting for Setting, can you compare the code and see why the Old/Original Dashboard is not playing nice as a Web App in FireFox?

josh · October 25, 2023, 10:24pm

Why not use Chrome if it works?

John_Nadeau · October 25, 2023, 10:31pm

Ahhh… fair question!

I have some friends/family that don’t like Chrome and prefer FireFox

Was hoping to get it working for them too!

John_Nadeau · October 25, 2023, 11:49pm

@josh I thank you for your infinite patience in brainstorming these things!!!

Background:

I created an exact replica of the offending Dashboard.
It worked perfectly when I installed it as a Web App in FireFox, whereas the original Dashboard did not.
I did look at the Source Code for each Dashboard, but WinDiff showed they were 100% identical.
I had cleared all of the browser history & cache.

MYSTERY SOLVED:
I had an old/existing shortcut to the original/offending Dashboard using FireFox’s PRIOR method of “Add To Home Screen” (FireFox was updated at some point for the “Install” as a Web App, rather than “Add to Home Screen”.)

I removed that old existing/shortcut, installed it as a Web App, and it RUNS AS A WEB APP (instead of a Tab in FireFox). I’m guessing/betting that it was picking up that old/existing shortcut and loading as a Tab, instead of a Web App.

John_Nadeau · October 26, 2023, 10:45am

Anyone coming across the issue of the desired/chosen Dashboard not displaying after you Install a Shortcut on the Home Screen… Two Things:

Remove any existing Shortcuts to the desired/chosen Dashboard that you may have previously created.
Go back to @josh 's suggestion of refreshing the Dashboard before trying the Install option. Otherwise, your Shortcut can lead you to the SharpTools Account Page, rather than the Dashboard you wanted:

Another Finer Point regarding the differences between “Install” vs “Add to Home Screen” in FireFox Android:

In FireFox:

If you have a standard HTTP Video Stream in a Dashboard, it will ONLY allow you to “Add to Home Screen”.
If you have an HTTPS Video Stream in a Dashboard, it will ONLY allow you to “Install” as a Web App.

In Chrome:

It will ONLY have ONE Option: “Add to Home Screen” and will install as a Web App.
Of course, any NON-HTTPS tiles won’t display properly in Chrome

One More Point: In Chrome, Installing as a Web App actually drops a Shortcut into your ALL APPS page, where you can copy/paste the Shortcut and use it in multiple places on your phone. Whereas FireFox does NOT currently place any Shortcuts into your All Apps page.

John_Nadeau · October 27, 2023, 12:08pm

Just dropped a question in the Mozilla/FireFox Support Group. Let’s see if someone there can add context… or provide “hope”

* Option to Rename Shortcut While Installing Web App (as Add to Home Screen behaves)

John_Nadeau · October 28, 2023, 1:51pm

Morning @josh

I’m not hearing anything back from the Mozilla/FireFox Support Group yet.

See screenshots below…

BOTH FireFox and Chrome are grabbing “SharpTools . io” as the default name when “Installing” a Web App.

Chrome pops up with an option to rename the Shortcut, while FireFox (currently) does not.

Question for you: Is there any way for you to modify your code to pass the “Name of the Dashboard” to the place/variable that the WebApp is grabbing it from (rather than “Sharptools . io” ) ?

This would eliminate the need to rename in Chrome, and solve the problem for FireFox creating every Web App Shortcut as “SharpTools . io”

CHROME POP UP - OPTION TO RENAME:

FIREFOX POP UP - NO OPTION TO RENAME:

josh · October 29, 2023, 6:15pm

Can you help me understand the use-case? The idea around ‘Add to Homescreen’, also called ‘Install’ in some browsers, is that you are installing a copy of SharpTools.io as an ‘app’.

Since we don’t implement all of the PWA features quite yet, we aren’t specifying a fixed ‘Start URL’ which is required by the PWA spec. If anything, as we add more PWA features and become spec compliant, it would become less likely that you could ‘install’ multiple copies of the same app.

Instead, PWA features are intended to make it so you can install a website like an app on your device. So as we add more PWA features, we would likely need to add some enrichments like being able to specify your own favorite dashboard to load when you open the ‘app’. So a common approach would be to have a single dashboard that acts like your ‘menu’ that you could then open additional dashboards from.

I guess the short version of it is we don’t plan on adding features that would take us in the opposite direction of being PWA spec compliant. That being said, I’m still interested in understanding your use-case to understand what option that fit within the official PWA spec might meet your needs or what workarounds we might need to consider.

John_Nadeau · October 29, 2023, 7:03pm

Thanks @josh !!!

I’ll certainly do my best

The idea is that I’ll share different Dashboards with different people for different reasons.

To aid in the convenience & use of the Dashboard, I prefer to help them get a Web App Shortcut (properly named & arranged) on their Home Screen.

Currently, if they use/prefer Firefox, all Dashboards appear as SharpTools .io, so it’s confusing at best which one they are opening.

Chrome is a step better, as it allows the renaming at creation time, but it adds another step (can’t tell you how many times someone clicked “add” without first renaming it).

They in the end might have 2 or 3 different Dashboards on their Home Screen that are arranged & properly named for easy/direct one-click access.

I was able to do this with the Blue Iris Web User Interface on two different servers and it’s very nice. The Blue Iris Web Interface, it would seem, is passing information from each separate server to be included as part of the Web App Name. This was true in BOTH Chrome & FireFox (I didn’t have to rename either). I did find "<title>Le Lac UI3</title>‘’ and "<title>NAS UI3</title>‘’ in their respective Desktop Versions in Chrome/View Page Source.

I “installed” them as Web Apps on the Desktop version of Chrome, which resulted in these shortcuts (without renaming them):

Here’s a screen shot of each Web App near their respective browsers in Android:

Is it possible to pass the desired page, whether it’s the " sharptools .io/user", or " sharptools .io/dashboard", or the specific Dashboard View " sharptools .io/dashboard/view/XXXXxxxXXX" as the name of the Dashboard?

In that Blue Iris appears to do it, and in that I’m able to save separate Dashboard Views as Home Screen Shortcuts (and they launch directly to the desired dashboard), it would seem there may be that ability in the PWA spec (but that may be me being hopeful).

Thanks again!

John_Nadeau · November 1, 2023, 12:13pm

Update:

As mentioned, I dropped a post into the FireFox Community…
which recommended that I drop an Idea into Mozilla Connect.

Anyone wanted this same functionality in FireFox Android, feel free to chime in at both links above

I’ll report back if I hear anything further.

Obviously, if FireFox implements the option to Rename a Shortcut when Installing a Web App (as they already have for Adding Shortcuts to Home Page), that would solve the problem nicely.

Let me know if you see any approaches from within SharpTools.