Chapter Goal: Learn the basic concepts for building Progressive Web App. Learn to build a simple “to do” app and making it into a PWA as well as some critical concepts along the way.
Sub-topics
1. Introduction
2. What is a PWA?
3. What is the structure of a PWA?
4. Our WebApp
5. Creating our Manifest
6. What’s the structure of a PWA?
7. Our WebApp
8. Building our Manifest
9. Creating our Service Worker
10. How can we test what we have done?
Chapter 2: Foundations and App Manifest
Chapter Goal: Learn about “App Shell” design and the HTML, CSS, and JavaScript required to activate the user interface as well the use of cache.
Sub-topics
1. App Shell design
2. The PRPL architecture pattern
3. Structure of the app
4. The main entry point
5. The App Shell
6. The Build
7. Bundled build
8. The Manifest file
9. How to add a manifest file to web?
10. How to customize the app start on mobile?
Chapter 3: Service Workers
Chapter Goal: Learn to handle JavaScript through Service Worker that runs in the background, regardless of whether a web page is open or not. Also, the understand importance of features such as Offline Support and Push Notifications, among others.
Sub-topics:
1. What is a Service Worker?
2. Why are Service Workers needed?
3. Understanding life cycle
4. How to add a Service Worker?
5. Asynchronous calls
6. Fetch API
7. Using API in the Service Worker
8. Cache
Chapter 4: Caching Strategies
Chapter Goal: Solutions that work well to handle the status without connection, such as PouchDB or Firebase, are shown. However, use of web technologies, such as Service Workers, indexedDB, and Cache API, will enable offline strategies for Progressive Web Apps.
Sub-topics:
1. When to store the information?
2. When to update our files of the Cache Storage?
3. How to respond to Requests?
Chapter 5: IndexBD
Chapter Goal: Learn necessary characteristics of IndexedDB: how a transactional database system, which unlike other options that we have in browsers, is perfect to store big data quantities, for example, catalogs or other ones that also need a fast information search.
Sub-topics:
1. What is IndexedDB?
2. How to use IndexedDB?
3. How to open a DB?
4. How to initiate read/write in the Object Store?
5. How to delete inside the Object Store?
6. Using IndexedDB in my App
Chapter 6: Background Sync
Chapter Goal: Learn functionality of Background Sync (one of the most powerful features that combined with our Service Worker will grant us a great power to build progressive web applications).
Sub-topics:
1. SyncManager
Chapter 7: Push Notification
Chapter Goal: Study Push Notification that is basically an interaction that includes the Push API and Notification API.
Sub-topics:
1. What is a Push Notification?
2. How does the ecosystem of a Push Notification work?
3. Push API
4. API Notification
5. Implementing a Push Notification in our App using Firebase
Carlos Rojas is an Engineer with 10+ years of experience building Digital Products. He is focused on Front-end technologies (HTML, CSS, JS, Angular, and VueJS ) and mainly edge web technologies like Web Components and Progressive Web Apps. He also has some experience working with fast-changing business environments like Startups.
He enjoys sharing knowledge with Talks in Meetups, helping Startups and Companies to run workflows to make excellent digital products. Because of that, his books want to convey the love he has for the construction of scalable, high-quality products.
Obtain all the necessary tools for developing a progressive web application (PWA) with Vue.js, a modern JavaScript framework. You’ll see how PWAs behave like a regular responsive website and have a similar structure to that of a web application, but feel like a native mobile app. Along the way you’ll take advantage of Vue.js features to build fast, high-performing progressive web apps that work offline.
Building Progressive Web Applications with Vue.js starts by explaining the basic concepts and structure of PWAs, and moves on to designing the app shell and other features that distinguish a PWA from simple web pages. In the following chapters, the book talks about the improved web technologies, such as service workers, caching strategies, background sync, and push notifications, that make PWAs powerful.
You will:
Harness the power of Vue.js to build PWAs
Understand the function and relevance of a manifest file
Discover service workers and why they are revolutionary
Work with the Cache API and caching strategies
Use IndexedDB, background sync, and push notifications