To turn a Vue 3 app into a PWA

vue3-pwa.md

To turn a Vue 3 app into a PWA, you can follow these steps:

1. Create a manifest.json file in the public folder of your Vue 3 app. This file contains metadata about your PWA, such as the app name, icon, and theme color. Here's an example:

{
  "name": "My Vue 3 App",
  "short_name": "My App",
  "icons": [
    {
      "src": "img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "background_color": "#ffffff",
  "display": "standalone",
  "theme_color": "#4DBA87"
}

2. Add the following code to the head section of your index.html file to load the manifest.json file:

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">

3. Install the @vue/cli-plugin-pwa plugin by running the following command in your project directory:

vue add @vue/cli-plugin-pwa

This will add the necessary configuration to your Vue 3 app to make it a PWA 4. Customize the PWA behavior and appearance by modifying the src/registerServiceWorker.js and src/main.js files. For example, you can add offline support by caching static assets with the workbox library, and prompt users to install the app on their home screen with the beforeinstallprompt event.

import { register } from 'register-service-worker'
import { Workbox } from 'workbox-window'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log('Service worker is active.')
    },
    registered(registration) {
      console.log('Service worker has been registered.')
      const wb = new Workbox('/service-worker.js')
      wb.addEventListener('activated', event => {
        console.log(`Service worker version ${event.target.active.scriptURL} activated.`)
      })
      wb.register()
    },
    cached() {
      console.log('Content has been cached for offline use.')
    },
    updatefound() {
      console.log('New content is downloading.')
    },
    updated(registration) {
      console.log('New content is available.')
      const answer = window.confirm('A new version of the app is available. Do you want to update?')
      if (answer) {
        registration.waiting.postMessage('skipWaiting')
      }
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error(error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

5. Build your Vue 3 app for production by running the following command:

npm run build

This will create a dist folder containing the optimized and minified assets of your app.

6. Serve your app from a secure server (HTTPS) to enable the PWA features. Congratulations! Your Vue 3 app is now a PWA that can be installed on users' devices and used offline.