Vite Plugin 

Appearance

Return to top
On this page

SvelteKit

The SvelteKit example project can be found on examples/sveltekit-pwa package/directory and it is configured with @sveltejs/adapter-static adapter.

The SvelteKit example has been created using svelte@next template with pnpm:

pnpm create svelte@next sveltekit-pwa
shell
pnpm create svelte@next sveltekit-pwa
+ create-svelte 2.0.0-next.89

Progress: resolved 5, reused 5, downloaded 0, added 5, done

create-svelte version 2.0.0-next.89

Welcome to SvelteKit!

This is beta software; expect bugs and missing features.

Problems? Open an issue on https://github.com/sveltejs/kit/issues if none exists already.

√ Which Svelte app template? » Skeleton project
√ Use TypeScript? ... No / Yes
√ Add ESLint for code linting? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

Your project is ready!
✔ Typescript
  Inside Svelte components, use <script lang="ts">
✔ ESLint
  https://github.com/sveltejs/eslint-plugin-svelte3

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-adders

Next steps:
  1: cd sveltekit-pwa
  2: npm install (or pnpm install, etc)
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

pnpm create svelte@next sveltekit-pwa
+ create-svelte 2.0.0-next.89

Progress: resolved 5, reused 5, downloaded 0, added 5, done

create-svelte version 2.0.0-next.89

Welcome to SvelteKit!

This is beta software; expect bugs and missing features.

Problems? Open an issue on https://github.com/sveltejs/kit/issues if none exists already.

√ Which Svelte app template? » Skeleton project
√ Use TypeScript? ... No / Yes
√ Add ESLint for code linting? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

Your project is ready!
✔ Typescript
  Inside Svelte components, use <script lang="ts">
✔ ESLint
  https://github.com/sveltejs/eslint-plugin-svelte3

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-adders

Next steps:
  1: cd sveltekit-pwa
  2: npm install (or pnpm install, etc)
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

To test new content available, you should rerun the corresponding script, and then refresh the page.

Executing the examples

WARNING

Before following the instructions below, read the Contribution Guide.

Make sure you install project dependencies, and build the repo on your local clone/fork:

shell
cd vite-plugin-pwa
pnpm install
pnpm run build

cd vite-plugin-pwa
pnpm install
pnpm run build

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

pnpm run examples

If you don't run pnpm build first, you may see an error like, failed to load config or Please verify that the package.json has a valid "main" entry.

generateSW

generateSW has the following behaviors:

  • Prompt for update:

    • Show Ready to work offline on first visit and once the service worker ready.
    • Show Prompt for update when new service worker available.

  • Auto update:

    • Show Ready to work offline 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 offline 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 offline 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

injectManifest has the following behavior:

  • Prompt for update:

    • Show Ready to work offline on first visit and once the service worker ready.
    • Show Prompt for update when new service worker available.

  • Auto update:

    • Show Ready to work offline 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 offline 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 offline 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.

Released under the MIT License.

Copyright © 2021-PRESENT Anthony Fu