Skip to main content
Simple Charts is a Progressive Web App (PWA) that can be installed on mobile devices and desktops for an app-like experience.

​
PWA Features

Simple Charts includes:
  • Offline support: Works without an internet connection after initial load
  • Auto-updates: Service worker automatically updates the app
  • Installable: Can be installed to home screen/desktop
  • Standalone mode: Runs in its own window without browser UI

​
PWA Configuration

The PWA is configured using vite-plugin-pwa in vite.config.js: 
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: "autoUpdate",
      includeAssets: ["favicon.svg", "apple-touch-icon.png"],
      manifest: {
        name: "Simple Charts",
        short_name: "Simple Charts",
        description: "By ABM Labs. Create pie and bar charts for classrooms and presentations.",
        theme_color: "#b48ae0",
        background_color: "#f6f0ff",
        display: "standalone",
        start_url: "/",
        icons: [
          {
            src: "pwa-192x192.png",
            sizes: "192x192",
            type: "image/png"
          },
          {
            src: "pwa-512x512.png",
            sizes: "512x512",
            type: "image/png"
          },
          {
            src: "pwa-512x512.png",
            sizes: "512x512",
            type: "image/png",
            purpose: "maskable"
          }
        ]
      },
      workbox: {
        globPatterns: ["**/*.{js,css,html,svg,png}"]
      }
    })
  ]
});

​
Installing on Mobile

​
Android (Chrome, Edge, Samsung Internet)

1

Open the website

Navigate to your Simple Charts deployment (e.g., https://charts.abmcodes.xyz) in Chrome or Edge.
2

Look for install prompt

You’ll see an install banner at the bottom of the screen, or tap the menu (⋮) and select Install app or Add to Home Screen.
3

Confirm installation

Tap Install in the prompt. The app will be added to your home screen.
4

Launch the app

Find the Simple Charts icon on your home screen and tap to open. It will run in standalone mode without browser UI.

​
iOS (Safari)

iOS has limited PWA support. The app will install but with fewer features than Android.
1

Open in Safari

Navigate to your Simple Charts deployment in Safari (other browsers on iOS don’t support PWA installation).
2

Tap Share button

Tap the Share button (square with arrow pointing up) at the bottom of Safari.
3

Add to Home Screen

Scroll down and tap Add to Home Screen.
4

Customize and add

Edit the name if desired, then tap Add. The icon will appear on your home screen.
On iOS, service workers have limitations. The app may not work fully offline and data may be cleared by iOS after a period of inactivity.

​
Installing on Desktop

​
Chrome, Edge, Brave (Windows, macOS, Linux)

1

Open the website

Navigate to Simple Charts in Chrome, Edge, or Brave.
2

Click install icon

Look for the install icon (⊕ or computer icon) in the address bar, or go to menu → Install Simple Charts.
3

Confirm installation

Click Install in the dialog. The app will open in its own window.
4

Access from applications

Simple Charts will be added to your applications menu and can be pinned to taskbar/dock.

​
Service Worker Details

The service worker is automatically generated by vite-plugin-pwa and:
  • Caches assets: All JS, CSS, HTML, SVG, and PNG files
  • Auto-updates: Uses registerType: "autoUpdate" for seamless updates
  • Offline-first: Serves cached files when offline

​
Cache Strategy

workbox: {
  globPatterns: ["**/*.{js,css,html,svg,png}"]
}
This configuration caches all static assets for offline use.

​
Manifest Details

PropertyValueDescription
name”Simple Charts”Full app name
short_name”Simple Charts”Name shown on home screen
theme_color#b48ae0Browser theme color
background_color#f6f0ffSplash screen background
displaystandaloneRuns without browser UI
start_url/URL loaded when app opens

​
Verifying PWA Installation

​
Check in Browser DevTools

  1. Open DevTools (F12)
  2. Go to Application tab (Chrome/Edge) or Storage tab (Firefox)
  3. Check:
    • Manifest: Should show Simple Charts manifest
    • Service Workers: Should show active service worker
    • Cache Storage: Should show cached assets

​
Test Offline Mode

  1. Open Simple Charts
  2. Open DevTools → Network tab
  3. Check Offline mode
  4. Reload the page
  5. App should still work (after initial cache)

​
Updating the PWA

When you deploy a new version:
  1. Service worker detects the update
  2. Downloads new assets in background
  3. Activates on next app reload
  4. Users may see a brief loading as cache updates
With registerType: "autoUpdate", updates happen automatically without user intervention.

​
Uninstalling the PWA

​
Android

  • Long-press the app icon → Uninstall or App info → Uninstall

​
iOS

  • Long-press the app icon → Remove App → Delete App

​
Desktop

  • Chrome/Edge: Open the app → Menu (⋮) → Uninstall Simple Charts
  • Or remove from system applications like any other app

​
Troubleshooting

​
Install Prompt Not Showing

  • Ensure you’re using a supported browser (Chrome, Edge, Samsung Internet on Android)
  • Check that the site is served over HTTPS
  • Verify manifest is accessible at /manifest.json
  • Some browsers only show the prompt after a few visits

​
Service Worker Not Registering

  • Check browser console for errors
  • Ensure HTTPS is enabled (required for service workers)
  • Verify vite-plugin-pwa is in dependencies:
"devDependencies": {
  "vite-plugin-pwa": "^1.1.0"
}

​
App Not Working Offline

  • Check if assets are cached in DevTools → Application → Cache Storage
  • Verify service worker is active
  • Try clearing cache and reinstalling

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us