Move Over Native Apps, Progressive Web Apps Are Coming For You

By -

TL;DR

Progressive Web Apps (PWAs) are the future of mobile apps and the web. Start building PWAs using a visual no-code/low-code approach with Joget DX.

Introduction

Imagine using an app launched from an icon on your mobile phone, with a user interface that is not only fast and responsive, but also works offline. And you get push notifications when the app isn’t even running. This sounds a lot like a native app, doesn’t it? Not necessarily so, as all this is possible today with Progressive Web Apps (PWA).

What is a Progressive Web App (PWA)?

Progressive Web Apps are web applications that incorporate additional features such as installing to a device, offline support, background push notifications, fast and responsive user experience, and more. A PWA pushes the boundaries of what a web app is capable of, and blurs the lines between a web and native app.

PWAs are the future of mobile apps and the web. This might seem like a hyperbolic claim but since our last article Progressive Web Apps: Apple App Store, Google Play Store, It Was Nice Knowing You, PWAs have increased in maturity and progress. Many popular brands such as Google Maps, Google Photos, Twitter, Pinterest, Starbucks, AliExpress and FlipKart have started offering PWAs, so adoption has been picking up pace.

Several case studies discovered that PWAs greatly boosted user engagement. For example, Twitter posted a 75 increase in tweets sent and a 20 percent reduction in bounce rate, while AliExpress boosted its new user conversions by 104 percent.

What does a Progressive Web App offer that makes it such a compelling proposition?

Installable on Mobile and Desktop

By bypassing app stores as well as allowing apps to be discovered and accessed directly via a URL, PWAs make it easier to reach users. PWAs also reduce the steps required between discovering an app and getting it on the home screen, thus reduces the friction in getting an app installed.

App installation not only works for mobile devices, but also apply to the desktop for a seamless experience. Chrome 73 in March 2019 introduced support for Progressive Web Apps on Desktop, which means PWAs are now supported on all desktop platforms, including Chrome OS, Linux, Mac, and Windows.

Once installed, PWAs appear as icons in the device menu so they appear like a native app would. They also launch in their own windows without any browser navigation bars to further enhance the immersive full screen app experience.

Add to Home Screen on Chrome Android


Add to Home Screen on Safari iOS


Add to Home Screen on Chrome Desktop

PWA Icon and Window Appearance on macOS



Fast and Responsive UX with Offline Support


Some of the critical requirements for a PWA are that it is fast and reliable. Not only does it load fast (time to get meaningful content on the screen must be short), it should also work in spotty network conditions or even when offline. Moreover, the user interface (UI) is responsive to user interaction. Overall, a PWA is designed to deliver a native app-like user experience (UX).

PWA detecting when you go offline, and synchronizing form data once you get back online


User Engagement and Background Push Notifications

Push notifications are a critical part of engaging (and re-engaging) users with an app. Without notifications, users will not be informed of content relevant to them (e.g. alerts, task assignments, messages, reminders, etc), so they will be less likely to open the app.

Previously this was a big missing native feature but with PWAs, push notifications now even work in the background.

Push notifications showing on an Android phone, which engages the user to open the app


Pros and Cons of PWAs

As an enterprise or a developer, how do you decide whether or not to adopt PWAs when developing your apps? There are many advantages, as well as a couple of drawbacks that are perhaps holding it back.

Pro: Easier to Publish and Discover

PWAs can be initially accessed directly from a web browser, so they do not have to be restricted by arbitrary rules and policies of the Apple App Store or Google Play Store. They can also be indexed by search engines and can appear directly in web search results.

Pro: Smaller and Easier to Update

Compared to native apps, PWAs are typically much smaller and can be accessed immediately without waiting for a download. Unlike a native app, PWAs do not need to be updated through an app store, and can be automatically updated when accessed.

Pro: Easier to Develop and Maintain

Unlike native apps which require separate code bases for different platforms, PWAs are developed using standard web technologies i.e. JavaScript, HTML and CSS.

Pro: Backward Compatibility with Old Browsers

