by Majid Hajian | Publisher: Packt Publishing | Release Date: March 2018 | ISBN: 9781787285958

Learn the skills to build blazingly fast applications which look just like your native mobile app.About This VideoUnderstand why PWAs are important and what they solveLearn core PWA concepts and how to implement them in an existing application or build from scratchPractical in-depth lessons about service workers, the Fetch API, promises, push notifications, caching, and app manifests.Learn how to turn a Single Page Applications (SPAs) into a PWA.In DetailThis course teaches you how to build discoverable and engaging progressive web applications (PWAs) using the Cache API to make it offline-ready and blazingly fast service workers to intercept network requests and web app manifests, thus leveraging native-like features.We begin by introducing the core concepts of progressive web apps, explaining each of them in detail and finishing up by implementing them into a production-ready app.A service worker is the main PWA tool. In this course, you will master the power of new APIs including the Fetch API, promises, and more. Don't lose your users when their internet connection is lost; get hands-on with powerful caching and network request strategies to provide synchronization of data while your app is offline. Learn how to improve user engagement with your apps by adding push notifications.We also cover app manifests in depth to let your users add your application to their mobile home screen and reopen the app as easily as tabbing on the web app icon, just as with other native mobile apps. They'll also surf while there is no address bar; the user experience feels like a native mobile app due to the addition of a splash screen, application shell, native default color, and more.Tools are always helpful while developing software; therefore, this course teaches you how to boost your productivity by using Workbox, to make service worker management a lot easier, and Lighthouse, to show your PWA score demonstrate and how you can achieve 100/100.All of the topics in this course feed into a practical project which, by the end of the course, is ready to deploy to production. To ensure that the app is useful for any kind of project later and also that you can learn everything in depth, the course project is created in pure JS/CSS/HTML.Last but not least, SPAs (Single Page Applications) are super-critical as these days they perform such a leading role in web development and building hybrid and native mobile apps. Therefore, this course dedicates a section to show you how you can use Angular, React, Ember, and Vue.js to build a progressive web application.All the code and supporting files for this course are available on Github at https://github.com/PacktPublishing/Progressive-Web-Application-Development

1. Chapter 1 : Introduction to PWA
   • The course Overview 00:04:17
   • What Really is a PWA? 00:03:38
   • PWA Core Concepts 00:02:39
   • What is PRPL Pattern? 00:02:25
   • Demo of Final Course Project 00:02:43
   • Responsive UI 00:02:31
   • Tools Overview and Setup 00:04:52
2. Chapter 2 : Understanding Web App Manifest
   • Understanding App Manifest Properties 00:08:55
   • Add Properties to manifest.json 00:08:10
   • Prerequisites for Installing Web App 00:02:22
   • Run Android Emulator and Leverage Chrome Dev Tools for Debugging 00:05:23
   • Add Properties for Safari 00:03:34
   • Add Properties for Internet Explorer 00:04:18
3. Chapter 3 : Service Worker
   • Promise API 00:16:07
   • Fetch API 00:13:15
   • What Is a Service Worker and How it Works? 00:03:49
   • Events in Service Worker 00:02:55
   • Service Worker Lifecycle 00:04:02
   • Scope Working for a Service Worker 00:01:07
   • Register, Update, and Activate SW 00:11:58
   • Debug Our Service Worker 00:07:50
   • Install App Banner and Control Over it 00:11:18
   • Debug and Test on Android Emulated Device 00:08:24
   • Practice with Our Final App Project 00:08:06
4. Chapter 4 : Cache and Offline Support
   • Storage Options 00:03:38
   • Cache API 00:03:43
   • Pre-Caching/Static Caching 00:04:12
   • ES6 Overview 00:02:46
   • Add, Update Cache 00:09:42
   • Respond with Cache 00:06:03
   • Dynamic Caching Upon Fetch 00:10:51
   • Offline Respond Placeholders 00:07:22
   • Remove/Cleanup Caches 00:13:06
   • Caching Strategies 00:14:48
   • Practice with Our Final App Project 00:12:48
5. Chapter 5 : Dynamic Content Cache
   • IndexedDB/Write Data 00:12:03
   • IndexedDB/Retrieve and Delete 00:06:17
   • Tools to Help Create Cache and Service Worker 00:09:19
   • Practice with Our Final App Project 00:11:56
6. Chapter 6 : Deployment to Firebase
   • Setup Firebase CLI 00:04:45
   • Make Our App Ready to Deploy 00:04:07
   • Deploy to Firebase 00:03:43
7. Chapter 7 : Background Sync
   • How Background Sync Helps 00:02:36
   • Register a Synchronization Task 00:09:32
   • Storing Our Data in IndexedDB and Firebase 00:11:51
   • Syncing Data in Server Worker with Server 00:14:38
   • Periodic Sync 00:04:08
8. Chapter 8 : Push Notification
   • Push Notification Fundamentals 00:02:14
   • Request Permission, Subscription, and Display Notification 00:07:01
   • Store Client Subscription and Secure It in Backend 00:14:36
   • Send Notification from Server and Listen from Service Worker 00:13:25
   • Clean Up Subscriptions 00:06:33
9. Chapter 9 : PWA with SPA
   • PWA in an Angular App 00:14:26
   • PWA in a React App 00:08:28
   • PWA in a Vue App 00:08:56
   • PWA in an Ember App 00:19:04