Ionic PWA Update Test

Try to update a Ionic native app without reinstalling using a PWA with a service worker.

Project creation

npx @ionic/cli start "PWA Update Test" blank --type=vue --package-id=pwa.update.test --project-id=pwa-update-test

npx @ionic/cli cap add android # Add mobile support

npx @vue/cli add pwa@next # Add PWA support, see https://ionicframework.com/docs/vue/pwa

Important: Add vue.config.js for workbox-webpack-plugin options:

module.exports = {
  pwa: {
    // ... rest of the options ...

    workboxOptions: {
      // https://stackoverflow.com/a/54377386
      // If omitted, needs to be manually done (otherwise there will be an infinite refresh loop)
      skipWaiting: true,
      // To act as a fallback for the client-side URLs. See https://stackoverflow.com/a/59389816.
      navigateFallback: "index.html",
    },
  },
};

See https://cli.vuejs.org/core-plugins/pwa.html#configuration and https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-webpack-plugin.GenerateSW#GenerateSW for full options.

Updating mobile app after changing the plugins

npx @ionic/cli cap sync

Usage

The idea is to build the mobile app once and then publish the PWA and have it to reload inside the app.

To do this:

• Change something in the app, for example the counter in src/views/HomePage.vue.
• Republish the PWA using ./publish-pwa.sh (which will publish the PWA to https://pwa-update-test.surge.sh, which represents our URL containing the dist output of npm run build).
• On the device, close the app, removing it from the recent apps list, now a confirm window should appear saying "Update available, reload now?", clicking ok will reload the view and show the new app version.

Screencasts

See the PWA update process and offline functionality in the videos under videos directory.

Notes

In this way, the app updates only when it's reloaded by the operating system, i.e. when it's closed from the recent apps list and reopened. To do something more "reactive", some better mechanism (remote endpoint to poll from time to time?) must be implemented.

Important: native plugins, like @capacitor/camera, @capacitor/filesystem, @capacitor/storage don't seem to work with the remote PWA, giving errors like:

• Msg: Error: "Storage" plugin is not implemented on android
• Msg: Error: "Camera" plugin is not implemented on android

The platform lists is different when running the remote PWA and when running without the "server" config inside capacitor.config.ts.

Android project warning

For some reason, the Android project generated by npx @ionic/cli cap add android used the deprecated jcenter() maven repository, causing build errors due to missing dependencies, switching to mavenCentral() solved the problem (see build.gradle).