PWAs are just web apps, so they still run in browsers that don’t support PWA technology. Users might not get the additional functionality (e.g. push notifications or offline support), but standard web functionality should continue to work as before.

Con: Incomplete iOS Compatibility

Apple has started to support PWAs in iOS 11.3 in March 2018, but not all PWA features are fully supported. Notably missing are support for push notifications and background sync, but hopefully these will improve in newer iOS releases.

Con: Restricted Access to Specific Hardware

PWAs are limited to the functionality offered by web technologies, so access to platform specific device features might be restricted. Having said that, current web technology already provides access to important features like geolocation, camera access, device orientation, offline storage and push notifications, so it might be sufficient for the majority of apps.


What Does It Take to Build a PWA?

Let’s have a look at how to audit a web app for PWA features, as well as the steps to develop the PWA itself.

Audit a PWA

Lighthouse is an open-source automated tool for improving the quality of web pages, which is built directly into the Google Chrome browser. With Lighthouse, you can run an audit on a web app to determine the degree of compliance to the Progressive Web App Checklist.

Here are the steps to run the PWA audit:
  1. Open Chrome in Incognito Mode for a clean state and to prevent browser extensions from messing with the results.
  2. Browse to the desired web app.
  3. Open Chrome DevTools from the Chrome menu “More Tools” > “Developer Tools”
  4. Click on the Audits tab, click on “Run audits” with the “Progressive Web App” Audit selected.
Audit result of a fully compliant PWA


There are many checks to validate PWA features in the audit. In the Lighthouse PWA Audit for Chrome 78, the baseline checks are as follows:
  1. Fast and reliable
    1. Page load is fast enough on mobile networks
    2. Current page responds with a 200 when offline
    3. start_url responds with a 200 when offline
  2. Installable
    1. Uses HTTPS
    2. Registers a service worker that controls page and start_url
    3. Web app manifest meets the installability requirements
  3. PWA Optimized
    1. Redirects HTTP traffic to HTTPS
    2. Configured for a custom splash screen
    3. Sets an address-bar theme color
    4. Content is sized correctly for the viewport
    5. Has a <meta name="viewport"> tag with width or initial-scale
    6. Contains some content when JavaScript is not available
    7. Provides a valid apple-touch-icon
  4. Additional items to manually check
    1. Site works cross-browser
    2. Page transitions don't feel like they block on the network
    3. Each page has a URL

Develop a PWA Using Code

Having seen the requirements to qualify as a Progressive Web App, let’s see what’s needed to actually build one. This section contains some partial code snippets to give developers an idea of what is required to code a PWA.

Step 1: Enable HTTPS


The first thing to keep in mind is that, for security reasons, PWAs require HTTPS. Without a secure HTTPS connection, PWA features will not work.

The only exception is when testing on localhost for local development. Otherwise, you will need to install commercial SSL certificates in your web server, or obtain free SSL certs from providers such as Let’s Encrypt.

Step 2: Create a Web App Manifest 


The first key component in a PWA is the web app manifest. The web app manifest is a simple JSON file placed in the root of the web app that provides information regarding the web app. The manifest would include information about the app name, icons, splash screen, start URL and more.

An example web app manifest:

{
  "short_name": "MyApp",
  "name": "My App",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/myapp/",
  "background_color": "#338888",
  "display": "standalone",
  "scope": "/myapp/",
  "theme_color": "#338888"
}

Step 3: Develop a Service Worker

The next key PWA component, arguably the most important one, are service workers. Service workers are JavaScript code in the web app root that runs in the background. They intercept network requests and act like sort of a client-side proxy.

The first step is to register the service worker e.g.

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
        .then((reg) => {
          console.log('Service worker registered.', reg);
        });
  });
}

 Service workers are event-driven and responds to 3 primary events: Install, Activate and Fetch.

The Install event occurs when the app is installed. This is typically used to cache pages, using the Cache API, e.g.

self.addEventListener('install', event => {
  // cache core files
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log('Service worker pre-caching offline pages');
      return cache.addAll(FILES_TO_CACHE);
    })
  );
});

 The Activate event occurs when the service worker is activated, either immediately after installation or on return. You can use this event to clean up unused data, e.g.

self.addEventListener('activate', event => {
  // delete old caches
  evt.waitUntil(
    caches.keys().then((keyList) => {
      return Promise.all(keyList.map((key) => {
        if (key !== CACHE_NAME) {
          console.log('Service worker removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
});

 The Fetch event occurs whenever a network request is made. There are several offline strategies that could be used to serve content, for example you could use a network, falling back to cache strategy. In this case the service worker will first try to fetch the resource from the network and if that fails, it will return the offline page from the cache e.g.

self.addEventListener('fetch', event => {
  event.respondWith(
      fetch(event.request).catch(function() {
        return caches.match(event.request);
      })
    );
}

Step 4: Add Push Functionality

Push Notifications are performed using two APIs: the Notifications API and the Push API. The former lets the app display system notifications to the user, while the latter allows a service worker to receive messages from a server, even in the background.

To actually send push messages and display the notification, the following general steps are required:

On the client app:
  1. Subscribe to the push service
  2. Send the subscription object to the server
On the server:
  1. Generate the message data
  2. Encrypt the data with the user public key
  3. Send the encrypted data.
There’s too much to cover to explain in detail here, but an example can be found at Adding Push Notifications to a Web App.

Step 5: Add Offline Functionality

Service workers can make use of 2 types of offline storage.

Firstly, the Cache API can be used to cache pages to save and serve network resources (HTML, CSS, JavaScript, images). For typical requests, using the Cache API is sufficient to provide offline read-only access. Example code using the Cache API was given earlier under the service worker fetch event.

However, the Cache API does not support POST requests, so form data submission will not work. In this case, the IndexedDB API provides client-side storage for structured data. IndexedDB is like a SQL relational database (RDBMS) that is built into the browser. The service worker can be coded to intercept the form data to be stored into the IndexedDB. The data can then be synchronized using the Background Sync API back to the server once a network connection is reestablished.

An example of implementing this can be found in the article Background Sync with Service Workers.


Develop a PWA Using a No-Code/Low-Code Platform

The previous section shows that although simpler than developing native apps, building a PWA from the ground up is not as simple as it could be. A simpler way of developing Progressive Web Apps is to use a no-code/low-code platform that provides automatic PWA support, such as Joget DX.

In Joget DX, apps that you design are automatically PWA compliant (as long as you host using HTTPS). For example, when you visually design a form and userview (end-user UI), PWA support is enabled by default. Offline functionality (both read-only and form submission with background sync) can be enabled via configuration, basically by ticking some checkboxes. Some sample screenshots below demonstrates the PWA support in Joget DX:

Visually design a form in Joget DX

Progressive Web App support and push notifications enabled by default

Offline functionality enabled via checkbox

Lighthouse PWA audit for a Joget DX app on mobile

Lighthouse PWA audit for a Joget DX app on desktop











Should You Adopt PWAs Today?
So, having learned about the promise of Progressive Web Apps, should enterprises and developers adopt PWAs today? The answer should be a resounding yes. PWAs are not perfect yet, especially in terms of cross-platform compatibility, but it is definitely time to start embracing the future if you have not already started on the journey.

To get started with Progressive Web Apps using a visual no-code/low-code platform, try Joget DX.


Comments

Post a Comment

Popular Posts

Security in Low-Code Applications: Cybersecurity Features and Best Practices for the Joget Open Source Platform

By -
Image
Introduction to Security Benefits and Risks in Low-Code Platforms As digitalization becomes increasingly prevalent, low-code platforms are rapidly gaining adoption across industries. Employing visual techniques to programming, they enable the development and delivery of applications in a fraction of the time required by traditional coding. According to Forrester’s Now Tech: General-Purpose Low-Code Development Platforms, Q1 2021 , low-code platforms are “vital to digital business” and “proven in even the most mission-critical use cases”. However, the proliferation of apps and digital solutions bring with it increased cybersecurity risks like phishing attempts and ransomware attacks. As the SolarWinds hack in 2020 and Microsoft Exchange hack in 2021 demonstrated, the cost of security lapses can be monumental. Security considerations are therefore paramount, so how would they apply to low-code platforms? Source:  Don’t Ignore Security In Low-Code Development, Forrester Research Inc...
Read more

No-Code, Low-Code and Pro-Code: Why Flexibility is Essential for Digital Transformation

By -
Image
Introducing Business Reporting and API Management Addons for Joget DX The COVID-19 coronavirus pandemic will be viewed in history as a significant point in human history. In the post-pandemic world, digital transformation can no longer be delayed and organizations need to adapt quickly, or perish, as the old ways of working no longer apply in the new normal. Based on Forrester’s Q1 2020 Digital Process Automation Survey , over 70% Of organizations still have paper-based process dependencies, as shown in the figure below. With a modern open source no-code/low-code platform like Joget DX , organizations can rapidly build, deploy and adapt applications to cater to ever changing needs. In this article, we will talk about the need for flexibility in application platforms to meet digitalization needs, and how the extensibility of Joget DX enabled the introduction of new add-ons for business reporting and API management . No-Code, Low-Code and Pro-Code: Flexibility and Extensibility There mi...
Read more

Transforming Customer Onboarding: How Allied Benefit Systems Achieved Reporting Accuracy and Streamlined Business Processes with No-code/Low-code.

By -
Image
To optimize business operations and ensure accurate reporting, Allied Benefit Systems empowered business users and delivered a Customer Onboarding Platform built on no-code/low-code within three months. Effective onboarding processes play a crucial role in creating a positive impression on new customers. Yet, many businesses still need to rely on manual methods that can be time-consuming, error-prone, and inefficient. Allied Benefit Systems (Allied) , a US-based healthcare solutions company that prioritizes people, understands the importance of streamlined onboarding. As the largest independent third-party administrator in the US, Allied designs tailored self-insurance benefits solutions that integrate innovative medical management and cost-control strategies.   The company collaborates with clients and benefits consultants to institute plans that support the best options for employees and their families. However, Allied's existing onboarding process was managed through spreadsheet...
Read more

DISINI™ Vehicle Inspection & Insurance App

By -
Image
The DISINI™ Vehicle Inspection & Insurance App is an application that can be used standalone or in a composable application environment on the Joget DX low-code platform. Enterprises will be able to use the application to manage their fleet of vehicles, track insurance policies expiry and conduct regular vehicle inspections. Summary of the App features are: Track your vehicles' insurance policies and set email reminders of the renewals. Assign inspectors to conduct scheduled vehicle inspections. Supervisors will be able to set reminder notifications for the inspectors of upcoming vehicle inspections. Inspectors will be able to check their calendars for scheduled inspections that have been assigned to them. Create and manage inspection checklists templates for the many vehicle types. Inspectors will be able to update and check their Dashboard for inspection tasks. Supervisors will be able to keep track of all assigned inspection tasks and follow up accordingly. The following ar...
Read more

Superapps in the Enterprise: Up, Up and Away!

By -
Image
 “We think these applications are so compelling that we don’t just call them apps, we call them super apps… Super apps are applications that once you start using them, you’ll wonder just how you lived without them” - BlackBerry founder Mike Lazaridis. What is a Superapp?  In the early days of the smartphone revolution, BlackBerry founder Mike Lazaridis first coined the term “super app” (or “superapp”) in a MWC 2010 keynote speech . He defined them as “a closed ecosystem of many apps that people would use every day because they offer such a seamless, integrated, contextualized and efficient experience.” According to Gartner®, “a superapp is like a Swiss army knife with a range of component tools (miniapps) that the user can use and remove as needed”.  We consider superapps to be a single platform where miniapps are integrated, thus providing a seamless experience to its users. Here are some statistics and predictions from 2022 Gartner Top Strategic Technology Trends for 2...
Read more