📲 Frappe, ERPNext quick & easy Mobile App - tested & working

Frappe Framework
, , , ,
1

Dear Frappe Community,

As I was looking to have ERPNext inside a mobile app on Android or iOS, I finally found this quick and easy solution without the need to edit any source code or create a custom app. There’s no need for any static manifest file in the ERPNext or any other app source code, or even an additional settings page. This way, the admin has full flexibility to style and configure the app freely.

Requirements

  1. A logo for your app
  2. A manifest.json file for your app

How-To

  1. Upload a SVG logo as a public file on your instance and get the public URL of that logo.
  2. Create a manifest.json file in the following format (You may customize it):
{
    "name": "ERPNext Mobile",
    "short_name": "ERPNext",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#000000",
    "theme_color": "#000000",
    "description": "Mobile APP PWA for ERPNext / Frappe",
    "categories": [
      "business",
      "productivity",
      "utilities"
    ],
    "icons": [
      {
        "src": "/files/logo.svg", # Path of your uploaded Logo from step 1
        "sizes": "48x48 72x72 96x96 128x128 256x256 512x512",
        "type": "image/svg+xml",
        "purpose": "any"
      }
    ],
    "id": "erpnext",
    "dir": "auto",
    "lang": "en",
    "orientation": "any",
    "prefer_related_applications": false,
    "handle_links": "preferred",
    "launch_handler": {
    "client_mode": "navigate-existing"
    },
    "shortcuts": [
  {
    "name": "Todo",
    "url": "/app/todo",
    "description": "Todo List",
    "icons": [
        {
          "src": "/files/logo.svg",
          "type": "image/svg+xml",
          "purpose": "any"
        }
      ]
  },
  {
    "name": "Tasks",
    "url": "/app/task",
    "description": "Tasks List",
    "icons": [
        {
          "src": "/files/logo.svg",
          "type": "image/svg+xml",
          "purpose": "any"
        }
      ]
  }
]
  }
  1. Upload your manifest.json file as a public file to your Frappe/ERPNext instance and copy its URL.
  2. Go to Website Settings and head to the Header, Robots section.
  3. Paste the following in your head section and ensure the URL of your manifest.json file is accessible on your instance, even when you are not logged in.
<!-- Link to the manifest file -->
<link rel="manifest" href="/files/manifest.json">

:white_check_mark:Now when you log out, you will have the install option on every major browser to install your Frappe/ERPNext site as a PWA.

Create a Real Mobile App from That

You have many choices to create a real installable app using the PWA as a base. The easiest way is to head over to PWA Builder, enter your Frappe URL, and then download the package for your platform to install.

Further Functionality Needed! Please help!

Does anyone have an idea to create a Service Worker to get notifications, even when the app is not in focus? That would be nice.

Tags: ERPNext, Frappe, PWA, Progressive Web App, Mobile App, Android, iOS, manifest.json

16 Likes
2

Thank you so much for sharing your findings!

3

Is it possible to get screenshot of the same? Or a video before I try on the site? Will this work on a Frappe cloud site as well?

4

There is really no risk when you try this, as you do not edit any sourcecode.
Just follow the instructions above and your fine.

To test the functionality, just install any other pwa like https://www.pwabuilder.com/ site directly. And yes it should work on Frappe Cloud site as well.

5

Thanks. I tried it… i logged out and tried opening the manifest and logo file. both are publicly accessible. Updated the header section of robots in website settings.

But I don’t get the option on Chrome on android for PWA.

6

Are you aware how Chrome is able to create PWA of any frappe site on my Mac (and I believe Windows too) without this manifest file?
But why the same chrome browser cannot do this on mobile?

7

The mobile version, does not actively offer that option to you.
You need to check the menu “Add to Home” or similar, then you get the install option.

8

I just followed these instructions on my public site but no luck. BUT then i released i had the HR app installs and you can’t have more than one app from the base url!!! Trick for young players

1 Like
9

On mobile when clicking the Add to Home option, it simply creates a shortcut which only launches the website on the browser. Not in PWA form. Please advise how to fix this?

All my other frappe cloud sites let me create an app on desktop even without making the above mentioned manifest files etc.

10

That (not being able to run multiple apps) doesn’t seem to be the case on iPhones I guess because we’ve been using Raven + HR PWAs for months now.

I think @blaggacao reported this earlier and this might be happening only on some Android phones? At this point I’ve completely given up on PWAs since the implementations by the two big companies (Apple and Google) is terrible and inconsistent to say the least :frowning:

4 Likes