Back to top

Progressive Web App (PWA) Development

Duration: 2 days | Price: € 499,00

📣 30% discount for multiple people from the same company.

Prerequisites

OOP, Javascript (ES6) , HTML and CSS

Description

PWAs act like native mobile apps but are actually websites. According to some studies, PWAs have 36% higher conversion rates than native apps; in fact, their usage is continuously growing. The main goal of PWAs is to offer users an experience similar to a mobile app on all devices.

PWAs are more interactive and responsive; for these very reasons they are revolutionizing the user experience through app-like functionality but without the burden of having to download it. Some of the biggest names in the industry, such as Amazon, Twitter and Forbes, are combining native and web apps to increase conversions and reduce bounce rates. The advent of PWAs has made global brand identities stronger because of the way they work offline, fast loading and page speed.

Contents

Introduction
  • What are Progressive Web Apps?
  • PWA vs. Native Mobile App
  • Our first PWA
  • Main blocks of a PWA
  • Comparison between PWA and SPA
Let’s get to know the App Manifest
  • What is it?
  • Using App Manifest
  • Adding App Manifest
  • App Manifest properties
  • PWA and Browser Support
  • Simulating the Web App in an Emulator
Service Workers
  • What is it?
  • Why Service Workers are awesome!
  • Let’s learn about Events
  • Lifecycle and Non-Lifecycle Events
  • Browser support
  • SW Registration
  • Reacting to Incoming Events
  • Update and Activate SW
  • Get the “Install App” Banner
Service Workers - Caching
  • Why use Cache
  • Let’s learn about the Cache API
  • Browser support
  • Identify Pre-Cachable Objects
  • Static Cache
  • Using Cache Objects
  • Cache multiple files
  • Dynamic caching
  • Error Handling
  • Cache versioning and cleaning
  • Cache management optimization
  • On Demand Cache
  • Fallback Page and Offline Support
Background Sync
  • How does Background Sync work?
  • Synchronize data in the SW
Notification API
  • What is it?
  • Browser Support
  • Request Permissions
  • Viewing Notifications
  • Notifications from within the SW
  • Notification Options
  • Adding Action to Notifications
  • Reacting to Interactions with Notifications
  • From Notifications to Push Messages
  • Create a Push Subscription
  • Storing Subscriptions
Storage Strategies
  • Which to Use

Request information