MainCross Installable Webapp (MCiW)
productArticle04 Jun, 2022
Last edited: 07 Feb, 2024, 10:08 AM

MainCross Installable Webapp (MCiW)

Welcome to a magical new app technology - installable in the browser, natively installable on all devices, and continually updated.

The MainCross frontend has been delivered as a webapp from the start - its a complex (and large!) client side app that runs in any browser, and on any device.

While web apps provide a superb user experience, however, they still are somewhat behind the curve as compared to platform-specific applications. #InstallableWebapps bridge the gap between web apps and platform-specific applications.

Introducing the MainCross Installable Webapp (MCiW)

The MCiW has the following advantages:

  1. Faster loading in browser - Since all the parts that makes up the MCiW have been installed in the browser, reopening the MCiW loads it instantly and smoothly.
  2. Content discoverability and SEO - Unlike mobile apps, the MCiW is fully discoverable and crawlable by search engines. Individual content is linkable and shareable.
  3. Installable on all devices
  4. Can be launch via app icons from home screen or app drawers. Can be found in device search, can be switched with the task or app switcher.
  5. The MCiW may also remove the friction of installing an app, allowing an app like experience merely by visiting a website.
  6. Fully responsive - the MCiW's UI will fit any form factor - desktop (3 column), tablet (2 column) and mobile (1 column).
  7. Continually updated - Updates and upgrades to the MCiW are automatically downloaded in the background. Update management requires no thought on the part of the user.
  8. Work offline - The MCiW may be able to work even when when the network is unreliable, or even non-existent. This sub-feature is still under development.

Faster loading in browser

When one visits the MCiW (MainCross Installable Webapp) in the browser the first time, it loads up like a normal webapp. But the magic happens in the background, where the complete webapp is downloaded and installed in the browser. This is not instantaneous - depending on the internet speed it may take 30s - 2 mins. (But its not visible to the user, so it doesn't degrade the user experience.)

When one opens the MCiW in the browser subsequent times, it loads instantly since its already been installed. And further, it saves precious bandwidth. Every part of the entire webapp loads immediately - exactly like a mobile app, without showing loading screens for the webapp itself. (Note that loading screens may still be shown when data is being fetched.)

Once the app has been installed, a notification is shown as follows "This web app has been installed in your browser. It will load instantly from now on, like a mobile app.":

Notification when the installable webapp is ready

Clicking on the notification shows details of the install.

  • The version number and the date is shown.
  • One can also check for updates, or uninstall (ie switch back to a regular webapp)
  • However, note that upon site reload, it will again get installed
MCiW version number, date and other info

Installable on all devices

The MCiW further works like a native app on any device - it can be launched from the home screen, dock, taskbar, or shelf; and even be used offline.

In a desktop browser, one can click on the "Install" button in the address bar and then in the dialog box that pops up.

The MCiW can be installed, and work like a near naitive app

In a mobile browser (Android only), one can click on the toast notification that pops up, usually at the bottom.

Turning the IW into a native app on a mobile

If one misses this prompt, or doesn't see it for some reason, use the "Install app" from the menu:

Mobile browser - use "Install app" from menu.
Confirmation before installation

Once installed, the MCiW works like a native desktop or mobile app. It can be launched from the home screen, dock, taskbar, or shelf.

MCiW running like a standalone native app on desktop, without browser
Native app loading screen on mobile
MCiW running like a standalone native app on mobile, without browser

Fully responsive UI

Like the webapp, the MCiW is responsive and adapts itself to any screen size dynamically.

Wide screen, 3 column view
Tablet 2 column view
Mobile single column view

Continually updated

Updates and upgrades to the app are automatically downloaded in the background - just switch to the latest version to get the latest features. The MCiW continues working as normal even while the update is being lazily downloaded.

Updates are very efficient - only the part of the MCiW that has changed is downloaded. In contrast, with a native app, any update forces the user to download the entire application again.

Example, the current version of this MCiW is 3.35.0.2 and was last installed on 4th Aug. The system has detected that an update is available and prompts the user accordingly.

MainCross IW update downloaded and ready for activation

If the user defers the update, then a persistent notification is provided, which can be used to update when ready.

Use the notification to update the MCiW

If the user closes all instances of the MCiW (whether running in the browser or standalone) without applying the update, the next time they open this site, the update is automatically applied.

The browser should not be closed while the update is being performed.

Latest version installed after update - 3.35.2.1 on 25th Aug:

A bit of rocket science

Unfortunately, installable webapps are akin to rocket science in the Internet world. A complex series of interactions and stages have to be handled during installation and especially upgrade.

When native apps are updated by the user, the system prompts to closes the app, or closes it anyway with the understanding that the user triggered the update. So the update happens outside the app running context and is simple to handle.

Moreover, usually only 1 app instance is running at a time.

Contrast this with the case of installable webapps which are updated while the app is running. Further complexity is added when there are multiple tabs of the same installable webapp running in multiple browser tabs, and standalone as a native app.

Many installable webapps have adopted a shortcut where the app unceremoniously restarts whenever an update is detected - irrespective of what the user was doing. This is of course terrible practice - the choice to update should always be given to the user, so that the user can defer the update if they are involved in some task that might lead to data loss.

We have elected to create a graceful update experience so that the user can choose to update or defer, and this add tremendous complexity to the entire app lifecycle, especially with multiple instances running.

As if all this was not enough, different browsers and OSes handle installable webapps lifecycles and their user prompts in different ways - leading to confusing results for the end user and endless headache for the developer. The worse of the lot, as always, is the fruit company with its joke browser. Overheard: Safari is the new Internet Explorer [2015][2021]

And finally a potential issue vs all its advantages

There is a potential issue with installable webapps that is different from how any general website or webapp works. In the rare case that a particular update (say v1.1) of a website or webapp has an unforeseen serious blocking issue, a patch can be rolled out (say v1.1.1), or the update can be immediately rolled back (v1.0) - and all visitors will near instantly get v1.0 as they browse around. Or in the worse case - they see an error, reload the page in the browser and et voila! they will be on v1.0. Problem solved.

Not so with installable webapps.

If there is a problem with an installable webapps that is discovered after roll out, it cannot be solved immediately. A patch or roll back will not even be seen by the browser until it checks for an update. This check is performed every 30 mins (in the case of MCiW), or when all instances of the installable webapp are closed and opened.

So for a certain duration of time (<30 mins), the user may be stuck with a non working installable webapp.

Note that this situation may be better than being stuck with a non working mobile app since in that case it may takes days before an update is published to the store.

Updates

Update on 25th August, 2022

The really large product feature has been in testing for a while and we are now ready to start rolling it out to all networks, albeit cautiously!

If you would like to see it live, check out https://mciw1.maincross.org which has been released as a MCiW. Test run it in various browers and OSes, and let us know if you find any issues, or have some improvements in mind.

And if you would like to upgrade your Network Site from a webapp to a MainCross Installable Webapp, do let us know.

Update on 15th Nov, 2022

The first production ready MCiW was launched on 1st Oct on Team Bhavya. Since then its been heavily installed and used.

Want to be informed when this author publishes the next article?

Save, embed, share, report
0comments

Explore more channels?Show all

product
product release notes
Stories & use-cases
Community talk
Operator support
MainCross

More from this channel

Select between trending, latest and important content.