Design a Progressive Web App
Overview
A Progressive Web App (PWA) is the next step of a Responsive Web app. For example, if you have a website (web page/web app) that is mobile responsive, you can leverage the new features supported by modern web browsers to make it a Progressive Web App. These additional features include using service workers, web app manifests, push notifications, and offline support.
A Progressive Web App is an application that feels like a Native app, but is available over web browsers to a user. A user can access a Progressive Web App on any web browser on a mobile device. The app is responsive, functions even when the device is offline or has limited network speed, and does not require any updates.
For information about how to build a Progressive Web app, click here.
Important: Before you start to build a Progressive Web App, you must enable the PWA option for a Responsive Web application. When you do so and build the application, a new output is created in the Progressive Web App format. This new output does not replace any Responsive Web output, but instead a new output is created in the same folder. For more information about Responsive Web apps, click here.
This topic consists of the following sections:
- Guidelines to Optimize Progressive Web Applications
- Progressive Web Apps vs. Native Apps vs. Responsive Websites
- Progressive Web Apps - Videos
- Progressive Web Apps - FAQs
A Progressive Web App is always up to date as it uses a Service Worker. A Service Worker is a script which ensures that the features that are not required to appear in the web browser or that don't need any user interaction are linked with the web app. This service worker script runs in the background and helps in synchronizing the data in the background and in displaying push notifications.
When the Progressive Web App feature is enabled, on Kony Fabric, you must configure server assets caching as zero. Furthermore, you must not select the HttpSessioncaching option to fetch the latest content from the server. For more information, click here.
A Progressive Web App has the following features:
- Progressive: Site URLs work across all mobile web browsers.
- Responsive: All web pages are responsive on mobile and tablet devices.
- Secure: The web app is served over HTTPS.
- Offline: The app URLs load when they are offline.
- Easy Access: You can add a Progressive Web app to your home screen on your device.
- Fast: When you load the app for the first time on 3G, the app is fast.
- Unique Links: Each page in the Progressive Web application has a unique URL.
The Progressive Web App generated by Kony Visualizer meets 100% of Google's PWA baseline checklist.
For a more hands-on approach on the Progressive Web Apps feature provided by Kony AppPlatform, import and preview the Events, Employee Directory, and Resort Feature sample apps by using Kony Visualizer.
- Events app:
- Employee Directory app:
- Resort Feature app:
Progressive Web Apps vs. Native Apps vs. Responsive Websites
The following table illustrates the differences in the availability of various features between PWAs, Native apps, and Responsive websites.
| Functionality | Native App | Responsive Website | Progressive Web App |
|---|---|---|---|
| Functions Offline |
|
|
|
| Push Notifications |
|
|
|
| Installable on Home screen |
|
|
|
| Full-screen experience |
|
|
|
| Indexable by search engines |
|
|
|
| One place to enter content |
|
|
|
| Works across all devices |
|
|
|
| No download required |
|
|
|
| Does not require updates |
|
|
|
Guidelines to Optimize Progressive Web Applications
Progressive Web Apps can be enabled on the Responsive Web channel on Visualizer. When you build Progressive Web Apps, you can use Google Lighthouse to improve the quality of your Progressive Web Apps. The higher the score on Google Lighthouse, the higher the quality of your Progressive Web App. You can achieve a better score on Google Lighthouse by taking care of a few things.
Important: To get an ideal evaluation with Google Lighthouse, build your app in the Release Mode and publish the app on your runtime environment.
Optimize Application Load or Startup
By optimizing your application startup or the load page, you can achieve a better score on Google Lighthouse.
- Ensure that the first screen of the app is lightweight and of the lowest size possible.
- Add a Splash screen for the application.
- Avoid placing any unwanted images on the first screen.
- Avoid placing service calls in the first screen of the App that are not required for its functionality
Optimize Web App Manifest
When you optimize your web app manifest file for the Progressive Web app, it can increase your quality score on Google Lighthouse. The optimizations define how your app anchor appears when a user adds your app to their home screen on their device.
- Ensure that you add images for your App to anchor the App on the home screen.
- For mobile devices, add to Home screen is displayed by the device browser if the manifest contains the App icons.
- For desktop browsers, use the beforeinstallprompt event for Google Chrome to display a notification to the users. You can find more information on beforeinstallprompt and similar functionality on other browsers at https://developers.google.com/web/fundamentals/app-install-banners/
- Add a background color in the Manifest file.
- Add a theme color in the Manifest file.
Service Workers
When Progressive Web is enabled, the application is not expected to specifically make any changes for the Service workers to be registered and enabled. The web framework within Visualizer inherently helps your application create and register a service worker. The service worker is created using the default caching mechanism.
Progressive Web Apps - Videos
This section contains a series of videos that explain how to create Progressive Web Apps using Kony Visualizer.
Video One
This is the first of the Progressive Web App tutorial series. Here, we walk you through the steps to build a basic web application by making use of Visualizer's low-code capabilities.
Video Two
In this second tutorial of the PWA series, we walk you through the steps to enhance the web app created in our first video. We will add the search capability, better responsive layout, and improved aesthetics.
Video Three
In this third video tutorial of the PWA series, we will take the app that we built in our previous videos and add PWA capabilities.
Progressive Web Apps - FAQs
- Is it possible to create Segment templates responsively? Can we use the Breakpoint Forking feature while creating Segment templates?
No, it is not possible to do so. Breakpoints are a concept of forms. Form layouts change based on the breakpoint that the page (form) width hits. Breakpoints are only provided at form-level. For Segments, you can use separate templates to achieve a unique layout for every breakpoint. - Can we create components with Breakpoint Forking?
Breakpoints are only provided at form-level. Components are designed to be cross-platform, and are not specific for a breakpoint. Because breakpoint is a form concept, you can fork a component for a specific breakpoint within a form, but not outside the form. And prior to run time, you can validate the designs on the form canvas. - Is it possible to create a Map Pin callout template responsively?
Similar to Segment templates, you can use separate templates if you want a unique layout for each breakpoint. -
If a Progressive Web App is installed on an Android device by using the Google Chrome app install banner, will Kony be able to send push notifications for that app?
Yes, Kony can send push notifications in such a scenario. However, you must ensure that the Google Chrome version is 73 or later. -
A Progressive Web App runs on the Android stock browser. Will Kony be able to send push notifications for that app?
Kony can send push notifications for that PWA, if the Android stock browser is compatible with PWA (works properly on Google Chrome). -
If a Progressive Web App is installed on an Android device through the Google Play store, will Kony be able to send push notifications?
If the PWA is installed through the Google Play store, that app opens as a Google Chrome window. So, Kony can send push notifications in that case.
| Copyright © 2013 Kony, Inc. All rights reserved. |