Adding the Persistent Mobile Foundation SDK to Web Applications

Overview

You can develop mobile or Desktop PMF web applications by using your preferred development environment and tools.
In this tutorial, you learn how to add the PMF web SDK to your web applicaiton, as well as how to register the web application with the PMF

The PMF web SDK is provided as a set of JavaScript files, and is available at NPM.
The SDK includes the following files:

  • ibmmfpf.js - The core of the SDK.
  • ibmmfpfanalytics.js - Provides support for Persistent Mobile Foundation Analytics.

Jump to

Prerequisites

Adding the PMF web SDK

To add the SDK to new or existing web applications, first download it to your workstation and then add it to your web application.

Downloading the SDK

  1. From a command-line window, navigate to your web application’s root folder.
  2. Run the command: npm install ibm-mfp-web-sdk.

This command creates the following directory structure:

SDK folder contents

Note: Run the following commands after installing ibm-mfp-web-sdk package.

  1. Run the command: npm install uuid.
  2. Run the command: npm install react-native-get-random-values.

Adding the SDK

To add the PMF Web SDK, reference it in a standard fashion in the web application.
The SDK also supports AMD, so that you can use Module Loaders such as RequireJS to load the SDK.

Standard

Reference the ibmmfpf.js file in the HEAD element.

<head>
    ...
    ...
    <script type="text/javascript" src="node_modules/ibm-mfp-web-sdk/ibmmfpf.js"></script>
</head>

Using RequireJS

HTML

<script type="text/javascript" src="node_modules/requirejs/require.js" data-main="index"></script>

JavaScript

require.config({
	'paths': {
		'mfp': 'node_modules/ibm-mfp-web-sdk/ibmmfpf'
	}
});

require(['mfp'], function(WL) {
    // application logic.
});

Important: If adding Analytics support, place the ibmmfpfanalytics.js file reference before the ibmmfpf.js file reference.

Initializing the PMF web SDK

Initialize the PMF web SDK by specifying the context root and application ID values in the main JavaScript file of your web application:

var wlInitOptions = {
    mfpContextRoot : '/mfp', // "mfp" is the default context root in the PMF
    applicationId : 'com.sample.mywebapp' // Replace with your own value.
    sessionMode : true //This is an optional paramter. Setting this to true ensures that PMF related data is stored in the session rather than in the local storage. If this option is set to false or not set at all, default is local storage.
};

WL.Client.init(wlInitOptions).then (
    function() {
        // Application logic.
});
  • mfpContextRoot: The context root used by the PMF.
  • applicationId: The application package name, as defined when you register the application.

Registering the web application

You can register applications either from the PMF Operations Console or from the PMF CLI.

From PMF Operations Console

  1. Open your favorite browser and load the PMF Operations Console by entering the http://localhost:9080/mfpconsole/ URL.
  2. Click the New button next to Applications to create a new application.
  3. Select Web as the platform, and provide a name and identifier.
  4. Click Register application.

Adding the Web platform

From PMF CLI

From a command-line window, navigate to the root folder of the web application and run the command: pmfdev app register.

Updating the PMF web SDK

SDK releases can be found in the SDK NPM repository.
To update the PMF web SDK with the latest release:

  1. Navigate to the root folder of the web application.
  2. Run the command: npm update ibm-mfp-web-sdk.

Same-origin policy

If web resources are hosted on a different server machine than the one that PMF is installed on, a same-origin policy violation is triggered. The same-origin-policy security model is designed to protect against potential security threats from unverified sources. According to this policy, a browser allows web resources (such as scripts) to interact only with resources that stem from the same origin (which is defined as a combination of URI scheme, host name, and port number). For more information about the same-origin policy, see The Web Origin Concept specification, and specifically 3. Principles of the Same-Origin Policy.

Web apps that use the PMF web SDK must be handled in a supporting topology. For example, use a reverse proxy to internally redirect requests to the appropriate server while maintaining the same single origin.

Alternatives

You can meet the policy requirements by using either of the following methods:

  • Serving the web application resources, for example, from the same WebSphere Application Server Liberty profile application server that is used in the Persistent Mobile Foundation Developer Kit.
  • Using Node.js as a reverse proxy to redirect application requests to the PMF.

Learn more in Setting up the Web development environmnt tutorial

Secure-origins policy

When you use Chrome during development, the browser might not allow an application to load if it uses both HTTP and a host that is not localhost. The cause is the secure-origins policy that is implemented and used by default in this browser.

To overcome this, you can start the Chrome browser with the following flag:

--unsafely-treat-insecure-origin-as-secure="http://replace-with-ip-address-or-host:port-number" --user-data-dir=/test-to-new-user-profile/myprofile
  • Replace “test-to-new-user-profile/myprofile” with the location of a folder that will act as a new Chrome user profile for the flag to work.

Read more about Secure Origins in this Chormium developer document.

Tutorials to follow next

With the PMF web SDK now integrated, you can now:

▲
Last modified on