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?

Progressive Web Apps 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 whatever is next.
• Connectivity independent - Enhanced with service workers to work offline or on low quality networks.
• App-like - Feel like an app to the user with app-style interactions and navigation because they’re 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 ensure content hasn’t been tampered with.
• Discoverable - Are identifiable as “applications” thanks to W3C manifests 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 share via URL and not require complex installation.

This getting started guide 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?

In this getting started guide, you're going to build a Weather Web App using Progressive Web App techniques.

Let's consider the properties of a Progressive Web App:

• Progressive - we'll use progressive enhancement throughout
• Responsive - we'll ensure it fits any form factor
• Connectivity independent - we'll cache the app shell with service workers.
• App-like - we'll use app-style interactions to add cities and refresh the data.
• Fresh - we'll cache the latest data with service workers.
• Safe - we'll deploy the app to a host that support HTTPS.
• Discoverable and installable - we'll include a manifest making it easy for search engines to find our app.
• Linkable - it's the web!

Try it

What will you 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

Topics covered

1. Architect the App Shell
2. Implement the App Shell
3. Start with a Fast First Load
4. Use Service Workers to Pre-cache the App Shell
5. Use Service Workers to Cache Application Data
6. Support Native Integration
7. Deploy to a Secure Host and Celebrate!

What you’ll need

• Chrome 47 or above
• A knowledge of HTML, CSS and JavaScript

This getting started guide is focused on Progressive Web Apps. Some concepts are glossed over or code blocks (for example styles or non-relevant JavaScript) or are provided for you to simply copy and paste.