Description
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.
What You Will Learn
- 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
- Enhance your apps with Firebase
- Implement the Workbox library in your apps
Who This Book Is For
Web developers who want to venture into building PWAs would find the book useful.
Table of Contents
Chapter 1: Making Your First PWA
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 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
