feat: make the ADPKD Risk Calculator a progressive web app

[berntpopp]

Description:
Convert the ADPKD Risk Calculator into a progressive web app (PWA) to improve user experience. This will allow users to install the app and use it offline.

Acceptance Criteria:

• Tool can be installed as a PWA.
• Offline functionality works as expected.

[berntpopp]

Implementation Plan for Converting ADPKD Risk Calculator into a PWA

To address the issue of converting the ADPKD Risk Calculator into a Progressive Web App (PWA), the following implementation plan will be followed:

---

1. Install Required Dependencies

We will install the necessary dependencies for PWA functionality using vite-plugin-pwa and asset generation with @vite-pwa/assets-generator.

• Install vite-plugin-pwa:

  ```
  npm install -D vite-plugin-pwa
  ```

• Install @vite-pwa/assets-generator to generate PWA icons:

  ```
  npm install -D @vite-pwa/assets-generator
  ```

---

2. Configure PWA in vite.config.js

We will modify the vite.config.js file to include vite-plugin-pwa and set up basic configurations like registerType and workbox.

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

export default defineConfig({
base: process.env.NODE_ENV === 'production' ? '/adpkd-risk/' : '/',
plugins: [
vue(),
VitePWA({
registerType: 'autoUpdate',
manifest: {
name: 'ADPKD Risk Calculator',
short_name: 'RiskCalc',
description: 'A tool to calculate ADPKD risk scores.',
icons: [
{ src: 'pwa-64x64.png', sizes: '64x64', type: 'image/png' },
{ src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
{ src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
{ src: 'maskable-icon-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' }
],
theme_color: '#ffffff',
background_color: '#ffffff',
display: 'standalone',
start_url: '/',
scope: '/',
},
workbox: {
clientsClaim: true,
skipWaiting: true
},
devOptions: {
enabled: true // Enable in dev for testing
}
})
]
})
```

---

3. Set Up Icon Generation with @vite-pwa/assets-generator

We will create a pwa-assets.config.js file in the root of the project to define the icons generation. This will allow us to generate all required icons from a single source image.

• Create pwa-assets.config.js:

```js
import { defineConfig, minimalPreset as preset } from '@vite-pwa/assets-generator/config'

export default defineConfig({
preset,
images: [
'public/logo.svg' // Replace this with the actual source image path
]
})
```

• Add the following script to package.json to generate PWA assets:

```json
{
"scripts": {
"generate-pwa-assets": "pwa-assets-generator"
}
}
```

Run the following command to generate all required icons:

```
npm run generate-pwa-assets
```

---

4. Update index.html with Favicon and Icons

In the index.html file, add the required <link> tags for favicons and PWA icons:

```html

\```

---

5. Register the Service Worker

We will create a registerServiceWorker.js file and ensure the service worker is registered for handling offline caching and updates.

• Create src/registerServiceWorker.js:

```js
import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
register(${process.env.BASE_URL}service-worker.js, {
ready () {
console.log('App is ready to be served offline.')
},
registered () {
console.log('Service worker has been registered.')
},
cached () {
console.log('Content is cached for offline use.')
},
updatefound () {
console.log('New content is downloading.')
},
updated () {
console.log('New content is available; please refresh.')
window.location.reload(true) // Force refresh to apply new content
},
offline () {
console.log('No internet connection. Running in offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
}
```

---

6. Testing the PWA

To test the PWA functionality:

• Run the development server with offline functionality enabled in dev mode:

  ```
  npm run dev
  ```

• Check in Chrome Developer Tools → Application → Service Worker to ensure the service worker is running.

• Test the PWA installability and offline mode.

---

7. Acceptance Criteria

• The ADPKD Risk Calculator can be installed as a PWA.
• The PWA works offline, with proper caching of assets and pages.