Menu

Mobify Preview

Mobify has a tool called preview for swapping JavaScript files without changing your Mobify Tag JavaScript snippet on the page.

Preview Build Configurations

Astro supports a variety of build configurations that allow apps to create preview versions and non-preview versions for the same build.

A configuration with preview enabled will have the AstroNative.Configuration.ASTRO_PREVIEW flag set and will allow shaking the device to trigger a previewToggled event on Application.

Astro supports 3 iOS build configurations: Release, Debug and PreviewEnabledRelease. The Debug and PreviewEnabledRelease configurations both have preview enabled.

Astro supports 4 Android build configurations: PreviewDisabledRelease, PreviewDisabledDebug, PreviewEnabledRelease and PreviewDisabledDebug.

Astro apps can in turn support the same variety of configurations.

Mobify Preview Plugin

This plugin helps easily use preview for pages within your app that have the Mobify Tag.

Sample Usage

const mobifyPreviewPlugin = await MobifyPreviewPlugin.init()
const previewedUrl = await mobifyPreviewPlugin.preview(
    'http://www.mobify.com/',
    'http://localhost:8080/mobify.js'
)
mainWebView.navigate(previewedUrl)

Methods

MobifyPreviewPlugin.init() #

Creates and returns an instance of the Mobify preview plugin that is used to make subsequent method calls.


preview(url, bundle) #

This method will instantiate a modal view, load the preview page with your specified URL and JavaScript bundle, and dismiss the modal when the preview cookie is successfully set.

Note: As with most Astro methods, this returns a Promise. When preview completes (preview cookie set) the promise will resolve and pass the URL that Preview redirected to. This is useful for cases where the user may change the 'Site URL' on the preview page.

Preview Controller

The preview controller allows a user to quickly enable and disable preview without having to rebuild the application.

Sample Usage

const previewController = await PreviewController.init()

Application.on('previewToggled', () => {
    previewController.presentPreviewAlert()
})

const enabled = previewController.isPreviewEnabled()
// Configure the previewEnabled flag located in baseConfig.js
// to enable/disable app preview
if (enabled === true && BaseConfig.previewEnabled) {
    runAppPreview()
} else {
    runApp()
}

Methods

PreviewController.init() #

Creates and returns a Promise that will eventually resolve to a PreviewController that can then be used to enable or disable preview.

PreviewController.presentPreviewAlert() #

Presents an alert view with two buttons, one to enable and one to disable preview.

PreviewController.getPreviewStatus() #

Returns a promise that resolves to the status of preview. Possible values are true or false.