berntpopp
commented
1 month ago 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-generatorto 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.jsonto 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.
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: