Building the Future with Quasar: A Vue.js Framework Revolution
Explore the simplicity and power of building PWAs with the Quasar framework.
If you’re here, you’re likely familiar with Quasar, the robust Vue.js framework. If not, no problem at all! You’re about to learn something new.
Here are some types of applications that can be created using Quasar:
1. Progressive Web Apps (PWAs)
2. Single Page Applications (SPAs)
3. Cross-Platform Applications
4. Mobile Applications
5. Server-Side Rendered (SSR) Applications
6. Hybrid Applications
In this blog post, I’ll walk you through how you can leverage Quasar to build Progressive Web Apps easily and efficiently.
Let’s begin by understanding the reasons for choosing Quasar over vanilla Vue.js when it comes to creating Progressive Web Applications (PWAs).
Quasar provides a number of features that make it easier and faster to develop PWAs, including:
- Scaffolding: Quasar comes with a CLI that can be used to generate a basic PWA project structure, including the necessary configuration files. This eliminates the need to manually set up the project, saving developers time and effort.
- UI components: Quasar provides a large library of pre-built UI components that can be used to build PWAs. These components are designed to be mobile-friendly and easy to use, which can further reduce development time.
- Code generation: Quasar also comes with a code generation tool that can be used to generate code for common PWA functionalities, such as routing, services, and directives. This can further reduce the amount of code that developers need to write manually.
- Plugin integration: Quasar seamlessly integrates with popular Vue plugins and libraries, such as Vue Router, Vuex, and Axios. This allows developers to use these popular tools without having to worry about compatibility issues.
For all these reasons, Quasar PWA configuration is much better than the normal PWA with Vue.js in terms of development.
Quasar PWA tutorial for Blogify
In Blogify, we’re set to integrate the standout features of PWAs using Quasar, covering:
🏠 Home Screen Installation
🔄 Precaching
📊 Caching Strategies
🔄 Background Sync
🔔 Push Notifications
You will learn how to make Blogify, a Medium-like platform, into a Progressive Web App using Quasar. This will allow you to create a website and app with exciting features like those of native mobile apps.
But wait, before we start building our “Blogify” masterpiece, let’s take a quick demo tour to see what’s in store.
Experience the live demonstration: Quasar-blogify.
If you’re all set, let’s dive into creating your “Blogify” masterpiece using Quasar v2, Firebase, Node, Express, and Vue 3! 🚀
Prerequisites:
Ensure Node is >=14 (or a newer LTS version) and NPM is >=6.14.12 or Yarn is >=1.21.1 installed on your machine.
Setting Up Your Project:
Let’s install Quasar using CLI and create a new Quasar Project:
npm i -g @quasar/cli
npm init quasar
Once the project is created, execute the following commands:
cd quasar-blogify
quasar dev # or: yarn quasar dev # or: npx quasar dev
It will run the project, as shown below:
You can see the folder structure of the Quasar project below:
You can save development time by exploring my GitHub repository for PWA development. It’s packed with ready-to-use code for CRUD operations and essential Quasar features. Use it as your guide to speed up your progress.
GitHub Repository: Blogify
Create Layout, add pages, and create components.
Once you’ve configured layout pages, components, and routing, the UI will appear as shown below (the card currently contains static data):
Following the establishment of the basic layout, let’s proceed to connect to the database and backend.
Create a Firebase project
- Create a new Firebase project called “Blogify” here.
Create a Cloud Firestore database
- Create a Cloud Firestore database (make sure you start in test mode).
- Add a collection named “blogs.”
- Add some dummy blog data.
- Each blog should have the fields id, title, content, liked, favorite, created_at.
Setup a Node.js and Express backend
- Create a subfolder for your backend and initialize with npm in it.
- Install Express and Nodemon.
- Create an Express app with a simple GET endpoint that returns a string.
- Launch the app and make sure the endpoint works in the browser.
Get the app running
- Create a new project using the Firebase Console named Blogify (disable Google Analytics).
- On the Project Overview page, click on the Web icon below Get started by adding Firebase to your app.
- Name the app Blogify and click Register app.
- Click Continue to console.
- Click on 1 app > Settings icon > Service accounts.
- You may need to click Create Service account.
- Copy the
databaseURL
from the code sample and paste it intobackend/index.js
in your project. - Save
index.js
. - On Firebase Console — Click Generate new private key > Generate key.
- Save the JSON file to your
backend
folder and rename it toserviceAccountKey.json
.
- On Firebase Console — Click Database > Create database > Start in test mode > Choose a location > Click Done.
The provided code in index.js initializes the Firebase Database and includes all the endpoints for our Blogify app.
- Install dependencies for both the app and server:
npm install
cd backend
npm install
- Launch the backend server:
cd backend
npm start
- Launch the app in PWA mode and ensure it’s working:
quasar dev -m pwa
Executing this command generates a src-pwa folder. We’ll explore it shortly and update custom-service-worker.js
for our app.
Our app is now running in PWA mode. A noticeable change is the installation icon in the address bar.
Every PWA requires a manifest file, a JSON file that informs the browser about how the app should be displayed. It includes details like titles, descriptions, colors, icons, and whether the app should be on full screen or retain some browser elements.
For a PWA without Quasar, we’d manually create the manifest JSON file and link it to our homepage using a tag like this.
<link rel="manifest" href="manifest.json" >
Quasar automatically generates and links the manifest.json file, eliminating the need for the above tag. View the manifest.json by opening http://localhost:9200/manifest.json while running your project.
The manifest.json file includes details like name, orientation, and background color. Customize it for changes such as updating your app’s name.
1. Home screen installation 🏠
We’ll enhance our app by integrating a visually appealing banner for home screen installation. This banner will only appear on supported devices when the app is ready to install and users can choose to hide it if they find it annoying.
Update your MainLayout.vue
with this piece of code:
Installation Banner Setup:
- showInstallBanner controls the display of the installation banner.
- deferredPrompt stores the installation prompt triggered by user interaction.
Banner Rendering:
- Renders the installation banner within the <q-footer> component.
- Provides options for the user to install the app (Yes), install later (Later), or never install it (Never).
Installation Handling:
- Calls the installApp() when the user clicks “Yes” in the banner.
- Hides the banner, prompts the user to install the app using deferredPrompt.prompt(), and waits for the user’s choice.
- If the user accepts the installation, call neverShowInstallAppBanner to set a flag indicating the user chose to install the app.
Never Show Banner Again:
- If the user clicks “Later” or “Never,” sets showInstallBanner to false.
- Stores a flag (`neverShowInstallBanner`) in local storage to ensure the installation banner is not shown again.
Time to execute:
2. Precaching 🔄
Precaching enables storing core HTML, Javascript, images, etc., in the user’s browser cache on the initial app run. This optimizes performance by loading resources from the cache rather than the network on subsequent visits and allows offline app launch.
Let’s integrate precaching into our app! In Quasar v2, it’s easier with the simplified setup in custom-service-worker.js
. Quasar v2 automatically includes and preloads the `precacheAndRoute` method from Workbox, optimizing asset and route caching for improved PWA performance and offline capabilities.
To enable precaching in Quasar v2, just update quasar.config.js
with:
pwa: {
workboxPluginMode: 'InjectManifest'
}
Ensure to deploy your app on a platform for optimal results before proceeding.
Seeing the code in action:
3. Caching strategies 📊
We’ll manage caching for our local requests, but what about external ones? Like images, fonts, or API calls from outside sources?
Let’s check out a few caching strategies and then implement them in our app.
Cache first, falling back to network
Utilize a cache first strategy for optimizing speed and enabling offline functionality, especially for requests like Google font files, which don’t change frequently. This approach ensures loading from the cache whenever possible, with a fallback to the network if the file is not in the cache.
Network first, falling back to cache
We use a network first strategy for our app's API requests to ensure we always fetch the latest information. The app prioritizes retrieving data from the network and falls back to the cache only if the network is unavailable or there's an API issue.
Stale-while-revalidate
Utilizing a strategy, our page leverages the service worker to retrieve cached requests for the browser. Simultaneously, the service worker checks the network for the same request, updating the cache with the latest data if available. This strategy is effective for non-critical requests where the latest data isn’t always necessary. We’ll implement this approach for all HTTP requests.
Let’s implement these strategies in our app by updating your custom service worker with the following code.
Putting it to the test:
You may need to Clear Site Data, Close & Reload Chrome to see the output.
We have more caching strategies; to know about all of them, check these workbox strategies.
4. Background sync 🔄
Precaching and caching enhance app performance and enable offline launch, while background sync ensures full offline functionality. It keeps the app state synchronized even when the user is offline. Watch the video below for a demonstration of offline functionality.
Let’s implement this feature in our app.
- Set up a background sync queue for requests to our Create Blog endpoint. Update
custom-service-worker.js
.
Note: You can detect for background sync support first if you like, by checking if
'sync'
is in theself.registration
object.
Redirect to the home page if the blog is created offline. For that, we need to check for offline status in createBlog() in Create.vue
:
Now, it will be great if we grab the offline blogs that are stored in this queue in the indexedDB database.
To achieve this, we’ll utilize the idb Library. Install the library by executing the following command:
npm install idb --save
Enhance the code to display offline blogs in a list with an offline style:
Let’s see it in action:
5. Push notifications 🔔
To enable push notifications, there are several steps involved:
- User Permission
Ask users for permission to send push notifications via their browser.
Once granted, the browser is allowed to display native notifications on the user’s device.
Update the IndexPage.vue
to see the above banner.
2. Backend Setup
- Implement a backend system to manage push subscriptions and send push messages to the associated push servers.
Use the web-push library for subscriptions and notifications. Install it in the backend folder with this command:
npm install web-push --save
Generate keys by following the command:
web-push generate-vapid-keys
Update index.js
with the provided code for backend push notifications:
3. Push Subscription
- Create a push subscription for each user, associating their browser with the relevant push notification server (e.g., Chrome or Firefox).
- Store subscription details, including unique keys and push server information, in a backend database.
Now with the new /createSubscription endpoint, let’s generate a subscription when the user grants notification permission. Update the script in IndexPage.vue
with the provided code.
4. Service Worker
- Use a service worker to listen for push events in the background, even if the app is closed.
- When a push event is received, display the notification to the user.
Add this code to custom-service-worker.js
to track Push events and respond to user clicks on notifications.
Protect Subscriptions:
Secure push subscriptions with unique keys to ensure that only the authorized backend server can send messages to the user’s browser.
Fantastic! We’ve successfully set up push notifications and covered the way for exciting interactions with our users.
Now, let’s witness the magic in action! 📱💬
Wrapping up
As we finish up, remember that PWAs are cool because they can go beyond regular apps. With Quasar, you didn’t just make an app but created something flexible that works well on any device.
Keep having fun with your coding adventures, and may your PWAs stand out online!
Visit this link to learn about Quasar’s magic and how it can enhance your development experience.
For more updates on the latest development trends, follow the Simform Engineering blog.