Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    

Progressive Web App

Publishing your app as PWA.

jQuery Mobile

In order to take full advantage of PWA features using jQuery Mobile framework we recommend combining all pages in a single file.
Navigate to App Settings -> General and check the "Render all pages in one HTML file" checkbox.

All projects types in Appery.io support Progressive Web App (PWA) publishing. The configuration for PWA is located in the project App Settings -> PWA section.

AppBuilder PWA settings window.

AppBuilder PWA settings window.

Possible values
Details

boolean


This setting controls whether the application registers service worker when exported as Web resources or published as Appery.io hosting. Service workers is disabled in preview mode and in native binaries.

After making PWA settings configuration steps you will need to publish your App either by using Appery.io hosting or using your own custom domain. See details about Appery.io Web App publishing services.

Key manifest properties

You must provide at least the short label or label property. If both are provided, short label is used on the user's home screen, launcher, or other places where space may be limited. label is used in the app install prompt.

Label

  • By default: App name from general app settings.
Possible values
Details

Short label

  • By default: App name from general app settings.

Description

  • By default: App description from general app settings.

Display

  • By default: Browser.

You can customize what browser UI is shown when your app is launched. For example, you can hide the address bar and browser chrome. Or games may want to go completely full screen.

Possible values
Details

FULLSCREEN

Opens the web application without any browser UI and takes up the entirety of the available display area.

STANDALONE

Opens the web app to look and feel like a standalone native app. The app runs in its own window, separate from the browser, and hides standard browser UI elements like the URL bar, etc.

MINIMAL_UI

This mode is similar to fullscreen, but provides the user with some means to access a minimal set of UI elements for controlling navigation (i.e., back, forward, reload, etc).
Note: Only supported by Chrome on mobile.

BROWSER

A standard browser experience.

In order to show the Add to Home Screen Prompt, display must be set to Standalone.

Orientation

  • By default: ANY

You can enforce a specific orientation, which is advantageous for apps that work in only one orientation, such as games. Use this selectively. Users prefer selecting the orientation.

Possible values
Details

enum { "ANY", "NATURAL", "LANDSCAPE", "PORTRAIT", "PORTRAIT_PRIMARY", "PORTRAIT_SECONDARY", "LANDSCAPE_PRIMARY", "LANDSCAPE_SECONDARY" };

Start URL

  • By default: /

The Start URL tells the browser where your application should start when it is launched, and prevents the app from starting on whatever page the user was on when they added your app to their home screen.

Your Start URL should direct the user straight into your app, rather than a product landing page. Think about what the user will want to do once they open your app, and place them there.

Possible values
Details

string, a valid absolute or relative URL

Background color

  • By default: #FFFFFF

The background_color property is used on the splash screen when the application is first launched.

Theme color

  • By default: #FFFFFF

The Theme color sets the color of the tool bar, and may be reflected in the app's preview in task switchers.

Possible values
Details

Valid HEX string

https://www.w3.org/TR/appmanifest/#theme_color-member
According to https://developers.google.com/web/fundamentals/web-app-manifest/

The theme_color should match the meta theme color specified in your document head.

Icons

We strongly advise using PNG files and following dimensions 144 × 144, 192 × 192, and 512 x 512 pixels.

When a user adds your site to their home screen, you can define a set of icons for the browser to use. These icons are used in places like the home screen, app launcher, task switcher, splash screen, etc.

icons is an array of image objects. When you add files in Settings they are automatically added into App manifest file.

Possible values
Details

An array of objects
{ "src":”/icon-192.png", "type": "image/png", "sizes": "192x192" }

The following image formats are supported:
WebP JPEG PNG ico SVG

https://www.w3.org/TR/appmanifest/#icons-member

[link] include a 192x192 pixel icon and a 512x512 pixel icon. Chrome will automatically scale the icon for the device. If you'd prefer to scale your own icons and adjust them for pixel-perfection, provide icons in increments of 48dp.

Chrome for Android automatically shows your custom splash screen so long as you meet the following requirements in your web app manifest[link]:

The name property is set to the name of your PWA.
The background_color property is set to a valid CSS color value.
The icons array specifies an icon that is at least 512x512px
The icon exists and is a PNG file.

Route handlers

{
  "route": string,
  "isRegExp": boolean,
  "strategy": Caching StrategyType,
  "method": HttpMethod,
  "statuses": string,
  "maxEntries": integer,
  "maxAge": integer,
  "maxAgeUnit": string
}

Service workers can intercept HTTP requests made by the application and execute custom logic related to caching the server response. The most common caching patterns are described here:
https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/

Several libraries implement these patterns:

Workbox is a successor of sw-toolbox and is recommended for new apps.

The idea is to use Workbox to code common service worker logic for Appery.io applications and allow the end users to add custom route handlers using PWA configuration screen.

Route handlers correspond to Workbox’s:

workbox.routing.registerRoute

method calls.

Route

Possible values

URL or regular expression string

RegEx

  • By default: false
Possible values
Details

boolean

Defines whether route should be treated as a regular expression

Strategy

enum StrategyType {
  “CACHE_FIRST”,
  “CACHE_ONLY”,
  “NETWORK_FIRST”,
  “NETOWRK_ONLY”,  
  “STALE_WHILE_REVALIDATE”
}

There are common caching strategies that most service workers will need and use. This module provides simple implementations of these strategies.

CacheFirst

An implementation of a cache-first request strategy.
A cache first strategy is useful for assets that have been revisioned, such as URLs like /styles/example.a8f5f1.css, since they can be cached for long periods of time.

CacheOnly

An implementation of a cache-only request strategy.

NetworkFirst

An implementation of a network first request strategy.
By default, this strategy will cache responses with a 200 status code as well as opaque responses. Opaque responses are cross-origin requests where the response doesn't support CORS.

NetworkOnly

An implementation of a network-only request strategy.

StaleWhileRevalidate

An implementation of a stale-while-revalidate request strategy.
Resources are requested from both the cache and the network in parallel. The strategy will respond with the cached version if available, otherwise, wait for the network response. The cache is updated with the network response with each successful request.

By default, this strategy will cache responses with a 200 status code as well as opaque responses. Opaque responses are cross-origin requests where the response doesn't support CORS.

VERSION V4.1.1 for more in-depth details refer to Workbox documentation.

Progressive Web App


Publishing your app as PWA.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.