Get the best of both worlds with a Progressive Web App

Frank Zinghini

Founder & CEO
today
timer
Get the best of both worlds with a Progressive Web App

Mobile usage has surpassed desktop usage across the world, pushing many businesses towards a mobile-first mindset. Apps account for more than 80 percent of the time spent on mobile devices, as users typically find these easier to navigate and more responsive.

But mobile websites cannot be forgotten, as they provide a broader reach, are accessible across platforms, and can easily be shared and forwarded via a link. Enter the Progressive Web App (PWA), which delivers the best of both worlds.

A PWA provides the functionality of a website with the look and feel of a mobile app. PWAs are becoming more popular as some large companies are moving in this direction.

What is a Progressive Web App?

PWAs are a fairly recent development in the app world, first developed by Google in 2015. A PWA is a website, so it offers the functionality of modern browsers, but maintains the look and feel of an app.

They are simple to use—just navigate to a website like you normally would. If the site is running a PWA, an icon will appear asking you if you want to add the app to your home screen. The PWA will then behave the same as any other app on your phone. The browser the user was in when the app was added to the home screen becomes the default browser for running the PWA.

There are four main parts to a PWA:

  • Service Worker—This is the foundation of Progressive Web Apps. The service worker powers many of the features of PWAs, including offline navigation. It is a Javascript file that runs separately from the main browser thread. Service workers run independently of the app. Additional information on service workers is available here.
  • HTTPS—Hypertext Transfer Protocol Secure (HTTPS) provides secure HTTP communications using Secure Sockets Layer (SSL) or Transport Layer Security (TLS) encryption. HTTPS is critical for the security of PWAs, as the service workers they use run independently and can therefore be exploited.
  • App Shell—The app shell contains the minimum amount of HTML, CSS, and Javascript required to power the user interface. The shell can be pre-cached by service workers, improving the loading and performance of the app. On future loads, the app only has to retrieve the data, not the shell.
  • App Manifest—This is a JSON metadata file that provides the name, author, and other descriptive information about your PWA. It follows a standard schema, which will work across any operating system and platform that supports PWAs. It allows the PWA to be installed from the browser and pinned to the home screen.

Many big companies such as Forbes, Twitter, and Pinterest have gone the PWA route, because they believe what these types of applications can offer can provide a better user experience than traditional apps.

Why should I build a PWA?

  • Universal design—PWAs work for every user, regardless of browser, device, and location.
  • Push notifications—PWAs are “push” apps, allowing you to push updates and other content such as product or sales information to users. If you’re in retail, immediate notifications offer a big advantage for revenue opportunities. Push notifications are also great for keeping users or employees aware of upcoming events, changes in schedules, and other important information.
  • Caching—PWAs can function offline, thanks to the service worker and a cache API. This means your users can access your site even when they do not have an internet connection, overcoming the major disadvantage of mobile apps. Caching also decreases load time, which every user loves.
  • Reliability—Offline availability provides reliability. PWAs also perform well under all network conditions.
  • No app store required—PWAs are downloaded very quickly, right from the browser. Users do not need to go to an app store. This also means developers do not need to submit their PWA to the Google Play or Apple store for review and approval.
  • Automatic updates—Updates to PWAs are automatically downloaded the next time the user launches the app.
  • Less storage required—PWAs are much smaller than traditional apps, taking up less storage space on the user’s device. To provide perspective here, when Twitter moved to a PWA, the required storage space decreased from 100MB to 0.6MB.
  • Usability—PWAs present a familiar User Interface (UI), making them easily usable. Users are accustomed to the look and feel of apps, making PWAs more intuitive and engaging.
  • Less maintenance—A PWA allows you to combine your mobile website and mobile app. Your development team only needs to maintain one product while still delivering a comprehensive mobile presence for your business.
  • Less expensive—PWA apps cost less money to develop. They work on multiple platforms, which reduces the cost of development. Developers who code in Java, CSS, and HTML are easier to find—and typically less expensive. Circumventing the app store also saves time and money.
  • Improved revenue and conversion rates—Users are eating up PWAs, finding them convenient and responsive. The numbers do not lie. Best Western River Hotel saw a 300 percent increase in revenue with its PWA, while BookMyShow saw conversion rates increase by 80 percent.
  • Support from Apple has arrived—Originally, PWAs were only supported by Android, but that has changed. With iOS 11.3, Apple added support for PWAs.

When is a PWA not the best approach?

  • You need to access certain device features or peripheral hardware—Due to lack of access to the device hardware, there are certain device features which PWAs cannot access, such as Bluetooth, contacts, and advanced camera functionality. If, for example, you’re building an app that needs to access Bluetooth to connect to the user’s smartphone or Apple watch, then you have no choice—you must build a native app. This is an area where native apps still reign supreme.
  • You want added credibility and brand awareness—Many users are still accustomed to searching for apps in the app stores, so PWAs run the risk of missing out on potential new users. Apps posted in the stores have passed required security and performance tests, adding credibility to your product. Ranking high in the app store can increase visibility and brand awareness. A native app is required if you want to reap the benefits of the well-known and highly trafficked app stores.
  • Speed is a requirement—Since PWAs run on a browser, they perform more slowly than native apps (where the code resides directly on the device). If you’re looking for the fastest performance times possible, native apps will deliver.
  • Your app requires NFC support for mobile payments—Near Field Communications (NFC) allows users to make purchases with their phones. Guess what? PWAs are unable to access NFC chips. A native app wins out if you want mobile payment support.
  • You want your app to be able to interact with other apps—PWAs are unable to interact with other PWAs and other native apps. Why is this important? If you want to save your users time by, for example, allowing them to log in to your app with their Facebook credentials, then your app needs to “speak” to the Facebook app. A PWA will not allow this, but a native app will.
  • Battery drain would be poorly received by users—While many apps require a good deal of battery power to run, PWAs generally require more battery power from your device, so they can cause a drain. If this is likely to be an issue for your primary user base, a native app is the better choice.

PWAs bring a lot to the app design and development table, but they do have their limitations. As support for this newer kind of app continues to develop, we expect to see an upward growth trajectory for PWA development.

Since PWAs are relatively new to the app scene and they are not always the right choice for your needs, we recommend working with an expert team that is well-versed in app design and development. A skilled team can steer you in the right direction and make sure your app is usable and successful in the market.