• Skip to main content
  • Skip to footer

InRhythm

Your partners in accelerated digital transformation

  • Who We Are
  • Our Work
  • Practices & Products
  • Learning & Growth
  • Culture & Careers
  • Blog
  • Contact Us

Nov 07 2022

Progressive Web Applications: The Best Of Web And Native

Overview

The web is an incredible platform. Its mix of ubiquity across devices and operating systems, its user-centered security model, and the fact that neither its specification nor its implementation are controlled by a single company makes the web a unique platform to develop software on. Combined with its inherent linkability, it’s possible to search it and share what you’ve found with anyone, anywhere. 

Web applications can reach anyone, anywhere, on any device with a single codebase.

Progressive Web Apps (PWAs) provide access to open web technologies, to provide cross-platform interoperability. PWAs provide users with an app-like experience that’s customized for their devices.

PWAs are websites that are progressively enhanced to function like installed, native apps on supporting platforms, while functioning like regular websites on other browsers.

In Aleks Rokhkind’s Lightning Talk session, we will breaking down the following topics:

  • Overview
  • App User Expectations
  • PWAs
  • Service Workers
  • Live Demonstration
  • Closing Thoughts

App User Expectations

Users expect to have an incredibly intuitive and smooth experience while interacting with both web-based and native mobile applications. However, on mobile devices, users often prefer interacting with the same content via the native app in real time, rather than an external browser. As a result, content providers are forced to maintain multiple codebases that need to simultaneously target different platforms in order to meet these expectations. 

PWAs

Progressive Web Applications work to address this cross-device challenge. In short, a Progress Web Application, or a PWA, is a website that has a near identical feel to a native application on a mobile device. 

A PWA looks to combine the direct advantages of both the web, as well as implementing the ability to intuitively work offline per a native application. 

As a website, a PWA touts a few advantages over native apps:

  • Discoverability – can be easily discovered in online search engines and implements SEO recommendations 
  • Linkability – can be viewed, installed, and shared from a URL, effectively bypassing an app store

As an application, PWAs allow for implementations that are quite similar to native apps:

  • Installability – users can instantly open the app, by tapping an icon on the device’s home screen, effectively allowing it to look and feel more like a native app
  • Network Independence – provides an offline experience
  • Re-Engageability – background sync, providing user push notifications
  • Access To Device Hardware – camera, microphone, motion sensors, geolocation, etc. 

In order to meet a plethora of different needs, a PWA is not a singular technology but instead an amalgamation of a number of intersecting hardwares:

  • Service Worker – a background script running tasks for the main application
  • HTTPS – allowing only secure connections
  • Manifest File – a JSON file with metadata that helps to install said PWA on a device, similar to native application files

Service Worker

A service worker is a proxy object that sits between a web application and the overall network. 

A service worker can perform a number of tasks and capabilities, that include but are not limited to: 

  • Intercepting, modifying, and serving the network requests and responses of the application. For example, when a device is offline, the service worker can serve up a previously cached response in order to provide a decent offline experience
  • Caching both the device’s static assets (stylesheets, scripts, icons, HTML, etc.) and dynamic data
  • Handling push notifications as well as background sync, even when the application is not being actively used
  • Running in threads separate from the main application, in order to cut down on slower run times

Live Demonstration

You’ve unpacked quite a few PWA principles – think you’re up to trying your hand at some practical application exercises?

Aleks Rokhkind has created an individual testing space just for you!

To rise to the challenge and apply what you’ve learned to the following application exercise, click here. 

Closing Thoughts

At their heart, Progressive Web Apps are just web applications. Using progressive enhancement, new capabilities are enabled in modern browsers. Using service workers and a web app manifest, a web application becomes reliable and installable. 

Progressive Web Apps provide a unique opportunity to deliver a web experience that users will love. Using the latest web features to bring enhanced capabilities and reliability, Progressive Web Apps allow a build to be installed by anyone, anywhere, on any device with a single codebase.

Happy coding!

To learn more about the implementation of Progressive Web Applications and to experience Aleks Rokhkind’s full Lightning Talk session, watch here.

Written by Kaela Coppinger · Categorized: Learning and Development, Product Development, Software Engineering, Web Engineering · Tagged: Application Development, best practices, INRHYTHMU, learning and growth, progressive web apps, PWAs, software engineering, Web Development

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

Interested in learning more?
Connect with Us
InRhythm

110 William St
Suite 2601
New York, NY 10038

1 800 683 7813
get@inrhythm.com

Copyright © 2023 · InRhythm on Genesis Framework · WordPress · Log in

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT