Skip to Main Content

Native or the ‘Net? Why Not Both? Now that’s Progressive!

Posted on 6.01.2017
When companies consider building a digital presence, they often waver between focusing on doing so exclusively for the desktop/mobile Web or via iOS/Android applications first. In many ways, companies must choose between native or the ‘Net – but that is beginning to change.

Increasingly, designers and developers are taking a new approach altogether with progressive Web apps (PWAs), an evolution of the concept of “hybrid” apps, which satisfy nearly every expectation of today’s savvy and sophisticated user as well as the demands of modern enterprise – simultaneously. PWAs are essentially a Web application (e.g., mobile-friendly website) that leverage modern development techniques and technologies to deliver an app-like experience to users (that can be defined as one that is super-fast and offers similar functionality to an app – like swiping).
pwa-examples
PWAs enable companies (and the designers and developers they employ) to deploy their digital creations natively (on iOS or Android for example) and on the mobile/desktop Web itself, taking advantage of both channels, and the benefits of both channels – again, simultaneously.

When Google first proposed the concept back in 2015, only visionaries understood the immensity of the potential impact. Today, digital-minded companies are finally realizing their many benefits and potential. These types of websites are called “progressive” because, in essence, they become progressively better depending on what technology is available – loading and performing on a number of different browsers and devices regardless of screen size and other specifications.

Since PWAs are built with what is known as “progressive enhancement” at their core, they will work for every user. A PWA, for example, could serve a stripped-down Web product and the functionality can become progressively more sophisticated as the devices allow. Think of them as multi-purpose tools to build digital experiences, meaning that developers can build these experiences and have them work pretty much anywhere without as big an investment as native apps designed for every particular platform.

The Web apps are progressive in other ways too as they are responsive, connectivity independent, safe (always served over HTTPS) and easily installable. They can also “learn” more about the user the more visits are made – even if they’re not logged in. So, if someone visits the same site a few times, PWAs could actually prompt them to download the link for access from their home screens. The PWA could also invite a reader to receive notifications just like an app, and, since it’s dynamic, it can update with new content on its own and be accessed while offline.

Let’s take a closer look at some of the technology and capabilities under the hood of PWAs.

Native applications provide some useful functionality including sending push notifications, working offline and being able to load from the home screen. Mobile Web apps (those accessed in a mobile browser) have not been able to do those things but are possible with PWAs.

Progressive Web apps make it possible to bring features consumers have come to expect from native apps to the mobile browser experience in a way that uses standards-based technologies and runs in a secure container accessible to anyone on the Web. 

One of the core elements of PWAs are what are known as “Service Workers,” a technology (a JavaScript file really) that powers offline functionality such as push notifications, background content updating, content caching and more. A Service Worker is essentially a script that works behind the scenes, independent of an app, that runs in response to events including network requests, connectivity changes, etc. Think of them as a proxy that enables the PWA to listen to events. 

There are still other important elements of PWAs; the “App Shell” model, for example, is a design concept where the initial load of a mobile Web app provides a basic shell of an app’s user interface (UI), and the content for the app is loaded after. App Shell is not a Web API or a framework, but rather a design approach that developers can choose to adhere to that is enhanced by the caching abilities of service workers. The App Shell essentially makes it possible to keep the shell of the app UI and the content inside of it separate (caching each separately). Having the shell and the content load separately theoretically improves the user’s perception of the performance and usability of the app.

In the future, PWAs will only become more sophisticated with further integration into the devices. For instance, they could tap into location to communicate over Bluetooth with beacons in the real world. A PWA could also work with a phone’s personal assistant, like Siri, making it easier to control the content with voice commands.

There are dozens of PWAs in existence today (see a terrific list at pwa.rocks) including Housing.com, Flipboard and Flipkart (which uses a progressive Web app for its e-commerce platform) to name but a few. It is not always easy to develop with the future in mind, however, but there are some companies aiming to help simplify doing so.

Mobify, a provider of PWAs for the e-commerce market, recently launched an API connector for Salesforce Commerce Cloud that will enable businesses to connect with their audiences (customers, partners, employees). Discover more companies that are leading the charge toward PWAs at wsm.co/pwatech.

A great deal of development is occurring around PWAs (including how they are installed – via manifest files for example) so there is more to come in the digital future. To stay up to date on PWAs and other design trends and techniques to help your brand accelerate its’Net success, visit Website Magazine’s Design & Development channel at wsm.co/deschannel.
code

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up

 

Leave a comment
    Load more comments
    New code
  •    

    The Ultimate Guide to Personalization

    Kibo