What Are PWA?

At their heart, Progressive Web Apps are just web applications. Using progressive enhancement, new capabilities are enabled in modern browsers. Using service workers and a web app manifest, your web application becomes reliable and installable. If the new capabilities aren't available, users still get the core experience. Sometimes they are referred as a joke as "Web applications that took the right vitamines". In a few words: they are a web browser application that can be installed on a smartphone, they will have an icon, and usually they can (and should) be programmed to work offline, using the indexed db.

Prerequisites

• Nodejs installed with NPM.
• Vue 3 CLI installed.
• A code editor.

After the creation of your project with the cli, add the router, the PWA plugin, and materialize css:

vue add pwa
vue add router
npm install materialize-css@next --save
npm install material-design-icons --save

You should be able to run your application in developer mode:

npm run serve

Import materialize and initialize it

modify your app.js file like this:

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'

import 'materialize-css/dist/css/materialize.min.css'
import 'material-design-icons/iconfont/material-icons.css'

createApp(App).use(router).mount('#app')

Update the javascript in App.vue:

<script>
import M from 'materialize-css'

 export default {
   name: 'HelloWorld',
   props: {
    msg: String
   },
   mounted: async function() {
     await M.AutoInit()
  }
 }
}

This will enable all the interactive components of Materialize in your app. You can now use it everywhere.

Building the PWA

As you can see in the src/registerServiceWorkers.js file, when you are in production mode the service worker will serve the application. In order to test that all went right, you'll need to launch the script:

npm run build --production

All your application will be built and ready for the distribution in the dist directory. If you have php installed, or a server like Nginx or Apache, be sure to point your dist directory, the index.html file will contain your application. If you are using PHP, cd into the dist folder, then launch:

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

php -S 127.0.0.1:8000

Your application will be available on port 8000. Let's now configure our PWA.

Configure the PWA

After every build, the application you see won't change, unless you don't configure the cache correctly. Update the vue.config.js file like this one:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pwa: {
    workboxOptions: {
        skipWaiting: true
      }
  }
})