UI3 on Google Pixel 10 Chrome Browser

B

bbdude

n3wb
Oct 19, 2020
14
0
Auburn, WA
I recently replaced my Samsung S21 FE 5G cell phone with a Google Pixel 10 Pro. I got all of my Apps ported over and installed on the new Pixel 10, included the Blue Iris App and I am running UI3 on the Chrome browser (as I did on the older phone). I also created a standalone shortcut icon for the UI3 website by using the Add to Home Screen Chrome option (again same as old phone). With the old phone S21 when UI3 was invoked via the shortcut, there is no Chrome address bar on the window thus making more of the screen available for UI3. With the new Pixel 10 phone there is no option (that I am aware-of) to hide the Chrome address bar, thus I lose about 30% of the screen space, making UI3 much smaller and harder to operate.

Anyone using a Pixel 10 or other Android phone that has solved this problem of wasteful Chrome address bar when using UI3 ?
 
That is probably a "security feature". You probably need to set up HTTPS and be connected with that before you add UI3 to the home screen. I'm not sure if you will need a trusted certificate (like from LetsEncrypt) or if you can get away with a self-signed one.

You can set up HTTPS through Blue Iris natively if you're running Blue Iris 6, although it will not help you with automating a LetsEncrypt certificate. Otherwise you will need to set up a reverse proxy server to handle HTTPS.
 
Thanks for your reply bp2008. I do have a couple of other websites (not related to Blue Iris) with https: url's, that I visit often and have setup shortcuts on my Pixel 10. These also show the address bar at the top of the Chrome window, so I'm not sure that using https will fix this. Just curious, do you have a cell phone you use to access Blue Iris via UI3 and if so does your browser not show the address bar?
 
I was curious about this as well. Here's a ChatGPT TL-DR style explanation for the different Home screen shortcut behaviors by your devices.
For technical details, here's the full chat.

====
Why this happens (and how to fix it):
On Google Pixel phones, a home-screen shortcut only opens full-screen if the website is set up as a Progressive Web App (PWA). Older Samsung phones were more lenient and often hid the address bar anyway. If the site owner adds the standard PWA setup, Pixels will treat it like an app; if not, the address bar stays by design. Users can’t change this themselves.
 
Last edited:
Wow ! Thank you jaydeel for the very comprehensive answer. I read the chatgpt thread you linked. It will take me a bit longer to digest it. I wonder if Blue Iris 6 will eventually add the needed capability to the UI3 web server?
 
bbdude said:
Thanks for your reply bp2008. I do have a couple of other websites (not related to Blue Iris) with https: url's, that I visit often and have setup shortcuts on my Pixel 10. These also show the address bar at the top of the Chrome window, so I'm not sure that using https will fix this. Just curious, do you have a cell phone you use to access Blue Iris via UI3 and if so does your browser not show the address bar?
Click to expand...
Yes, I use a Pixel Fold. If UI3 is served by unencrypted HTTP, all I get is the option to add a shortcut to the home screen, and that just opens the regular Chrome browser.

However if UI3 is served with HTTPS then I get the option to "Install" it which only then uses the PWA (progressive web app) mode and has no address bar.

I do remember my older samsung phones being more lenient about this like the AI said. On samsung phones (at least older ones) I think I used to be able to use the full PWA mode without needing HTTPS.


jaydeel said:
It might be possible to fix this yourself by editing the ui3-local-overrides.js and manifest.json files, and adding a service worker sw.js file. But @bp2008 needs to weigh in.
Click to expand...
UI3 already has a service worker file.
 
Thanks again bp2008. Ok, so if I update my server PC from Blue Iris 5 to Blue Iris 6, then it will serve UI3 with HTTPS. Will I then have the "Install" option from the Chrome browser for the UI3 website or do I have to do something additional on my Pixel 10 before I can Install as a PWA? I think you mentioned a LetsEncrypt certificate. Is that needed? BTW, I tried on my Pixel 10 Chrome going to another website that had an https: url and looked at the 3 dot menu at top right and did not see an "Install" option. Is that the correct menu in Chrome to do an "Install"?
 
Looks like a trusted certificate is needed (letsencrypt is one way to get that).

The menu item is still "Add to Home screen" but when you select it you get the install option.

You can try adding this test site to your home screen to see how it works: standalone PWA Display Test

Anyway BI 6 is not needed to use HTTPS, and in fact I bet you would have trouble getting letsencrypt to work with BI6's native HTTPS server due to the domain validation process not being tested and supported by the BI developer. I'd actually be surprised it it worked. I recommend getting a reverse proxy server instead for adding HTTPS support.
 
