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 into backend/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 to serviceAccountKey.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.

PWA mode

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.vuewith 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:

Precaching

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.

Image Credit: Microsoft Docs

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.

Image Credit: Microsoft Docs

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.

Image Credit: Microsoft Docs

Let’s implement these strategies in our app by updating your custom service worker with the following code.

Putting it to the test:

Cache first, falling back to the network

Network first, falling back to the cache

Stale-while-revalidate

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 the self.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:

1. 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.vueto 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.jswith 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.vuewith 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.

Follow Us: Twitter | LinkedIn