Progressive Web App

Publishing your app as PWA.

Introduction

All project types in Appery.io support Progressive Web App (PWA) publishing.
The configuration settings for PWA are located in the project App Settings > PWA section:

1273

AppBuilder PWA General settings window.

🚧

Note!

In order to take full advantage of PWA features using the 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 check box.

How-to Guides

A detailed guide on how to set up the PWA with Appery.io and test in the browser.

How to test PWAs on iOS devices.

Enable PWA Publishing

  • By default it is disabled.
Possible valuesDetails
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 is inherited from general app settings.

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 valuesDetails
FULLSCREENOpens the web application without any browser UI and takes up the entirety of the available display area.
STANDALONEOpens 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_UIThis 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.
BROWSERA 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 valuesDetails
enum { "ANY", "NATURAL", "LANDSCAPE", "PORTRAIT", "PORTRAIT_PRIMARY", "PORTRAIT_SECONDARY", "LANDSCAPE_PRIMARY", "LANDSCAPE_SECONDARY" };https://www.w3.org/TR/appmanifest/#orientation-member

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 valuesDetails
string, a valid absolute or relative URLhttps://www.w3.org/TR/appmanifest/#start_url-member

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 valuesDetails
Valid HEX stringhttps://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 valuesDetails
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.

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 valuesDetails
booleanDefines 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.