Progressive Web App

Content Type: Module
Categories:

Overview

Turn your Mendix Application into a PWA.

Documentation

Demo urlhttps://pwa-sandbox.mxapps.io/p/index.html

Mendix-PWA-Example

Turn your Mendix Application into a Progressive Web App.

Screenshot

Getting started

Download the packagefile and add it to your project.

Getting your homepage ready

Make sure that your homepage has both JavaScript Snippets Widgets like in the ExampleHome page. Screenshot

The first Widget links to the Manifest file

Screenshot

The second Widget links to the Service Worker

Html headers

The first Widget adds headers to your page.

  • The most important part is the Manifest link.
  • The theme-color decides the color of the address bar.
  • The favicon isn't mandatory.

Screenshot

Manifest file

Set all the Manifest parameters in CreateManifest. This file decides the name, colors and Icons of your PWA. Screenshot

Installing the ServiceWorker

The second JavaScript Snippets Widget calls to the file sw.js. It's a ServiceWorker javascript file that you have to add manually.

Screenshot

It's time to run the application.

Send your application to the Sandbox or your Mendix Node. The pwa only works on a https:// connection.

Check your google Chrome tabs to see if everything works correctly

Screenshot Screenshot

Testing

Send your Application to the Sandbox and open your application with Chrome on Android: Screenshot

Changing the logos

  • Upload your images to an Image Collection in Mendix.
  • The url is [ModuleName$Imagename.filetype]
  • For example: PWA$logo192.png
  • Make sure to edit all the imagefiles in the Manifest through the CreateManifest microflow. Screenshot

Releases

Version: 1.0.1
Framework Version: 8.10.0
Release Notes: Patches for upgrade to Mendix 8.10
Version: 1.0.0
Framework Version: 7.19.0
Release Notes: First Mendix Module Package to turn your Application into a PWA