Your First Progressive Web App

Introduction

Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience.

What is a Progressive Web App?

A Progressive Web App is:

• Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
• Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.
• Connectivity independent - Enhanced with service workers to work offline or on low-quality networks.
• App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model.
• Fresh - Always up-to-date thanks to the service worker update process.
• Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
• Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
• Re-engageable - Makes re-engagement easy through features like push notifications.
• Installable - Allows users to "keep" apps they find most useful on their home screen without the hassle of an app store.
• Linkable - Easily share via URL, does not require complex installation.

This codelab will walk you through creating your own Progressive Web App, including the design considerations, as well as implementation details to ensure that your app meets the key principles of a Progressive Web App.

What are we going to be building?

What you'll learn

• How to design and construct an app using the "app shell" method
• How to make your app work offline
• How to store data for use offline later

What you'll need

• Chrome 52 or above
• Web Server for Chrome, or your own web server of choice
• The sample code
• A text editor
• Basic knowledge of HTML, CSS, JavaScript, and Chrome DevTools

This codelab is focused on Progressive Web Apps. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.