Why Teams Choose Progressive Web Apps

[Original Post Here]

Before Progressive Web Apps came onto the scene, businesses looking to build a solution with deep functionality, fast load times and high performance (even offline) looked to native apps. Increasingly, Progressive Web Apps (PWAs) offer the same rich capabilities with added benefits. Code for a Progressive Web App can be written once and deployed across web, Android and iOS platforms, saving teams time and expenditure.

That said — Progressive Web Apps must continue to evolve before fully replacing native solutions, especially considering the breadth of available functionality on iOS devices. What’s the current state of Progressive Web Apps, and how will they revolutionize modern development?

Why Teams Choose Progressive Web Apps

Progressive Web Apps combine the best features of web and native technologies. Teams building a Progressive Web App are — essentially — creating a progressively-enhanced website with app-like functionality.

In my opinion, PWAs are the single biggest thing to happen on the mobile web since Steve introduced the iPhone.
Henrik Joreteg, Twitter: @HenrikJoreteg

Progressive Web Apps increase the speed, depth and quality of the modern web. PWAs shrink inefficiencies for businesses building solutions, remove barriers to publish content and provide users more meaningful experiences. Depending on how users access or install the PWA, it can function with the seamless and native-like behavior of an app or as a website.

According to developer Henrik Joreteg, Progressive Web Apps aren’t just driving the evolution of the modern web — they are the embodiment of it. Developers like Henrik believe PWAs are a superior option because they can be loaded instantly, are universally addressable and deliver “rich app-like experiences that can optionally be persisted for later use.”

PWA Benefits

• High offline performance
• Singular code base to maintain
• Behaves like an app, but built with web technologies
• Allows businesses to bypass the approval processes that govern app marketplaces
• Teams can design beyond iOS or Material Design standards, should they choose

[PWAs are] the missing technology link to bring the best features of the web to solve the issues of native apps and closed marketplaces.
Chris Heilmann, Twitter: @codepo8

Hybrid apps offer some of the same benefits as PWAs, including code reuse and content rendered via the web. Though for hybrid apps, the web content is delivered within a native wrapper. Comparatively, more developers are familiar with web technologies that ladder up to create a PWA than the complexity developing a hybrid app adds.

How has modern web application architecture evolved to allow the creation of PWAs?

Understanding the Service Worker. The introduction of the Service Worker by Google in late 2014 is the heart of the modern web application architecture that enables a PWA to deliver content to users faster, even offline.

The JavaScript Service Worker runs in the background separate from the web page and operates as the intermediary between the user and content. It hosts the platform’s logic and intercepts requests from the user. A PWA’s Service Worker functions as “the dispatcher” of the app — deciding whether to respond to the user with cached content (if the user is offline) or reach out to the internet for current content. The shift to end-to-end HTTPS encryption also enables the security of Progressive Web Apps. Service Workers only run via an HTTPS connection. Read more about Service Worker Compatible browsers.

Understanding the Web App Manifest. The Web App Manifest was equally necessary to the development of the modern web application architecture advancements that facilitate PWAs.

The Web App Manifest enables the creator to share and store metadata information about the web app. Information included in the manifest involves app discovery actions, its appearance, the setup of the home screen icon and more. It is delivered in a JSON file, where a name, description and icon can all be added to distinguish the app. The Web App Manifest also enables the app to be downloaded on the homescreen, alleviating the need to send users interested in downloading to an app marketplace. Members like “background_color” increase the appearance of speed for the user. The Manifest loads before the CSS and provides the ability to create a smoother transition for the user to the ready state of the app.

Building an application as a Progressive Web App can dramatically improve the experience for some of your users without negatively affecting others. It can help you more deeply engage your audience and provide better functionality.
Stephen Fluin, Google Developer Advocate, Twitter: @StephenFluin

Understanding the Application Shell. Where does the application shell fit in the modern web application architecture of a Progressive Web App? According to the article, “Your First Progressive Web App,” continued use of the application shell enables the fast startup times developers seek and users love. The shell is built from JavaScript, CSS and HTML. The first time it is loaded, the files are cached. After that first transfer, they are loaded from cache of the local device. Read more about the application shell.

What browsers are Service Worker Compatible?

For teams looking to build an app ASAP to serve all browsers, take a pause. Progressive Web Apps are evolving to deliver an equal experience across browsers and operating systems. Though, they’re not there yet. Users accessing a PWA through Chrome on an Android device can leverage all features of the technology. iOS users are not so fortunate — YET. Users accessing a PWA from an Apple device can’t take advantage of caching capabilities because Safari is not currently Service Worker compatible.

For more on progressive web apps, read the eBook.

Innovate with us! Click here to access all of our free resources.
Authored by Emily Genco.