How to configure vite-plugin-pwa for automatic updates in WKWebView in iOS

Question

I am developing a PWA using Vite + React and I am rendering the website in a WKWebView within iOS. I am using vite-plugin-pwa for generating the manifest and service workers. I have set the registerType to autoUpdate in the PWA options with the intention of having the app update automatically whenever a new version is deployed.

Here is my Vite-PWA config:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { VitePWA, VitePWAOptions } from "vite-plugin-pwa";

const manifestForPlugin: Partial<VitePWAOptions> = {
  registerType: "autoUpdate",
  manifest: {
    name: "App",
    short_name: "App",
    description:
      "An App, V1.0.0",
    theme_color: "#dc2625",
    background_color: "#dc2625",
    start_url: "/",
    display: "standalone",
    orientation: "portrait",
    icons: [
      {
        src: "./vite.svg", // path to your app's logo
        sizes: "192x192",
        type: "image/png",
        purpose: "any maskable",
      },
    ],
  },
};

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), VitePWA(manifestForPlugin)],
});

The auto-update functionality works as expected in desktop browsers. However, when I display the app on my iPhone using a WKWebView to show the website, the app does not automatically update when a new version is deployed. I have to manually remove the app and reinstall to get the new version. Is there something I can add to my configuration or a workaround to get my WKWebView to update automatically?

Thanks for any help with this!

Answer 1

you would want to import the appropriate virtual module for that as written here https://vite-pwa-org.netlify.app/guide/auto-update.html