bp2008 said:
On samsung phones (at least older ones) I think I used to be able to use the full PWA mode without needing HTTPS.
Click to expand...
This has been the default on every Samsung Galaxy I've owned (S9 to S24+).

BTW, I've often found PWA mode annoying when I really want to have access to the URL to modify HTTP query parameters on the fly. To accomplish this I must either open the URL via a Chrome bookmark (highly inefficient!), or try using an app, like 'HTTP Requests Shortcuts' to create the desired shortcut.
 
Last edited:
  • Like
  • Wow
Reactions: bp2008 and Techie007L
bp2008 said:
That is probably a "security feature". You probably need to set up HTTPS and be connected with that before you add UI3 to the home screen. I'm not sure if you will need a trusted certificate (like from LetsEncrypt) or if you can get away with a self-signed one.
Click to expand...
It didn't work for me when I tried the Blue Iris 6 self-signed certificate HTTPS mode with Chrome on Samsung Galaxy S21 Ultra running Android 15—it just gave me the "Create shortcut" option, not the "Install" option. Opening the created shortcut opened a new Chrome tab and stopped me with a warning about the self-signed certificate. Continuing anyway opened UI3, with the address bar always visible having a red X on it.

Speaking of shortcuts, I've always had this problem with the UI3 shortcuts on Android: Invariably, they just disappear. I have other web apps/shortcuts that this never happens with, just UI3. Multiple devices, multiple sites.
 
  • Sad
Reactions: bp2008
Ok bp2008 thanks for your help on this. I brought-up this thread on my Pixel 10 Chrome, tapped on your standalone PWA Display Test link, tapped the 3 dot menu, Add to Home Screen, and I was given the option to Install the standalone PWA App. This did install the App. I drug it from the App drawer to Home screen and tapped the App. When the App comes-up I see no address bar and at the top of the screen I see a title "PWA Display Test". Below the title across the top, I see fullscreen, standalone, minimal-ui, and browser buttons, with standalone underlined. In the center of the screen, I see "Manifest display mode: standalone", the next line says "Actual display mode: standalone. tapping on of the buttons at top fullscreen, standalone, minimal-ui, and browser buttons at top gives me an address bar on all but the standalone option. With the address bar displayed, the rest of the display is refit to the remaining smaller window. So if I understand the purpose of this test, I think it does show that the website (as an App) can be displayed full screen, without address bar, in standalone mode. So how can I use this capability with the Blue Iris UI3 server PC -> to my Pixel 10 as an App?
 
Last edited:
bbdude said:
Ok bp2008 thanks for your help on this. I brought-up this thread on my Pixel 10 Chrome, tapped on your standalone PWA Display Test link, tapped the 3 dot menu, Add to Home Screen, and I was given the option to Install the standalone PWA App. This did install the App. I drug it from the App drawer to Home screen and tapped the App. When the App comes-up I see no address bar and at the top of the screen I see a title "PWA Display Test". Below the title across the top, I see fullscreen, standalone, minimal-ui, and browser buttons, with standalone underlined. In the center of the screen, I see "Manifest display mode: standalone", the next line says "Actual display mode: standalone. tapping on of the buttons at top fullscreen, standalone, minimal-ui, and browser buttons at top gives me an address bar on all but the standalone option. With the address bar displayed, the rest of the display is refit to the remaining smaller window. So if I understand the purpose of this test, I think it does show that the website (as an App) can be displayed full screen, without address bar, in standalone mode. So how can I use this capability with the Blue Iris UI3 server PC -> to my Pixel 10 as an App?
Click to expand...
You need to load UI3 using HTTPS with a trusted certificate. Then you'll be able to install it the same way as that PWA Display Test app, and avoid having the address bar wasting space.
 
Ok bp2008 since I'm not exactly a networking guru and definitely not a cell phone guru, can you walk me through the steps I will need to take on the Blue Iris 5 Host PC and on my Pixel 10 to get UI3 loaded as an HTTPS with a trusted certificate? Thanks

I edited this post to add a little more about my current Blue Iris server setup and my typical use cases.

I have a VPN setup on my Netgear R9000 router. When I access Blue Iris at home, in addition to using my cell phone / Chrome / UI3, with WiFi to my LAN (Netgear R9000 WiFi router), I also use a PC / Windows 11 / Edge / UI3, also on the home LAN (not the dedicated Blue Iris PC). With Edge, I get an address bar on the browser, but not a problem because I have a big monitor with a lot of screen realestate. When I access Blue Iris, using my cell phone, away from home, I use OpenVPN. Also I have a DDNS, setup, piggybacking on the netgear.com domain and using NoIP to keep my external IP address updated.

