pfSense

Because pfSense GUI is mobile responsive you can use a mobile to perform actions in the GUI which is nice but a few people have asked for an Android App.

There is a halfway house - APP via a manifest.¶

What happens is that when you go to the website with a manifest you have the option of 'installing' the website as an APP when browsing on chrome on a mobile phone. This creates an APP shortcut and then when you use the app shortcut the website is loaded and it looks like an app with no address bar etc..

This is not the same as 'Add to home screen'

It would only take a few lines of code to get this working and I think the realfavicongenerator creates this for you. I would also make sure your icon is large enough and is the correct type.

Links¶

It has been a while since I set this up on https://quantumwarp.com/ but here as some links/notes

• https://quantumwarp.com/kb/articles/31-media/936-my-realfavicongenerator-notes
  • see the Favicon for Android Chrome section
  • Standalone option loads your website, after displaying a splash screen but without the navigation bars. This gives the illusion of an application. This is run in android like a separate application and not through your browser. It is all controlled through a site.webmanifest file which has to be declared in your header. The splash screen shows your logo and site description.
• Favicon / Manifest Generator
  • https://realfavicongenerator.net/
  • https://realfavicongenerator.net/favicon_checker?protocol=https&site=quantumwarp.com
• Manifest links
  • https://web.dev/add-manifest/
  • https://github.com/OneSignal/OneSignal-Website-SDK/issues/332
  • https://github.com/RealFaviconGenerator/realfavicongenerator/issues/342
  • https://developer.mozilla.org/en-US/docs/Web/Manifest
  • https://developer.mozilla.org/en-US/docs/Web/Manifest
  • https://w3c.github.io/manifest/

Example Code¶

In the index.php or global header

<link rel="manifest" href="/site.webmanifest">

The manifest file - https://yourwebsite.com/site.webmanifest

{
    "name": "Quantum Warp",
    "short_name": "Quantum Warp",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png" 
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png" 
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "start_url": "https://quantumwarp.com",
    "display": "standalone",
    "gcm_sender_id": "123456789012" 
}

Android Screenshots¶

Add to home screen

Install App from website

Installed

App Shortcut

Splashscreen

Website as an APP