How to Make a PWA (Progressive Web App) That Works Offline with Vite and Vue?

What Will You Learn in This Guide?

In this guide, we will turn a standard Vue.js application into a Progressive Web App (PWA) that works even without an internet connection and can be installed on the device.
We will cache static files, store API data with IndexedDB and create a true offline experience.

Technical Summary

• Purpose: To run the web application as a native application
• Technologies: Vue 3, Vite, Service Worker, IndexedDB
• Gain: An application that works instead of a blank screen when the internet is cut off

---

Preliminary Preparations

Before you start you should have the following ready:

• Node.js 18.15+
• Go
• News API key
• Vue and Vite basic knowledge

---

1️⃣ Project Setup

We take the sample news application to the local environment.

git clone https://github.com/kullanici-adiniz/whats-new.git
cd whats-new
git checkout do/starter-code

• This step installs the project framework on your computer.

---

• Change .env.example to .env:

VITE_NEWS_API_KEY=API_ANAHTARINIZ

npm install
npm run dev

• The development server is started.

---

2️⃣ Web App Manifest Configuration

1. The manifest file makes the application installable.
2. Application name, icons and theme colors are defined here.

• Create icon set with PWA Manifest Generator

• Move icons to /public folder

---

3️⃣ Service Worker and PWA Integration

1. We use vite-plugin-pwa to automatically install the PWA infrastructure.

npm install -D vite-plugin-pwa

---

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      devOptions: { enabled: true },
      manifest: {
        name: "GenixNode Haber - Vue PWA",
        short_name: "GenixNodeHaber",
        start_url: "/",
        display: "standalone",
        theme_color: "#0F172A",
        icons: [
          { src: "/icon-192x192.png", sizes: "192x192", type: "image/png" },
          { src: "/icon-512x512.png", sizes: "512x512", type: "image/png" }
        ]
      }
    })
  ]
})

• This configuration produces service worker and manifest.

---

4️⃣ Cache Files to Work Offline

1. We cache the application shell.

VitePWA({
  includeAssets: ["**/*"],
  workbox: {
    globPatterns: ["**/*.{js,css,html,png}"]
  }
})

• HTML, CSS and JS files are added to the cache.

---

5️⃣ Storing API Data with IndexedDB

1. We use Network First, Cache Fallback strategy for offline content.

npm install idb

async function getNewsItems() {
  const { db, getDB, getDataFromObjectStore } = useIDB()

  try {
    const response = await fetch(url.value)
    const data = await response.json()

    await getDB('haberler')
    data.articles.forEach(article =>
      db.value.put('haberler', article, article.url)
    )

    fetchedNewsItems.value = data.articles
  } catch {
    const cached = await getDataFromObjectStore('haberler')
    fetchedNewsItems.value = cached
  }
}

• If there is no internet, data is read from IndexedDB.

---

Frequently Asked Questions

1. Does PWA work on desktop? Yes, Chrome and Edge support it.

2. Is HTTPS required for offline? Yes, the service worker requires HTTPS.

3. IndexedDB or LocalStorage? IndexedDB is a must for offline applications.

---

Result

Now your application:

Works offline

Installed on the device

Does not lose API data

You've created a true PWA experience with Vue and Vite. You can immediately publish your projects on the GenixNode infrastructure.