So would the above use cases, work the same when accessing the https UI3 website?

Lastly, I think I understood from your previous posts on this that I will probably want to use LetsEncrypt to generate a trusted certificate. If I do that would that be compatible with my existing VPN, DDNS, and use cases? I know - a lot of questions sorry.
 
Last edited:
Since you are using a VPN, that means you are not accessing via a public IP, which makes it much more difficult to get a LetsEncrypt certificate to work. I think you should try getting your phone to trust a self-signed certificate instead. You can use any of a number of tools to create one, but I have built a tool with a graphical interface here, which makes it easier I think than most others which expect you to use a command line. GitHub - bp2008/SSL-Certificate-Maker: A graphical tool for generating SSL certificates without any prior knowledge. Can be used as your own private certificate authority.

  1. Download SSLCertificateMaker.exe from github.
  2. Run it
  3. In the "domain names" section, type any and all IP addresses and host names you use to open Blue Iris in a web browser (one address per line).
  4. Click Make Certificate at the bottom. This creates a .pfx file containing the certificate and its private key.
  5. Use the Convert menu at the top to convert the .pfx file into .cer and .key files.
  6. Find the files you just created in the folder named CERT which will be next to the SSLCertificateMaker.exe program.
  7. Copy the .pfx file to the Blue Iris server and put it somewhere Blue Iris can reach it. Such as in your Documents folder.
  8. Configure Blue Iris's web server to enable HTTPS (easiest if you use port 443, then you don't have to type a port number in the URL) and use that pfx file for the certificate. The pfx file has no password when created by that tool I linked.
  9. Make sure Windows Defender Firewall on the Blue Iris machine is configured to allow inbound traffic on TCP port 443.
  10. Copy the .cer file onto your android phone.
  11. In the Settings app, search for "Install a certificate" and use that feature to install the .cer file you created.
  12. Load UI3 from an https:// URL. It SHOULD NOT show a certificate warning page. In theory. I have not actually tried using a self-signed certificate on Android, so good luck.
  13. Add UI3 to home screen. It should offer the Install option.
 
  • Like
Reactions: looney2ns, jaydeel and jrbeddow
bbdude said:
So would the above use cases, work the same when accessing the https UI3 website?
Click to expand...
Yes, once it is all set up, basically the only difference when you switch to using https is the addition of the letter s in the URL, and maybe a different port number has to be entered in the URL.
Your UI3 settings will start over completely new because the web origin is different with HTTPS than it is with HTTP, so if you had a lot of UI3 settings changed, you will want to use the export and import functions which you can find in the storageinfo page linked at the bottom of the UI Settings panel.
 
  • Like
Reactions: looney2ns and jrbeddow
Great work bp2008. You have an amazing amount of knowledge and expertise on website and networking technology. I will try this. In addition to using the Pixel 10 cell phone away from home to access BI / UI3 using my VPN, I also use the Pixel 10 at home, without VPN, accessing UI3 with a LAN IP address. Similarly, I use a PC (not the dedicated Blue Iris PC), also on the home LAN local IP address, running Windows 11 Edge browser to access UI3. So, would those use cases work the same with the new https url? Would I need to add the .cer file to that PC running the UI3 client? You also mentioned a .key file. Does that need to be placed in any particular directory on the server PC, or client PC, or cell phone?

I was just remembering the comment above by jaydeel that Samsung Galaxy cell phones continue to create Chrome shortcuts without the address bar (like my old S21 did). Makes me tempted to trade in my brand new Pixel 10 for an S25 or S26. Crazy way to spend money I know but it's a thought.
 
Yes HTTPS will work on all machines. They will need to trust the certificate in order to avoid warnings when connecting. This tool I made can help with that on Windows. GitHub - bp2008/CertTrustManager: A simple Windows program which can hold an embedded SSL/TLS certificate (.cer file) and provides a button to trust or untrust that certificate.

The .key file contains only the private key, which is only useful for a web server wanting to use the certificate for its own HTTPS server.
.cer, .pem, .crt, and .key files (which are all actually just the "pem" format with different file extensions) are commonly used on linux.
.pfx files (which contain both public and private keys) are more commonly used by Windows programs (hence why Blue Iris uses them).

You don't need them in a particular directory on Windows or on Android; you just have to tell the OS to trust them. If you were running other linux clients you'd have to put them in a special directory and then run a certain console command to trust them.
 
Another question bp2008 - Does the encryption used by the https server and decryption in the client affect overall performance? Is the video data also encrypted? I was under the impression that a VPN also encrypts, so would https via VPN be double encrypting?
 
You must log in or register to reply here.
Top Bottom