PWA

MDB integration with PWA for vue

This article will teach you how to integrate Progressive web application (PWA) with your project. You can start using directional classes with the latest Bootstrap 5.

PWA are applications that have features similar to offline apps. The great thing for Progressive Web App is the fact that you can have the same look on any device. Other important aspects are:

  • Ability to install the web app localy
  • Work without internet connection
  • PWA is globaly accessible
  • Can configure offline storage
  • Supports push notifications

Lets see how to integrate Progressive web application (PWA) with MDB 5 across our layout, components, and utilities.

Live preview

Prerequisites

Before starting the project make sure to install the following utilities:

Creating a new project

First, we need to create a new Vite project.

Step 1

Init the project and choose vue framework. You can add a name for your project as we did in example below

        
            
          npm init vite@latest my-vue-app

Step 2

Navigate to app's directory. 

        
            
        cd my-vue-app

Step 3

Install dependencies.

        
            
        npm install

Step 4

Setup MDB. 

        
            
    npm install mdb-vue-ui-kit

Step 5

Import CSS. Add the following line at the beginning of your main.ts file:

        
            
        import 'mdb-vue-ui-kit/css/mdb.min.css';

Step 6

Import Font Awesome and Roboto font. Add the following lines in public/index.html file inside head section: 

        
            
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />

Step 7

Enable sourcemaps during development.

        
            
        export default defineConfig({
          plugins: [vue()],
          css: {
            devSourcemap: true,
          },
        });

Installation

Our Vite App should be running and now we need to install the vite-plugin-pwa package as a devDependency.

Step 1

Navigate to your project and in your terminal run:

        
            
      npm install vite-plugin-pwa -D

Step 2

Before going any further lets configure our vite.config.ts file. First we need to add VitePWA as a plugin and set registerType to autoUpdate. We are also going to add devOptions so we can check our app in dev.

Last thing we are going to do is change the default port to something that isn't used. Changing the port is optional, you don't have to do it if you don't want to.

        
            
    import { defineConfig } from "vite";
    import vue from "@vitejs/plugin-vue";
    import { VitePWA } from "vite-plugin-pwa";
    
    // https://vitejs.dev/config/
    export default defineConfig({
      server: {
        port: 49995,
      },
      css: {
        devSourcemap: true,
      },
    
      plugins: [
        vue(),
        VitePWA({
          registerType: "autoUpdate",
          devOptions: {
            enabled: true,
          },
        }),
      ],
    });

Step 3

Now we need to register the Service Worker. vite-plugin-pwa will register the service worker automatically if we use injectRegister: "auto" configuration option.

        
            
    import { defineConfig } from "vite";
    import vue from "@vitejs/plugin-vue";
    import { VitePWA } from "vite-plugin-pwa";
    
    // https://vitejs.dev/config/
    export default defineConfig({
      server: {
        port: 49995,
      },
      css: {
        devSourcemap: true,
      },
    
      plugins: [
        vue(),
        VitePWA({
          registerType: "autoUpdate",
          injectRegister: "auto",
          devOptions: {
            enabled: true,
          },
        }),
      ],
    });

Step 4

We need to configure the Service worker precache manifest. By default, workbox-build will only contain css, js and html resources. We need to extend that list with new resources like: ico, png, svg and vue for our app to work properly.

        
            
    import { defineConfig } from "vite";
    import vue from "@vitejs/plugin-vue";
    import { VitePWA } from "vite-plugin-pwa";
    
    // https://vitejs.dev/config/
    export default defineConfig({
      server: {
        port: 49995,
      },
      css: {
        devSourcemap: true,
      },
    
      plugins: [
        vue(),
        VitePWA({
          registerType: "autoUpdate",
          injectRegister: "auto",
          devOptions: {
            enabled: true,
          },
          workbox: {
            globPatterns: ["**/*.{js,css,html,ico,png,svg,vue}"],
          },
        }),
      ],
    });

PWA Minimal Requirements

Prerequisites

