Mendix-PWA-Example
Turn your Mendix Application into a Progressive Web App.
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.
The first Widget links to the Manifest file
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.
Manifest file
Set all the Manifest parameters in CreateManifest
. This file decides the name, colors and Icons of your PWA.
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.
- Create a new file called
sw.js
- Add the file to your theme folder in the Mendix project
- Working example: https://github.com/madnessxd/Mendix-PWA-Example/blob/master/theme/sw.js
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
Testing
Send your Application to the Sandbox and open your application with Chrome on Android: