Progressive Web Application Development

Course Description

This is a hands-on course that will cover all of the key characteristics of a PWA and create a number of Progressive Web Applications that demonstrate these key features. Some organisations would like to give an enhanced user experience to the mobile users of their website but may not have the resources to develop a native app for both android and iphone. For these cases a progressive web application which combines the flexibility of the web with the experience of a native application can be the perfect solution. Progressive web applications (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications and device hardware access traditionally available only to native applications.
3 days
Contact us for pricing

Prerequisites

This course assumes knowledge of web application development, HTML, CSS and JavaScript.

Introduction

What is a PWA?
PWAs vs Native Mobile Apps
The Characteristics of a PWA

• Progressive
• Responsive
• Connectivity independent
• App-like
• Fresh
• Safe
• Discoverable
• Re-engageable
• Installable
• Linkable

A First PWA

App Manifest
Serving pages using https
Chrome developer tools
Testing on an emulated device
Testing on a real device

Service Workers

What is a service worker?
Service worker events
Service worker lifecycle
Testing your PWA offline

Asynchronous Communication

Ajax
Promises
Fetch
Understanding CORS

Caching

What is caching?
Introduction to the Cache API
Serving files from the cache
Caching modes - cache only, network only, network falling back to cache, cache then network
Dynamic caching
Advanced offline operations

IndexedDB and Dynamic Data

Caching dynamic content
What is IndexedDB?
When to use caching and when to use IndexedDB?

Using Native Device Features

Installing - add to homescreen
Push Notifications
Accessing device location
Accessing the camera

Auditing your PWA

Chrome developer tools
Lighthouse
PWA checklist

Modern Web DevelopmentJavaScriptFront End Web DevelopmentWeb DevelopmentProgressive Web ApplicationPWAFullstack Web Development