Skip to content

Commit

Permalink
add PWA docs
Browse files Browse the repository at this point in the history
  • Loading branch information
marwie committed Feb 19, 2024
1 parent 36fbae0 commit edfb06e
Showing 1 changed file with 28 additions and 0 deletions.
28 changes: 28 additions & 0 deletions documentation/html.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down

0 comments on commit edfb06e

Please sign in to comment.