From edfb06ed86e4dcb67a380a8192a7448ff2bd2af7 Mon Sep 17 00:00:00 2001
From: Marcel Wiessler <marcel@gaisterhand.de>
Date: Mon, 19 Feb 2024 20:08:13 +0800
Subject: [PATCH] add PWA docs

---
 documentation/html.md | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/documentation/html.md b/documentation/html.md
index 7ef941664..ab08ad258 100644
--- a/documentation/html.md
+++ b/documentation/html.md
@@ -75,6 +75,34 @@ Set `useRapier` to `false` in your vite.config: `needlePlugins(command, needleCo
 
 :::
 
+## Creating a PWA
+
+We support creating a Progressive Web App (PWA) from your vite based project. 
+
+1) Install the [Vite PWA plugin](https://vite-pwa-org.netlify.app/) in your web project: `npm install vite-plugin-pwa --save-dev`
+2) Modify `.vite.config.js` and pass the options both to the `needlePlugins` as well as the `VitePWA` method (see code below)
+
+```js
+import { VitePWA } from 'vite-plugin-pwa';
+
+export default defineConfig(async ({ command }) => {
+
+    // create the PWAOptions object. 
+    // You can edit or enter PWA settings here (e.g. change the PWA name or add icons).
+    /** @type {import("vite-plugin-pwa").VitePWAOptions} */
+    const PWAOptions = {};
+  
+    const { needlePlugins } = await import("@needle-tools/engine/plugins/vite/index.js");
+
+    return {
+        plugins: [
+            // pass the PWAOptions object to the needlePlugins and the VitePWA function
+            needlePlugins(command, needleConfig, { pwaOptions: PWAOptions }),
+            VitePWA(PWAOptions),
+        ],
+        // the rest of your vite config...
+```
+
 ## Accessing Needle Engine and Components from external javascript
     
 Code that you expose can be accessed from JavaScript after bundling. This allows to build viewers and other applications where there's a split between data known at edit time and data only known at runtime (e.g. dynamically loaded files, user generated content).