Static HTML / PWA Genie Properties

PWA Settings

Component alias

Specify an alias for this component. The alias is used to generate the object name for the component at runtime. This is the same alias shown in the Static HTML Files - Settings group.

App Name

Enter the full name of the application as it should appear to the user.

Short name

Enter the app short name. This is used where there is insufficient space to display the full app name, such as under a home-screen icon.

Description

The description should explain what your app does. It may be used by app stores or search engines.

Application Category(s)

Select one or more app categories. These are standard categories as defined by the W3C.

If supported by the app store, the selected categories are shown in the app description page. This entry is optional.

Static cache name

The cache name must be unique for each PWA that you publish. Use the <appName> placeholder in the name to ensure that the cache name is unique.

If the browser detects a duplicate cache name for different apps, the required JavaScript service worker will not be installed.

Static cache version

Enter the version number for the app cache. By convention use v-##.## (for example, v-01.01).

Each time any of the files already in the cache are modified, increment this value to invalidate the older cache.

Dynamic cache name

The dynamic cache name must be unique for each PWA that you publish. Use the <appName> placeholder in the name to ensure that the cache name is unique.

If the browser detects a duplicate cache name for different apps, the required JavaScript service worker will not be installed.

Dynamic cache version

Enter the version number for the dynamic cache. By convention use v-##.##.

If any of the files in the dynamic cache are stale, change the version number to invalidate the older cache. The older dynamic cache is deleted and a new dynamic cache is created and populated as newer files are requested while online.

Dynamic app cache max size limit

Enter a number (10 to 250) that represents the maximum number of items allowed in the dynamic cache.

When the maximum number is reached, the oldest items in the cache are deleted to make room for newer items. A large cache size consumes more resources and can slow app performance.

Start URL

Enter the starting URL for the app. Typically ./index.html.

Offline html page

Specify the HTML page to display when the device is offline and the requested page is not in the static or dynamic cache.

This page is automatically stored in the static cache. Default: ./offline.html.

URL Ajax callbacks

Specify the URL for any Ajax callbacks that are made from the page. This is typically the URL of your Alpha Anywhere Application Server or Alpha Cloud deployment.

Master icon

Specify the app master icon. The file should be 512px by 512px (PNG) for best results.

Alpha Anywhere uses this master icon to generate the various icon sizes required by different devices.

Display

Specify how the app should display when launched from the home screen icon.

Options: fullscreen, standalone, minimal-ui, browser.

Theme color

The theme color determines the top border (toolbar) color when the PWA runs as a standalone app.

Background color

The background color is used as the splash screen color when the app is launched. It should be similar to the app background color.

Show debug console messages

When enabled, console debug messages related to the PWA service worker are written to the browser console. This is useful while testing and troubleshooting.

Add To Home Screen Dialog

Show Add To Home Screen popup dialog

Specify if an Add To Home Screen pop up dialog window should be included for this PWA. This encourages users to add the PWA to the home screen.

This is especially important on iOS devices since Apple does not indicate within the browser that the app is a PWA. On iOS devices, if the PWA is not added to the home screen, the app is not treated as a PWA and features such as push notifications will not work.

Show screen name display options

If set to standalone (the default), the app name appears on its own beneath the Install App header.

If set to inline, the app name is displayed on a single line.

Max modal popup display count

Specify how many times the Add To Home Screen prompt should be displayed.

Set to -1 when debugging to allow unlimited displays.

Default browser locale

Specify the default browser locale. All dialog prompts will be displayed using the language specified.

This value is automatically updated if Auto detect browser locale is enabled. The default locale is en.

Auto detect browser locale

When enabled, the browser locale is auto-detected client-side when the app is launched. This overrides the Default browser locale setting.

Automatically launch the Add To Home Screen dialog?

Specify if the Add To Home Screen dialog should be shown automatically.

If disabled, you can programmatically call window.AddToHomeScreen.show() or window.AddToHomeScreen.show(locale).

Use a delay or specify page views to trigger the Add To Home Screen dialog

Choose how the Add To Home Screen dialog is triggered.

Options: Use delay, Use page views.

Delay in milliseconds

Enter the delay in milliseconds before the Add To Home Screen dialog is shown.

For example, 5 seconds = 5000. The default is 5000.

Number of page views prior to displaying the Add To Home Screen dialog

Enter the number of page views that must occur before the Add To Home Screen dialog is displayed.

Show on mobile devices

Specify if the Add To Home Screen dialog should be shown on iOS and Android devices.

Show on desktop browsers

Specify if the Add To Home Screen dialog should be shown when the PWA is opened in desktop browsers.

Hosting Options

Using Firebase Cloud Firestore

Specify if the app uses Firebase Cloud Firestore.

When this option is checked, data returned from Firestore requests is not cached in the dynamic cache, which helps ensure that data is not stale.

Hosting with GitHub Pages

Specify if you will deploy this web app to GitHub Pages.

Enabling this option exposes additional configuration for GitHub Pages compatibility.

Set noJekyll flag

In most cases, this option should be set if you are deploying the app to GitHub Pages.

It creates a *.nojekyll* marker file to prevent GitHub Pages from ignoring files that start with an underscore.

Deployment

After fileset is created

Specify the action to perform after the PWA files have been created.

Options:

OpenFolder - Opens the Windows folder containing the files.

PublishToAmazonS3 - Automatically uploads the files to an S3 bucket.

Storage connection string

Each PWA that you create must be published to a unique S3 bucket to ensure that the PWA is installed from a unique domain name.

To publish to a special Alpha Software bucket (which ensures each PWA automatically has a unique domain name), select the <AlphaSoftware> connection string.

To publish to your own S3 bucket, select or define a connection string that references your S3 bucket.

Sub-folder name in Amazon S3 storage

Specify the sub-folder name in the S3 bucket where the files should be uploaded when using PublishToAmazonS3.

"Additional Actions" of the Dialog:

Bump STATIC cache version number

Clicking this link automatically increments the Static cache version property described above (e.g., changing v-01.01 to v-01.02).

Use this every time you make changes to your UX component before generating the fileset. This ensures the user's browser knows to download the fresh version of your app.

Bump DYNAMIC cache version number

Clicking this link automatically increments the Dynamic cache version property described above.

Use this if you need to force the device to clear its dynamic data cache and re-fetch content from the server.

IMPORTANT Making Ajax callbacks from embedded components

Opens a help dialog with critical information about handling Ajax callbacks.

When a UX component is embedded in a PWA, standard Ajax callbacks may fail unless the URL Ajax callbacks property is correctly configured to point to your Alpha Anywhere server.