Before going any further:

  • Install Lightouse plugin for your browser
  • Prepare few files - you can resize the vite logo or use any other files. We will need these files to meet the PWA requirements. Paste them into the public folder. Make sure to name them like we did:
    • apple-touch-icon.png - 180x180
    • favicon.ico
    • mask-icon.svg
    • pwa-192x192.png - 192x192
    • pwa-512x512.png - 512x512

Step 1

We have to make sure our index.html file have necessary entries inside the head section.

        
            
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vue PWA</title>
        <link rel="icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
        <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
        <meta name="theme-color" content="#ffffff">
        <meta name="description" content="Put your description here.">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
      </head>
      <body>
        <div id="app"></div>
        <script type="module" src="/src/main.ts"></script>
      </body>
    </html>

Step 2

Now it's time to create a web app manifest inside vite.config.ts file. To do this we have to add manifest entry inside the plugin options.

        
            
  import { defineConfig } from "vite";
  import vue from "@vitejs/plugin-vue";
  import { VitePWA } from "vite-plugin-pwa";
  
  // https://vitejs.dev/config/
  export default defineConfig({
    server: {
      port: 49995,
    },
    css: {
      devSourcemap: true,
    },
  
    plugins: [
      vue(),
      VitePWA({
        registerType: "autoUpdate",
        injectRegister: "auto",
        devOptions: {
          enabled: true,
        },
        workbox: {
          globPatterns: ["**/*.{js,css,html,ico,png,svg,vue}"],
        },
        includeAssets: ["favicon.ico", "apple-touch-icon.png", "masked-icon.svg"],
        manifest: {
          name: "My Awesome App",
          short_name: "MyApp",
          description: "My Awesome App description",
          theme_color: "#ffffff",
          icons: [
            {
              src: "pwa-192x192.png",
              sizes: "192x192",
              type: "image/png",
            },
            {
              src: "pwa-512x512.png",
              sizes: "512x512",
              type: "image/png",
            },
          ],
        },
      }),
    ],
  });

Step 3

Launch the application.

        
            
      npm run dev

Open your browser devtools, and go to the Lighthouse tab. If you hit Analyze page load you should see info that your app is PWA ready. You should see the Install app icon at the top of the browser's search bar.

Adding new content

After we go through all the previous steps, we can start developing our application using MDB components.

Before that, lets clear App.vue file, remove HelloWorld and index.css files. Let's use the MDBCarousel component to look if everything works properly.

        
            
    <template>
      <MDBCarousel
        v-model="carousel1"
        :items="items1"
        fade
        class="mt-5 mx-auto w-50"
      />
    </template>
    
        
    
        
            
    <script setup lang="ts">
      import { ref } from "vue";
      import { MDBCarousel } from "mdb-vue-ui-kit";
      
      const items1 = [
        {
          src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp",
          alt: "...",
          label: "First slide label",
          caption: "Nulla vitae elit libero, a pharetra augue mollis interdum.",
        },
        {
          src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp",
          alt: "...",
          label: "Second slide label",
          caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        },
        {
          src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp",
          alt: "...",
          label: "Third slide label",
          caption: "Praesent commodo cursus magna, vel scelerisque nisl consectetur.",
        },
      ];
      
      const carousel1 = ref(0);
    </script>

Everything should work fine. You should be able to install PWA app on your browser and if you go offline, you should still be able to open your app with working MDBCarousel component.

Note: If your app doesn't work, you can try to:
  • Follow the steps again,
  • Remove dev-dist folder and run npm run dev again,
  • Unregister the service worker - you can do this in Application tab inside your browser devtools,
  • Change port

About PWA

For more information about the Vite PWA plugin, see Vite PWA documentation page. You can learn there how to further optimize your application and find other examples.

Frontend features

MDB UI KIT:

To create the project we used our ui kit, with which we can build basic views very quickly.

Views and Layouts:

In this project we used App.vue file, created by vite tool in which we placed our vue code. We have successfully integrated PWA into the MDB package and can use our map offline or download our app.