Progressive Web Apps

Written by Cody Lindley

The Front-End Developer Roadmap from Frontend Masters - Advance your skills with in-depth, modern front-end engineering courses.


Overview:

Learning resources and tools.


Definitions:

Progressive Web App
A type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser. Functionality includes working offline, push notifications, and device hardware access, enabling creating user experiences similar to native applications on desktop and mobile devices. Since a progressive web app is a type of webpage or website known as a web application, there is no requirement for developers or users to install the web apps via digital distribution systems like Apple App Store or Google Play. While web applications have been available for mobile devices from the start, they have generally been slower, have had fewer features, and been less used than native apps. But with the ability to work offline, previously only available to native apps, PWAs running on mobile devices can perform much faster and provide more features, closing the gap with native apps, in addition to being portable across both desktop and mobile platforms. PWAs do not require separate bundling or distribution. Publication of a progressive web app is as it would be for any other web page. PWAs work in any browser, but "app-like" features such as being independent of connectivity, install to home screen, and push messaging depend on browser support. As of April 2018, those features are supported to varying degrees by the Microsoft Edge, Google Chrome, Mozilla Firefox, and Apple Safari browsers, but more browsers may support the features needed in the future.[1][2] Several businesses highlight significant improvements[3] in a wide variety of key performance indicators after PWA implementation, like increased time spent on page, conversions, or revenue.

Contribute content, suggestions, and fixes on github:

https://github.com/FrontendMasters/learning-roadmap