Time to Add Progressive Web Apps to Your Toolkit

Monday 12/18/17 09:00am
|
Posted By Kevin Hawkins
  • Up0
  • Down0

Thanks to new web standards, the HTML layer that runs on most web browsers1 can now render more complex and dynamic content than ever before. And with the addition of fast mobile processors such as the Qualcomm® Snapdragon™ mobile platform; the “web app vs mobile app debate” is increasingly bringing the topic of Progressive Web Apps (PWAs) into your app development options.

PWAs, as we will see in examples below, are also delighting users by reducing the storage on their devices, providing faster access to app functionalities and even working in offline modes. By understanding a few fundamentals of PWAs, you can add them as a potential new application type for your future development projects.

Woman with walking stick looking at phone stands next to man wearing backpack

What is a Progressive Web App?

A PWA is more than just a web app or a responsive web site. There are several frameworks you can use to develop PWAs, however for an app to be considered a PWA, it must include the following three components:

myapp.me homescreen
With one touch, a user can add your bookmark to their home screen and it appears as an icon, for a familiar mobile app experience.
  1. Name: Web Manifest File
    Highlights: Makes a PWA searchable, provides familiar UX
  2. The manifest file is a JSON file that describes basic information about your application including its name, icon used on the home screen, and description. Once registered, the user can save a shortcut to the PWA on their home screen as an icon. This manifest data also allows the PWA to be identified by search engines.

  3. Name: Service Worker
    Highlights: Faster loading, offline functionality
  4. A Service Worker is a script that is registered by one of your PWA pages and is run by the browser in the background. In the context of PWAs, it acts as a programmable network proxy, written in JavaScript allowing you to control how network requests from your page are handled. For example, with smart pre-caching, your user can get a faster and more reliable experience since non-critical resources are loaded on-demand. This reduces network transmission and JavaScript parse/compile times. Furthermore, a Service Worker also allows for the app to load and work while offline.

  5. Name: HTTPS
    Highlights: Security
  6. HTTPS provides an encrypted connection to a server and is required when using a Service Worker because it can intercept and handle network traffic. Registering a Service Worker on a page served over HTTPS helps ensure that the Service Worker received by the browser has not been tampered with by a 3rd party.

Deep Interactivity is Still Possible with PWAs

Even though they sound simple, PWAs can offer deep interactivity. Several well-known companies have launched PWAs to improve their customers’ mobile experience. These PWAs offer nearly the full functionality of a mobile app, without large storage requirements and with noticeably faster load times. They also provide a full-screen appearance and can maintain responsiveness when the network is unreliable.

One of the most prominent examples is Twitter, whose PWA works offline and uses push notifications. Instagram’s PWA allows for use of the native camera. The Starbucks PWA allows for mobile ordering, mobile payment, and account management functionalities while reducing its size to less than 1% of its mobile app counterpart. They and others are reporting faster adoption rates and overall happier customers.

PWAs also provide better discoverability and sharing, which is a big win for the virality of your app. For example, a ride-sharing PWA is not only smaller than a native app, but also provides an opportunity to share a link, allowing a friend to track your route instantly without having to download an entire mobile app. The same functionality is also being used in display ads, where it is easier and faster to share a URL than to force a user to download an app from an app store.

PWAs as a Development Option

PWAs don’t provide all the functionality that native mobile apps do, so using a mixed development strategy to meet the demands of your user segments is recommended. If a PWA isn’t ideal for your specific needs, don’t forget you can always utilize the Snapdragon mobile platform with supporting tools such as the Qualcomm Snapdragon Profiler and Power Optimization SDK in your app development, which can provide optimized application speed, thermal efficiency and battery life.

[1] Browsers which currently or will soon support PWAs are Chrome, Edge, Firefox, Opera, Samsung Internet, and Safari.