Progressive Web Apps

From Lianjapedia
(Redirected from Progressive Web Apps)
Jump to: navigation, search

Overview

Progressive Web Apps (PWA) are web apps that use emerging web browser APIs and features along with the traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications.

In order to call a Web App a PWA, technically speaking it should have the following features:

  • Secure Contexts (HTTPS)
  • One or more Service Workers
  • A Manifest file.

Secure Contexts (HTTPS)

The web application must be served over a secure network. Being a secure site is not only a best practice, but it also establishes your web application as a trusted site especially if users need to make secure transactions.

During development, the Lianja Cloud Server removes the need to access the App using https, it works using standard http.

Service Workers

A service worker is a script that allows intercepting and control of how a web browser handles its network requests and asset caching.

With service workers, web developers can create reliably fast web pages and offline experiences. When an App is generated for the Web in the Lianja App Builder, a Web, a Phone and a Tablet App will be generated. If the App is PWA enabled (Enable as PWA) a service worker will be automatically generated for the App. You don't need to do anything.

Enable as PWA

To enable an App as a Progressive Web App, check the Enable as PWA setting under General App Configuration in App Settings.

Browser: Enable as PWA

This will cause a service worker script to be generated for the App.

Manifest File

The manifest file is a JSON file that controls how your app appears to the user and ensures that Progressive Web Apps are discoverable. It describes the name of the app, the start URL, icons, and all of the other details necessary to transform the App into an native-like format.

When an App is generated for the Web in the Lianja App Builder, a Web, a Phone and a Tablet App will be generated: index.html, phone_index.html and tablet_index.html respectively. The Lianja Cloud Server auto senses the client (Desktop, Phone or Tablet) and sends the appropriate html to the client.

If the App is PWA enabled (Enable as PWA) its manifest file (custom editable in the Build Workspace) will be automatically included in the html.

Build Workspace

Switch to the Build Workspace to edit the template manifest file and customize if for the current App.

Build Workspace: Progressive Web Apps (PWAs)


Installing a PWA

Installing the Lianja App Center

When the Lianja App Center Login Page is displayed in the browser (here Chrome), click the Install button in the address bar to install the Lianja App Center as an App.

Installing the Lianja App Center


The Lianja App Center Login Page will then be opened in its own window and a shortcut created on the client.

Installed Lianja App Center


And the user can login as normal to display the Lianja App Center.

Installed Lianja App Center


Installing an Individual App

Alternatively, for Apps that do not require login and are enabled as PWA, click the address bar Install button once the App has loaded.

Installing the example_webapp1 App


The App will then be opened in its own window and a shortcut created on the client.

Installed example_webapp1 App


See Allowing Unauthenticated on Windows or Linux and the Enable guest access App Setting for more information on Apps that do not require a login.

Pages in category "Progressive Web Apps"

The following 3 pages are in this category, out of 3 total.