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.
Duration: 3 days
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