What is a Progressive Web App (PWA) ?

PWA’a are- extremely fast under 1 second- always available even with no internet connection- and easy to use.

Progressive Web Apps are web applications that have been designed so they are capable, reliable, and installable. These three pillars transform them into an experience that feels like a native application.

A progressive web application (PWA) is an app delivered through the web browser, using common web programming HTML, CSS and JavaScript. PWA has multiple benefits, exception speed, works off line with no internet connection, runs on any mobile, desktop, tablet, requires no program downloads, highly ranked in search engines, users can return to browser new content, secure delivery mechanism, share links, access directly, universally accessible, reduce data usage and never needs app store updates. PWAs provide powerful experiences with app-like functionalities in fraction of the time web site can deliver.

In a nut shell, PWA is: Responsive, connectivity-independent, app-like, fresh, safe, discoverable, re-engageable, installable, linkable web experience.

Major Benefits of PWA’s

Slow loading is the major issue that PWA resolves.

We all realize that Google search algorithm loves fast loading sites. With PWA’s you get the best possible user speed even with a slow internet connection – or no internet. Adding PWA’s will minimize the loss of users drops caused from slow connections and smart phones. PWA’s provides fast speeds to large apps, apps that need interactive or intense task. PWA allows you to open a website, load its content, then read it later when you’re offline.

PWA reduces load time while providing your users a better experience. Loading everything over secure HTTPS. The cache-first service worker strategy, allows your app to work offline, removing a major obstacle.

PWAs are available now. Most browsers support it, with notably absent Safari, where, PWA are “under consideration”. Meanwhile, Google is championing the effort, with vast amounts of documentation on PWAs,

PWA provide cost savings and improved performance by employing modern technology, some examples:

  • Google noted that Progressive Web App installed banners convert 5x more often than native app banners.
  • Weather Channel saw a 75% reduction in load time with Progressive Web Apps
  • Forbes PWA homepage loads in less than 1 second.
  • Uber loads in 2.5 seconds on 2 G network.
  • Pinterest saw a 60% increase in engagements

Who does not like an apps that works offline to read when you have time? When you have down time or no connectivity that is when a person will utilize Progressive Web Apps fully and provide the best viewer for your website.

How does a PWA work?

The requirements for a PWA can be quickly added to almost any web application. All you need to do is the following:

Deploy it to a public web server and force HTTPS.

Create and include a JavaScript file with code to cache network requests.

Create and include a web app manifest.

PWAs Features:

  • The Instant Loading PRPL Pattern:
    1. Push critical resources for the initial URL route.
    2. Render initial route.
    3. Pre-cache remaining routes.
    4. Lazy-load and create remaining routes on demand.
  • Preload informs your browser to load a resource you know you’ll eventually need.
  • HTTP/2 to “push” assets to the browser without the user having to ask for them.
  • Code-splitting and lazy-loading for loading of application pages/features.
  • Installed on the home screen as an app icon
  • Remove browser “chrome” / navigation creating a full-screen experience
  • Offline access
  • Push notifications

A Deeper Dive – What is a PWA?

PWAs are the next step in how we interact with the web. There are numerous explanations why progressive web apps are enormously popularity; much of this is because of the slow speed faced by users. Users problems include storage space, internet connectivity, frequent updates, high data consumption and high cost of native apps. Progressive web apps solve all these problems.

Native apps create multiple platforms for Android and iOS, PWA words on all devices. By integrating PWA technology into your website site you can enhance your appearance, speed and retain users.

Preload Critical Resources

Preload is a declarative fetch that requests your browser to cache resources as soon as possible. Preload critical resources works by adding a tag with rel="preload" to the head of your HTML document. The browser setting are altered to priority level to cache elements needed.

Pre-Cache Assets

Service workers can retrieve assets directly from the cache rather than the server on repeat visits. This not only allows users to use your application when they are offline, but also results in faster page load times on repeat visits. Using a third-party library to streamline the process of generating a service worker. Third party libraries offer tools that create and maintain a service worker cache asset.

On its own, the HTTP cache is not enough, so we use service worker. Cache Storage API when called from service worker provides complete control over the contents of the cache. Replacing a combination of HTTP headers and the browser. Inserting versioned URLs to the Cache Storage API cache, the browser avoids an additional network request. Service workers and the Cache Storage API use asynchronous programming, to represent the cached result of async operations

The “A” in PWA stands for “app,” but there is a contrast between PWA’s and native mobile applications.

PWA’s are not a universal replacement for native apps. The experiences of a good app is to bring people back time after time. And if your native app or your PWA experience meets this bar then it both should be considered.  

The NATIVE APP experiences tend to have some common characteristics:

  • They address high frequency use in financial markets,
  • They leverage low level hardware integrations or operating system features not supported by the web and/or are focused on doing so in the future.
  • There is a need (or perceived benefit) for heightened security.

If your existing native app doesn’t check at least one of these boxes above then we recommend reconsidering whether or not you should use a PWA instead of a Native App.

Native apps or vanity apps – are the most likely candidates to be replaced by PWAs over time.

Requirements: HTTPS, Service Workers, and Web App Programming

There are two major components of a PWA.

App Manifest- is a JSON file that differentiates the app, how to launch the app (standalone, full-screen, in the browser etc), and any such related information. It’s located in the root of your app. A link to this file is required on each page that must be rendered.

Service Worker- is where most of the functions occur. It is JavaScript code which functions as alternative code solely responsible for diverting and answering to a network call. A substitute easily programmed. The application must be HTTPS to secure all data. The service worker collects the actual response, including all HTTP. This means that your application can simply make network requests and process the response without any specific code to handle the cache.

PWAs vs. Downloaded Apps

Misconceptions about PWAs:

  • PWA’s only work in Chrome FALSE
  • Not as smooth as native apps FALSE
  • No full-screen mode FALSE
  • Building offline-first isn’t worth FALSE

Progressive Web Apps are a sufficiently established technology that big players like Forbes and AliBaba have adopted them with great success.

Native App features that PWAs can’t duplicate.

  • Highly restrictive access to different hardware sensors
  • Alarms
  • Phonebook Access
  • Modify System Settings

PWA features already exist in some of the more popular JavaScript framework application generators. HTTPS is required. Installing static web apps that access dynamic data has been vastly simplified by CDNs, AWS, CloudFoundry, and Heroku.

Generate a manifest.json file and icons for your PWA using http://realfavicongenerator.net. For online/offline data syncing, you can use solutions like IndexedDB, PouchDB, or with the Background Sync API. This feature is available in Chrome desktop and Android since version 49.

Angular

You can add service worker support and app shell for offline Angular 2+ applications. Angular team is taking the PWA challenge to heart. Ionic is a framework that leverages Angular to create native apps with web technologies. It leverages Cordova to run the app on phones but also has built-in service worker and manifest support if you want to deploy your app to the web.

React

When using Create React App (version 1.0+), a manifest is generated, and an offline-first caching strategy service worker. If you already have a React application, Create React App’s 1.0 release notes tell you how to turn your app into a PWA. Preact is an alternative implementation of React that’s built for speed. It’s a much smaller library that implements the same ES6 API, components, and Virtual DOM support as React. Using it instead of React means your application will have less JavaScript to download, parse, and execute.

Vue.js

Build in PWA with Vue CLI 3.x. There is the @vue/cli-plugin-pwa plugin. You run Vue add PWA to convert to a progressive web app. Vue.js project wizard choose ‘Manually select features’. Then choose to include Vue Router and Babel. Next, we add libraries for styling and making HTTP requests. We use Boot-strapVue for styling, Axios for making requests, Vue-Filter Date Format for formatting dates and Vee-Validate for form validation. After all the libraries are installed, we can start building our app.