Progressive Web App (PWA)
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. Its uses modern web capabilities to deliver an app-like user 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, because the app shell model separates the application functionality from application content.
- 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 add apps they find most useful to their home screen without the hassle of an app store.
- Linkable – Easily share the application via URL, does not require complex installation.
Progressive Web App codelab will walk you through creating our own Progressive Web App, including the design considerations, as well as implementation details, to ensure that our app meets the above key principles of a Progressive Web App.
Why Should You Build a PWA?
You should make your webapp into a PWA because it’ll reduce the time it takes for your app to load and it’ll give your users a better experience. Having it load over HTTPS is a good security practice and adding icons (using a web app manifest) is something you’d do anyway. Having a cache-first service worker strategy will allow your app to work offline (if the user has already loaded data), alleviating one of the biggest issues with webapps.
There are a number of other performance recommendations you can implement in your webapp. While the following list is not required for PWAs, many PWAs employ these elements:
- Implement the PRPL pattern:
- Push critical resources for the initial URL route.
- Render initial route.
- Pre-cache remaining routes.
- Lazy-load and create remaining routes on demand.
- Use <link rel=”preload”> to tell your browser to load a resource you know you’ll eventually need. This is a W3C Standard specification.
- Use HTTP/2 and server push to “push” assets to the browser without the user having to ask for them.
- Use code-splitting and lazy-loading for granular loading of application pages/features.
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 later offline use
What we’ll need
- A recent version of Chrome. Note, this works in other browsers as well, but we’ll be using a few features of the Chrome DevTools to better understand what’s happening at the browser level.
- Web Server for Chrome, or your own web server of choice
- The sample code
- A text editor
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.
Getting set up
Follow the link below: