Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: compact examples + cli for examples #167

Merged
merged 6 commits into from
Nov 27, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions docs/.vitepress/theme/components/RunExamples.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
To run the examples, execute the following script from your shell (from root folder), it will start a `cli` where you
will select the framework and the pwa options:

```shell
pnpm run examples
```

26 changes: 8 additions & 18 deletions docs/examples/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,19 +87,17 @@ the `Service Worker` is serving all assets instead request them to the server.

## Available Example Projects

> <RunExamples />

We provide the following example projects:

<ul aria-labelledby="available-example-projects">
<md-list-anchor id="vue-examples" href="/examples/vue.html">
<template #link>Vue 3</template>
<template #nested>
<ul aria-labelledby="vue-examples">
<md-list-anchor href="/examples/vue.html#basic">
<template #link>Vue 3 Basic Example</template>
<template #trailing>: <code>Ready to work offline</code> and <code>Prompt for update</code>.</template>
</md-list-anchor>
<md-list-anchor href="/examples/vue.html#router">
<template #link>Vue 3 Router Examples</template>
<md-list-anchor href="/examples/vue.html#generatesw">
<template #link>Vue 3 genertateSW Router Examples</template>
<template #trailing>: set of examples with disparate behaviors.</template>
</md-list-anchor>
<md-list-anchor href="/examples/vue.html#injectmanifest">
Expand All @@ -113,12 +111,8 @@ We provide the following example projects:
<template #link>React</template>
<template #nested>
<ul aria-labelledby="react-examples">
<md-list-anchor href="/examples/react.html#basic">
<template #link>React Basic Example</template>
<template #trailing>: <code>Ready to work offline</code> and <code>Prompt for update</code>.</template>
</md-list-anchor>
<md-list-anchor href="/examples/react.html#router">
<template #link>React Router Examples</template>
<md-list-anchor href="/examples/react.html#generatesw">
<template #link>React generatesSw Router Example</template>
<template #trailing>: set of examples with disparate behaviors.</template>
</md-list-anchor>
<md-list-anchor href="/examples/react.html#injectmanifest">
Expand All @@ -132,12 +126,8 @@ We provide the following example projects:
<template #link>Svelte</template>
<template #nested>
<ul aria-labelledby="svelte-examples">
<md-list-anchor href="/examples/svelte.html#basic">
<template #link>Svelte Basic Example</template>
<template #trailing>: <code>Ready to work offline</code> and <code>Prompt for update</code>.</template>
</md-list-anchor>
<md-list-anchor href="/examples/svelte.html#router">
<template #link>Svelte Router Examples</template>
<md-list-anchor href="/examples/svelte.html#generatesw">
<template #link>Svelte generatesSw Router Example</template>
<template #trailing>: set of examples with disparate behaviors.</template>
</md-list-anchor>
<md-list-anchor href="/examples/svelte.html#injectmanifest">
Expand Down
30 changes: 5 additions & 25 deletions docs/examples/preact.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@ To test `new content available`, you should rerun the corresponding script, and
If you are running an example with `Periodic SW updates`, you will need to wait 1 minute:
<HeuristicWorkboxWindow />

## Executing the examples

<RunExamples />

## generateSW

`generateSW` has the following behaviors:
Expand All @@ -52,36 +56,12 @@ If you are running an example with `Periodic SW updates`, you will need to wait
- The example project will register a `Periodic service worker updates`
- When new content available, the service worker will be updated automatically.

To run each behavior, execute one of the following scripts from your shell (from root folder):
- `Prompt for update`:
```shell
pnpm run example:preact:router:start
```

- `Auto update`:
```shell
pnpm run example:preact:router:start:claims
```

- `Prompt for update` with `Periodic service worker updates`:
```shell
pnpm run example:preact:router:start:reloadsw
```

- `Auto update` with `Periodic service worker updates`:
```shell
pnpm run example:preact:router:start:claims:reloadsw
```

## injectManifest

`injectManifest` has the following behavior:
- Custom `TypeScript Service Worker` with offline support.
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- Show `Prompt for update` when new `service worker` available.

To run this behavior, execute the following script from your shell (from root folder):
```shell
pnpm run example:preact:router:start:sw
```


80 changes: 23 additions & 57 deletions docs/examples/react.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,23 @@ title: React | Examples

# React

All `React` example projects can be found on `examples` package/directory and start with `react-` prefix.
The `React` example project can be found on `examples/react-router` package/directory.

All `React` examples have been created using `create-vite` template with `PNPM`:
The router used on this example project is [react-router](https://reactrouter.com/) <outbound-link />.

The `React` example has been created using `create-vite` template with `PNPM`:
```shell
pnpx create-vite
+ create-vite 2.5.4
√ Project name: ... react-basic
√ Project name: ... react-router
√ Select a framework: » react
√ Select a variant: » react-ts

Scaffolding project in examples\react-basic...
Scaffolding project in examples\react-router...

Done. Now run:

cd react-basic
cd react-router
npm install
npm run dev
```
Expand All @@ -28,70 +30,34 @@ To test `new content available`, you should rerun the corresponding script, and
If you are running an example with `Periodic SW updates`, you will need to wait 1 minute:
<HeuristicWorkboxWindow />

## Basic

This example project can be found on `examples/react-basic` package/directory with the following behavior:
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- Show `Prompt for update` when new `service worker` available.
## Executing the examples

To run this example project, execute the following script from your shell (from root folder):
```shell
pnpm run example:react:start
```
<RunExamples />

## Router
## generateSW

The router used on this example project is [react-router](https://reactrouter.com/) <outbound-link />.

This example project can be found on `examples/react-router` package/directory with the following behaviors:
`generateSW` has the following behaviors:
- `Prompt for update`:
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- Show `Prompt for update` when new `service worker` available.
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- Show `Prompt for update` when new `service worker` available.

- `Auto update`:
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- When new content available, the service worker will be updated automatically.
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- When new content available, the service worker will be updated automatically.

- `Prompt for update` with `Periodic service worker updates`:
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- Show `Prompt for update` when new `service worker` available.
- The example project will register a `Periodic service worker updates`
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- Show `Prompt for update` when new `service worker` available.
- The example project will register a `Periodic service worker updates`

- `Auto update` with `Periodic service worker updates`:
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- The example project will register a `Periodic service worker updates`
- When new content available, the service worker will be updated automatically.

To run this example project, execute one of the following scripts from your shell (from root folder):
- `Prompt for update`:
```shell
pnpm run example:react:router:start
```

- `Auto update`:
```shell
pnpm run example:react:router:start:claims
```

- `Prompt for update` with `Periodic service worker updates`:
```shell
pnpm run example:react:router:start:reloadsw
```

- `Auto update` with `Periodic service worker updates`:
```shell
pnpm run example:react:router:start:claims:reloadsw
```
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- The example project will register a `Periodic service worker updates`
- When new content available, the service worker will be updated automatically.

## injectManifest

This example project can be found on `examples/react-basic-inject-manifest` package/directory with the following behavior:
- Custom `TypeScript Service Worker`.
`injectManifest` has the following behavior:
- Custom `TypeScript Service Worker` with offline support.
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- Show `Prompt for update` when new `service worker` available.

To run this example project, execute the following script from your shell (from root folder):
```shell
pnpm run example:react:start:sw
```

31 changes: 4 additions & 27 deletions docs/examples/solidjs.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@ To test `new content available`, you should rerun the corresponding script, and
If you are running an example with `Periodic SW updates`, you will need to wait 1 minute:
<HeuristicWorkboxWindow />

## Executing the examples

<RunExamples />

## generateSW

`generateSW` has the following behaviors:
Expand All @@ -40,36 +44,9 @@ If you are running an example with `Periodic SW updates`, you will need to wait
- The example project will register a `Periodic service worker updates`
- When new content available, the service worker will be updated automatically.

To run each behavior, execute one of the following scripts from your shell (from root folder):
- `Prompt for update`:
```shell
pnpm run example:solid:router:start
```

- `Auto update`:
```shell
pnpm run example:solid:router:start:claims
```

- `Prompt for update` with `Periodic service worker updates`:
```shell
pnpm run example:solid:router:start:reloadsw
```

- `Auto update` with `Periodic service worker updates`:
```shell
pnpm run example:solid:router:start:claims:reloadsw
```

## injectManifest

`injectManifest` has the following behavior:
- Custom `TypeScript Service Worker` with offline support.
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- Show `Prompt for update` when new `service worker` available.

To run this behavior, execute the following script from your shell (from root folder):
```shell
pnpm run example:solid:router:start:sw
```

84 changes: 24 additions & 60 deletions docs/examples/svelte.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,23 @@ title: Svelte | Examples

# Svelte

All `Svelte` example projects can be found on `examples` package/directory and start with `svelte-` prefix.
The `Svelte` example project can be found on `examples/react-routify` package/directory.

All `Svelte` examples have been created using `create-vite` template with `PNPM`:
The router used on this example project is [@roxi/routify](https://routify.dev/) <outbound-link />.

The `Svelte` example has been created using `create-vite` template with `PNPM`:
```shell
pnpx create-vite
+ create-vite 2.5.4
√ Project name: ... svelte-basic
√ Project name: ... svelte-routify
√ Select a framework: » svelte
√ Select a variant: » svelte-ts

Scaffolding project in examples\svelte-basic...
Scaffolding project in examples\svelte-routify...

Done. Now run:

cd svelte-basic
cd svelte-routify
npm install
npm run dev
```
Expand All @@ -28,72 +30,34 @@ To test `new content available`, you should rerun the corresponding script, and
If you are running an example with `Periodic SW updates`, you will need to wait 1 minute:
<HeuristicWorkboxWindow />

## Basic

This example project can be found on `examples/svelte-basic` package/directory with the following behavior:
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- Show `Prompt for update` when new `service worker` available.

To run this example project, execute the following script from your shell (from root folder):
```shell
pnpm run example:svelte:start
```

## Router

The router used on this example project is [@roxi/routify](https://routify.dev/) <outbound-link />.

This example project can be found on `examples/react-routify` package/directory with the following behaviors:
- `Prompt for update`:
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- Show `Prompt for update` when new `service worker` available.

- `Auto update`:
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- When new content available, the service worker will be updated automatically.
## Executing the examples

- `Prompt for update` with `Periodic service worker updates`:
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- Show `Prompt for update` when new `service worker` available.
- The example project will register a `Periodic service worker updates`
<RunExamples />

- `Auto update` with `Periodic service worker updates`:
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- The example project will register a `Periodic service worker updates`
- When new content available, the service worker will be updated automatically.
## generateSW

To run this example project, execute one of the following scripts from your shell (from root folder):
`generateSW` has the following behaviors:
- `Prompt for update`:
```shell
pnpm run example:svelte:routify:start
```
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- Show `Prompt for update` when new `service worker` available.

- `Auto update`:
```shell
pnpm run example:svelte:routify:start:claims
```
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- When new content available, the service worker will be updated automatically.

- `Prompt for update` with `Periodic service worker updates`:
```shell
pnpm run example:svelte:routify:start:reloadsw
```
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- Show `Prompt for update` when new `service worker` available.
- The example project will register a `Periodic service worker updates`

- `Auto update` with `Periodic service worker updates`:
```shell
pnpm run example:svelte:routify:start:claims:reloadsw
```

- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- The example project will register a `Periodic service worker updates`
- When new content available, the service worker will be updated automatically.
## injectManifest

This example project can be found on `examples/svelte-basic-inject-manifest` package/directory with the following behavior:
- Custom `TypeScript Service Worker`.
`injectManifest` has the following behavior:
- Custom `TypeScript Service Worker` with offline support.
- Show `Ready to work offlline` on first visit and once the `service worker` ready.
- Show `Prompt for update` when new `service worker` available.

To run this example project, execute the following script from your shell (from root folder):
```shell
pnpm run example:svelte:start:sw
```



Loading