Progressive Web Apps with Vue js, Quasar & Firebase - Course Sneak Preview!
A sneak preview of my new course, "PWA with Vue.js, Quasar & Firebase"
👉 Full Course with Discount: https://dannys.link/quasarpwa
In this course we're gonna create a beautiful Instagram clone called Quasagram which you can see running here on Chrome and on my real Android device.
You can see it has a completely different layout on desktop and mobile.
We have 2 pages. The home page displays a list of posts with images, location, a caption and the date.
And on the camera page, we can access the user's camera, take a picture, find their location and create a new post.
We're gonna store all our data in a Firebase Cloud Firestore database.
And store all of our photos in Firebase Storage
And setup our own endpoints using Firebase Cloud Functions for getting the posts and creating a new post.
We're gonna get this all working as a standard web app first and then progressively enhance it with all the main Progressive Web App features:
Precaching and Caching - we're gonna implement precaching and caching, so that the app stores it's assets on the user's device - making it super fast & launchable offline - including implementing several different caching strategies such as Network First and Cache First
Background Sync - we're gonna implement Background Sync - so that our app not only launches offline, but the user can even create a post offline. So if I disable the internet, take a picture and create a post, we see the post added to the app - marked as offline. Then, when we turn the internet back on, the post is uploaded to the database.
Push Notifications - we'll be adding push notifications to our app. So if our user clicks this Enable Notifications button, we'll subscribe them to push notifications. And every time a new post is created, they'll receive a push notification - even if the app is closed. So if I completely close the app on mobile and create a post here on desktop. We see the push notification on desktop, and we also see it on mobile even though the app is closed. And on Android, we can even see the image that was posted. And if we tap the notification, the app is opened up on the home page.
Installable - we're gonna make our app installable. If the user taps this "Install app" button, the app will be installed to their home screen with it's own icon - and we can even install it as a Chrome or Edge app too - and of course we'll create icons for all the different devices.
We'll also make sure the app works on all browsers, not just the browsers that have all the latest PWA features. So if a browser doesn't support a particular feature - for example Safari doesn't support push notifications or background sync - then we just won't use those features on that device - but the basic app will still work - It'll even work on internet explorer!
You'll also learn all about the Firebase Cloud Firestore database, Firebase Cloud Functions, Firebase storage, Firebase hosting (where we'll host our finished app) service workers, Workbox, Native device features like camera and location & much more...
Watch video Progressive Web Apps with Vue js, Quasar & Firebase - Course Sneak Preview! online without registration, duration hours minute second in high quality. This video was added by user Make Apps with Danny 27 May 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,172 once and liked it 152 people.