Moode Forum
moOde App - Add to Home screen & HTTPS - Printable Version

+- Moode Forum (https://moodeaudio.org/forum)
+-- Forum: moOde audio player (https://moodeaudio.org/forum/forumdisplay.php?fid=3)
+--- Forum: Support (https://moodeaudio.org/forum/forumdisplay.php?fid=7)
+--- Thread: moOde App - Add to Home screen & HTTPS (/showthread.php?tid=7303)

Pages: 1 2 3 4 5


moOde App - Add to Home screen & HTTPS - Tim Curtis - 01-13-2025

This is to pick up where we left off late last year regarding the requirement for HTTPS on Android to be able to perform "Add to Home Screen" and make Browser moOde into an app (based on work by @the_bertrum)
https://moodeaudio.org/forum/showthread.php?tid=7169&pid=60294#pid60294

It looks like the following changes are needed to make use of the easy Automatic Cert feature in the Security section of  System Config.

1. Modify the cert template in /var/www/util/gen-cert.sh to specify CA:TRUE
Code:
basicConstraints        = critical, CA:TRUE

2. In /var/www/header.php uncomment / reenable the site.webmanifest file
Code:
    <!--link rel="manifest" href="/site.webmanifest"-->

3. Contents of site.webmanifest (does it need to be modified?)
Code:
{
   "name": "",
   "short_name": "",
   "icons": [
       {
           "src": "/v5-android-chrome-192x192.png",
           "sizes": "192x192",
           "type": "image/png"
       },
       {
           "src": "/v5-android-chrome-512x512.png",
           "sizes": "512x512",
           "type": "image/png"
       }
   ],
   "theme_color": "#ffffff",
   "background_color": "#ffffff",
   "display": "standalone"
}

4. Create step-by-step instructions for installing the cert into Android and IOS Smartphone/Tablet operating systems.

5. Create step-by-step instructions for installing the cert into Desktop Linux/MacOS/Windows operating systems.

Some questions:

1. Whats the purpose of the webmanifest file?
2. Does "Add to Home Screen" on IOS require HTTPS?


RE: moOde App - Add to Home screen & HTTPS - TheOldPresbyope - 01-13-2025

AIUI, the site.webmanifest file isn't absolutely necessary but it helps with the "user experience".

From https://www.w3.org/TR/appmanifest/


Quote: This specification defines a JSON-based file format that provides developers with a centralized place to put metadata associated with a web application. This metadata includes, but is not limited to, the web application's name, links to icons, as well as the preferred URL to open when a user launches the web application. The manifest also allows developers to declare a default screen orientation for their web application, as well as providing the ability to set the display mode for the application (e.g., in fullscreen). Additionally, the manifest allows a developer to "scope" a web application to a URL. This restricts the URLs to which the manifest is applied and provides a means to "deep link" into a web application from other applications.

Using this metadata, user agents can provide developers with means to create user experiences that are more comparable to that of a native application.

I speak as if I were actually good at this front-end stuff but I'm just an over-the-hill hacker.

Regards,
Kent


RE: moOde App - Add to Home screen & HTTPS - the_bertrum - 01-14-2025

(01-13-2025, 05:09 PM)Tim Curtis Wrote: 1. Modify the cert template in /var/www/util/gen-cert.sh to specify CA:TRUE
Code:
basicConstraints        = critical, CA:TRUE
Well, sort of...  This will work but you are turning up at immigration and instead of presenting a passport, you are presenting a document that claims you are the passport office.  Immigration would take you to the police, browsers ask the user if they really want to let this dodgy geezer into the country.  So you will get a warning which you can accept, it works thereafter, but you have been warned.


(01-13-2025, 05:09 PM)Tim Curtis Wrote: 2. In /var/www/header.php uncomment / reenable the site.webmanifest file
Code:
    <!--link rel="manifest" href="/site.webmanifest"-->

3. Contents of site.webmanifest (does it need to be modified?)
Code:
{
   "name": "",
   "short_name": "",
   "icons": [
       {
           "src": "/v5-android-chrome-192x192.png",
           "sizes": "192x192",
           "type": "image/png"
       },
       {
           "src": "/v5-android-chrome-512x512.png",
           "sizes": "512x512",
           "type": "image/png"
       }
   ],
   "theme_color": "#ffffff",
   "background_color": "#ffffff",
   "display": "standalone"
}
I suspect the manifest might have an effect on "Chromium but not Chrome" browsers on Android.  I'll run some tests.  It does work well enough without the manifest however.


(01-13-2025, 05:09 PM)Tim Curtis Wrote: 4. Create step-by-step instructions for installing the cert into Android and IOS Smartphone/Tablet operating systems.

5. Create step-by-step instructions for installing the cert into Desktop Linux/MacOS/Windows operating systems.
I've already got these in my post about setting up a CA. I'll extract them into a document that can be prettied.


(01-13-2025, 05:09 PM)Tim Curtis Wrote: Some questions:

1. Whats the purpose of the webmanifest file?
2. Does "Add to Home Screen" on IOS require HTTPS?
1. As Kent said, it allows some options but I'll test what the actual effect is on my systems.  It isn't essential in order to get a useable solution though.
2. I don't believe it does (for now, they may change their minds later).  My wife won't let me play with her phone to try this out because I broke her email last time I played with certificates and things on it.


RE: moOde App - Add to Home screen & HTTPS - the_bertrum - 01-19-2025

Right, I've done a bit of testing with the webmanifest.  Tl;dr is it makes very little difference, probably best to live without it for now.

What follows is using moOde 9.2.2 on a Pi3A+ with https mode on using certificates issued by a local CA with Android 15 on Pixel 6.

As we have already determined, the main thing is that PWA does not work at all without a secure connection so having a functioning https mode is essential.  It looks like the Firefox browser on Android ignores PWA as well, it will offer an "install" link, but the installation will still just open a tab rather than a full screen app.

Without the webmanifest in place, we have a functional PWA experience in all the browsers I tried other than Firefox.  In Chrome there is an "Install Application" link in the menu, which when activated will install something indistinguishable from "real" apps.  A proper moOde icon, in the app drawer, which launches a full screen standalone app with the moOde interface in it.  Presumably the app is in fact an instance of Chrome.  The other Chromium based browsers are a little different in that rather than a true app, we get more of a shortcut.  It doesn't appear in the drawer with other apps, but is instead just present on the home screen as a moOde icon with the browser that created it in subscript over the top (see image).  It still launches a standalone instance of the browser in full screen though, so it works just as well in the end.  You do also get the chance to rename the shortcut before you add it to the home screen if you wish.

With the webmanifest in place, the experience is very similar except in Chrome you get a prompt to install the app as soon as you visit the moOde UI rather than having to select it from the menu, whereas in the other Chromium based browsers, you still have  to select install from the menu, but now you don't get the option to rename the shortcut.

I have not experimented with other options that can be added to the webmanifest so far.  There maybe things that we could use to add more value to it, I'll do some research.


RE: moOde App - Add to Home screen & HTTPS - Tim Curtis - 01-19-2025

Got it.


RE: moOde App - Add to Home screen & HTTPS - the_bertrum - 01-22-2025

Here's a document with what I know about importing root CA certificates into various locations.  It could do with some other folks testing and contributing.  For example I don't have an MacOS devices, so the import needs testing and there might be extra steps on Safari or other browsers in MacOS I don't know about.  Testing the browsers on Windows would also be useful, does Edge trust the OS store for example?


RE: moOde App - Add to Home screen & HTTPS - TheOldPresbyope - 01-22-2025

(01-22-2025, 05:34 PM)the_bertrum Wrote: Here's a document with what I know about importing root CA certificates into various locations.  It could do with some other folks testing and contributing.  For example I don't have an MacOS devices, so the import needs testing and there might be extra steps on Safari or other browsers in MacOS I don't know about.  Testing the browsers on Windows would also be useful, does Edge trust the OS store for example?

I can test 

- in Win10 and Win11 (they're guest OSes on my Linux box)---Edge, Firefox, Chrome.

- in Android (on a Pixel 6a, but sound's like you already have Android covered)---various browsers

- in iOS (on my iPad and iPhone)---various browsers

Regards,
Kent


RE: moOde App - Add to Home screen & HTTPS - the_bertrum - 01-23-2025

Thanks Kent, it will be good to have my homework marked. Give me a yell if I can clarify anything.


RE: moOde App - Add to Home screen & HTTPS - Permi - 02-24-2025

(01-13-2025, 05:09 PM)Tim Curtis Wrote: This is to pick up where we left off late last year regarding the requirement for HTTPS on Android to be able to perform "Add to Home Screen" and make Browser moOde into an app (based on work by @the_bertrum)
https://moodeaudio.org/forum/showthread.php?tid=7169&pid=60294#pid60294

It looks like the following changes are needed to make use of the easy Automatic Cert feature in the Security section of  System Config.

1. Modify the cert template in /var/www/util/gen-cert.sh to specify CA:TRUE
Code:
basicConstraints        = critical, CA:TRUE

2. In /var/www/header.php uncomment / reenable the site.webmanifest file
Code:
    <!--link rel="manifest" href="/site.webmanifest"-->

3. Contents of site.webmanifest (does it need to be modified?)
Code:
{
   "name": "",
   "short_name": "",
   "icons": [
       {
           "src": "/v5-android-chrome-192x192.png",
           "sizes": "192x192",
           "type": "image/png"
       },
       {
           "src": "/v5-android-chrome-512x512.png",
           "sizes": "512x512",
           "type": "image/png"
       }
   ],
   "theme_color": "#ffffff",
   "background_color": "#ffffff",
   "display": "standalone"
}

4. Create step-by-step instructions for installing the cert into Android and IOS Smartphone/Tablet operating systems.

5. Create step-by-step instructions for installing the cert into Desktop Linux/MacOS/Windows operating systems.

Some questions:

1. Whats the purpose of the webmanifest file?
2. Does "Add to Home Screen" on IOS require HTTPS?

I tried all the steps except cert installation, still same? do we need install cert also ?


RE: moOde App - Add to Home screen & HTTPS - the_bertrum - 02-24-2025

For the add to homescreen to work in Android, you need https enabled on moOde and the cert installed on your phone.

You can either use the automatic certificate generator built into moOde, or create your own CA for managing credentials on your home network (see my related post on doing that).
Either way, you also need to follow the instructions for adding the cert to your phone that are detailed in the document linked in this thread, or in the CA thread mentioned above.

It isn't simple I'm afraid, there are many steps. I found it rewarding though, and the "app" version is much nicer on a phone than inside the browser to my view.