PWA with Vue JS, Quasar & Firebase (with NodeJS & Express)

Introduction
1 Introduction & Course App Quasagram
2 What is Quasar
3 What is a Progressive Web App
4 How this Course is Structured
5 My Editor & Software Setup

Getting Started
6 Module Introduction
7 Install Node.js and Quasar CLI
8 Create & Launch a New Quasar Project (not in PWA mode yet)
9 Folder Structure – Layouts, Pages & Routes
10 Install Vue Devtools on Chrome
11 Vue.js Basics
12 Clean up the Project
13 Developing on Android & iOS

Layout, Pages & Routes – Start building Quasagram
14 Module Introduction
15 Desktop – Make the Header More Desktopy on Larger Displays
16 Desktop – Constrain Content for Wider Screens
17 Finished Module Code
18 Pages and Routes
19 Footer with Tab Navigation
20 Footer – Add Some Style
21 Footer – Change the Icon Set
22 Header – Styles
23 Header – Instagram-Style Title (Install Custom Font)
24 Desktop – Hide Footer on Larger Displays
25 Desktop – Show Navigation in Header on Larger Displays

Design – Home Page
26 Module Introduction
27 Hide the Mini-Profile on Mobile
28 Finished Module Code
29 Constrain the Page Content & Add Background Color
30 Create a List of Posts – Post Header
31 Create a List of Posts – Image
32 Create a List of Posts – Caption and Date
33 Add a Posts Array to Data Object
34 Connect the Posts Array to the View with v-for
35 Format the Date with a Filter
36 Add a Mini-Profile for Desktop

Design – Camera Page
37 Module Introduction
38 Add a Photo Frame & Capture Button
39 Add Text Fields & Submit Button
40 Adapt the Design for Desktop
41 Setup a Data Object for the Post Data
42 Finished Module Code

Native Device Features – Camera
43 Module Introduction
44 Display Camera Feed in Photo Frame
45 getUserMedia – Browser Support and Polyfill
46 Capture the Image
47 Convert the Image to a Blob
48 Add a Fallback Image Upload Field
49 Display Fallback Image in Canvas
50 Disable Camera After Capture & When User Leaves Page
51 Finished Module Code

Native Device Features – Location
52 Module Introduction
53 Get User’s Location Coordinates
54 Get Users’s City & Country Names
55 Handle Errors
56 Add a Loading State
57 Hide Location Button if Geolocation Not Supported
58 Finished Module Code

Firebase – Cloud Firestore Database & Storage
59 Introduction to Firebase
60 How we’re going to use Firebase
61 Create a Firebase Project
62 Cloud Firestore Database – Add Some Posts
63 Add an Image to Storage

Node.js & Express Backend
64 Module Introduction
65 Create & Launch our Backend Locally
66 Add Auto Restarting with Nodemon
67 Add a Simple Posts Endpoint
68 Deploy our Backend Server (1) – Setup Heroku
69 Deploy our Backend Server (2) – Deploy with Heroku Builds
70 If you want to use Cloud Functions
71 Finished Module Code

Get Posts Endpoint
72 Module Introduction
73 Connect to the Firestore Database
74 Posts Endpoint – Grab the Posts
75 Display the Posts on the Home Page
76 Sort Posts by Date
77 Handle Errors
78 Handle Loading
79 Show a “No Posts Yet” Fallback
80 Finished Module Code

Create Post Endpoint
81 Module Introduction
82 Upload the Image (3) Upload to Google Cloud Storage & Store the Image URL
83 Add Validation
84 Handle Errors & Successes
85 Handle Loading
86 Remember to Keep an Eye on the Size of your Images in Storage
87 Finished Module Code
88 Add createPost Endpoint
89 Environment Variables to Manage our API URLs
90 Send the Post Data to the Endpoint
91 Parse the Form Data with Busboy
92 Store the Field Data as a Post (1)
93 Store the Field Data as a Post (2)
94 Upload the Image (1) Configure Google Cloud Storage
95 Upload the Image (2) Save the Image to the Temp Folder

Assignment 1 – Database & Backend
96 Task 9 – Create Task Endpoint (2)
97 Task 10 – Create Task Endpoint (3)
98 Task 11 – Add a Loading Screen
99 Task 1 – Get the Project Running
100 Task 2 – Create a Firebase Project
101 Task 3 – Create a Cloud Firestore Database
102 Task 4 – Setup a Node.js & Express Backend
103 Task 5 – Initialize Firestore Database
104 Task 6 – Tasks Endpoint
105 Task 7 – Display Tasks in App
106 Task 8 – Create Task Endpoint (1)

PWA – Setup and Manifest File
107 PWA Introduction
108 Launch Quasagram in PWA Mode
109 Manifest File
110 Manifest Properties
111 Finished Module Code

PWA – Icons for All Devices
112 Module Introduction
113 Install Icon Genie
114 Create the Source Icon
115 Generate the Icons
116 Finished Module Code

PWA – Home Screen Installation
117 Module Introduction
118 Create the App Install Banner
119 Add an App Icon to the Banner
120 Show App Install Banner on Desktop
121 Only show App Install Banner when App Installable
122 Show Native Install Prompt if they click Yes
123 Allow the User to Hide the App Install Banner
124 Animate the App Install Banner
125 Finished Module Code

