WebDirect and Progressive Web Apps

November 10, 20205 yr

This might be useful for those who have users that use WebDirect on a Desktop, Tablet or Phone. Creating a Progressive Web App (PWA) provides a fully skinned app-like experience for the users.

On Windows/Mac/Linux it allows the user to create an Icon on the desktop which opens the WebDirect login page without any browser UI. On Android/iOS it creates an Icon on the home screen which launches a full screen browser. It's really easy for the user to install themselves and no need to keep software up to date (as browsers auto-update).

Icons and colour-scheme can be customised. There are several sites on how to create a Progressive Web App, and it's still being developed by Google so there's a few funny bits/issues but mostly it works fine.

The primary issue I had was using multiple domains. For example the PWA is hosted on myapp.domain but our FileMaker Server is at fms.domain. This causes the PWA to display the location bar when redirecting to the WebDirect login. I had some issues hosting multiple PWA's on the same domain (in different folders) so this is a problem, however it can be fixed by using an iFrame on myapp.domain containing fms.domain. This does require a small reconfiguration on the FileMaker Server:

On Windows make a backup of FileMaker Server\HTTPServer\conf\web.config and change the customHeaders tags to:

    <customHeaders>
        <add name="Content-Security-Policy" value="frame-ancestors 'self' https://*.[app domain];" />
          <add name="X-Frame-Options" value="ALLOW-FROM https://*.[app domain]" />
          <add name="X-XSS-Protection" value="1; mode=block" />
    </customHeaders>

This works on all supported browsers and platforms apart from IE 11 (which thankfully is no longer supported anyway).

I have attached an example - please note it's only a template as it's a stripped-down version of what I use.

Progressive Web App.zip

Edited November 10, 20205 yr by jaboda
Bug in manifest.json in example

November 18, 20214 yr

Author

Another way of making these changes is to open IIS Manager and navigate to FMWebSite. Select HTTP Response Headers and change X-Frame-Options from ‘SAMEORIGIN’ to ‘ALLOW-FROM https://*.[app domain]’.

I prefer this method as it doesn't require a restart and feels safer than editing the config files directly. It seems the Content-Security-Policy is not required.