Skip to content


Progressive Web App (PWA)

Now that most libraries have hopped on the Responsive Design bandwagon, what’s the next step?

I’m liking what is happening with Progressive Web App (PWA) which has some big player support.

Here’s a quick overview but a simple search will help you learn more.

“Progressive Web App (PWA) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications. The application type attempts to combine features offered by most modern browsers with the benefits of mobile experience.”

“Background

Since around 2005 web development technologies have shifted from static to dynamic documents driven by server (PHP, ASP.NET) and client side (e.g. Ajax [1]) tools, and responsive web design.[2] Despite an early push for web-based apps based on these technologies on devices such as the 2007 iPhone, attempts at web-apps failed by comparison to native-apps. Native apps provided a better user experience and booted faster compared to having to load in a browser at runtime. Packaged resources and direct access to hardware allowed native apps to perform much faster and to provide more features. By the mid 2010s, however, continued enhancements in HTML5, CSS3, and JavaScript, significantly more capable and standards compliant web browsers, along with powerful processors such as the A10 and Snapdragon 821 made performant hybrid-apps a viable alternative.

Hybrid Apps

Hybrid apps mimic the native mobile UX, and need an App store download. As such they consume storage. The combination of markup, styling sheets, and scripts enable custom interactive page elements without the use of closed systems such as Flash. Partially running in a mobile browser, hybrids did not have a URL, supported a rich User interface and access to system capabilities. Newly released CSS3 and JavaScript frameworks allowed new design patterns such as the box model followed by grids and flex, accompanied by translations, transformations, animations.

Characteristics

In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term “Progressive Web Apps” [3] to describe apps taking advantage of new features supported by modern browsers, including service workers and web app manifests, that let users upgrade web apps to progressive web applications in their native operating system (OS). According to Google Developers,[3][4][5] these characteristics are:

  • Progressive – Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
  • Responsive – Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
  • Connectivity independentService workers allow work offline, or on low quality networks.
  • App-like – Feel like an app to the user with app-style interactions and navigation.
  • Fresh – Always up-to-date thanks to the service worker update process.
  • Safe – Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
  • Discoverable – Are identifiable as “applications” thanks to W3C manifests[6] and service worker registration scope allowing search engines to find them.
  • Re-engageable – Make re-engagement easy through features like push notifications.
  • Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  • Linkable – Easily shared via a URL and do not require complex installation.

Progressive Web Apps described by Shoaib in a follow-up post:[7] are an enhancement of existing web technology. As such, they do not require separate bundling or distribution. Publication of a Progressive Web App is as it would be for any other web page. As of 2017, Progressive Web Apps are supported by the Chrome browser, but more browsers may support the features needed in the future.

The technical baseline criteria for a site to be considered a Progressive Web App by browsers were described by Russell in a follow-up post:[8]

  • Originate from a Secure Origin. Served over TLS and green padlock displays (no active mixed content).
  • Load while offline (even if only a custom offline page). By implication, this means that Progressive Web Apps require Service Workers.
  • Reference a Web App Manifest with at least the four key properties: name, short_name, start_url, and display (with a value of standalone or fullscreen)
  • An icon at least 144×144 large in png format. E.g.: “icons”: [ { “src”: “/images/icon-144.png”, “sizes”: “144×144”, “type”: “image/png” } ]”

 

Stephen

Posted on: January 5, 2018, 9:28 am Category: Uncategorized

0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.