PWA – Service Workers & Workbox
126 Module Introduction
127 What is a Service Worker
128 Service Worker Events
129 What is Workbox
130 src-pwa Folder
131 Basic Caching & Offline Capabilities
132 Enable Custom Service Worker File

PWA – Precaching
133 Module Introduction
134 What is Precaching
135 Enable Precache
136 Build the App for Production & Switch to Live Backend
137 Host the App on Firebase
138 Show Precaching in Live App
139 A Quicker Way to Go Online Offline
140 Finished Module Code

PWA – Caching Strategies
141 Caching Strategies Introduction
142 What Caching Strategies Can We Use
143 Stale While Revalidate Strategy as a Catch All for Most Requests
144 Cache First Strategy for our Google Font
145 Network First Strategy for Posts Request
146 Finished Module Code

PWA – Background Sync
147 Background Sync Introduction
148 Show Offline Post was Uploaded (2) – Send Message to the Client (Browser)
149 Show Offline Post was Uploaded (3) – Remove the Offline Post Styles
150 Finished Module Code
151 Check for Background Sync Support
152 Create Post Background Sync
153 Redirect to Home Page if Post Created Offline
154 Display the Offline Posts (1) – Open the IndexedDB Database with IDB
155 Display the Offline Posts (2) – Get the Raw Request Data
156 Display the Offline Posts (3) – Get the Form Fields & Add Offline Post to Page
157 Style the Offline Posts Differently
158 Show Offline Post was Uploaded (1) – Add onSync Hook to Queue

PWA – Push Notifications
159 Module Introduction
160 Handle Notification Clicks
161 Handle Notification Closed
162 Check for Existing Push Subscription
163 Create a New Push Subscription
164 Secure the Push Subscription with Web Push (1)
165 Secure the Push Subscription with Web Push (2)
166 Store The Subscription in Cloud Firestore Database (1)
167 Store The Subscription in Cloud Firestore Database (2)
168 A Note About Push Subscriptions & Service Workers
169 Send a “New Post” Push Notification from Our Backend Server
170 How Push Notifications Work
171 If You’re Using Cloud Functions (Important)
172 Listen for Push Notifications in the Service Worker
173 Display the Real Push Notification
174 Open our Home Page on Notification Click
175 Send the Open URL from the Backend
176 Finished Module Code
177 Create an “Enable Notifications” Banner (1) – Repurpose the App Install Banner
178 Create an “Enable Notifications” Banner (2) – Improve the Style
179 Request Notifications Permission
180 Display a Notification from Our App
181 Notification Options
182 Display a Notification Using the Service Worker
183 Notification Actions

Desktop Browsers – Testing & Fixing
184 Module Introduction
185 Finished Module Code
186 Hosting the App
187 Firefox – Testing
188 Firefox – Fixing Issues
189 Safari – Testing
190 Safari – Fixing Issues
191 Testing Edge & Internet Explorer on a Mac with VirtualBox
192 Edge
193 Internet Explorer

Mobile – Android – Developing, Testing & Improving
194 Module Introduction
195 Check the Background Sync Fix
196 Finished Module Code
197 Developing on Android Emulator (1) – Install Android Studio
198 Developing on Android Emulator (2) – Setup Virtual Device
199 Developing on Android Emulator (3) – Launch on Android Emulator
200 Developing on Android Emulator (4) – Debugging
201 Launch Live App on Android Emulator
202 Developing on a Real Android Device
203 Fix Background Sync Issue
204 Show the Image in the Notification on Android

Mobile – iOS – Developing, Testing & Fixing
205 Module Introduction
206 Developing on iOS Simulator (1) – Install Xcode & Launch the Simulator
207 Developing on iOS Simulator (2) – Launch on iOS Simulator
208 Developing on iOS Simulator (3) – Debugging
209 Fix Footer on iOS Safari
210 Developing on a Real iOS Device
211 Fix the Camera & Post Image Button Issues
212 Finished App Code

Assignment 2 – Progressive Web Apps
213 Task 1 – Get App Running
214 Task 2 – Change Theme Color
215 Task 3 – Generate App Icons
216 Task 4 – Install App Button (1)
217 Task 5 – Install App Button (2)
218 Task 6 – Enable Precache
219 Task 7 – Caching Strategies
220 Task 8 – Background Sync (1)
221 Task 9 – Background Sync (2)
222 Task 10 – Background Sync (3)
223 Task 11 – Push Notifications – Notification Permission (1)
224 Task 12 – Push Notifications – Notification Permission (2)
225 Task 13 – Push Notifications – Create Push Subscription (1)
226 Task 14 – Push Notifications – Create Push Subscription (2)
227 Task 15 – Push Notifications – Store Push Subscription in Database
228 Task 16 – “You’re subscribed!” Notification
229 Task 17 – Send Push Notification from Backend
230 Task 18 – Display Push Notification
231 Task 19 – Handle Push Notification Click
232 Task 20 – Host App on Firebase & Backend on Heroku

What Next
233 What Next
234 Bonus Lecture Learn More From Me