Skip to content

vite-pwa/remix

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date
Sep 2, 2024
May 14, 2024
Mar 25, 2024
Mar 22, 2024
Mar 22, 2024
Mar 25, 2024
Mar 22, 2024
Mar 25, 2024
Mar 23, 2024
Mar 21, 2024
Mar 21, 2024
Sep 4, 2024
Sep 4, 2024
Mar 21, 2024
Mar 25, 2024
Mar 23, 2024
Mar 22, 2024

Repository files navigation

@vite-pwa/remix - Zero-config PWA Plugin for Remix
Zero-config PWA Plugin for Remix

NPM version NPM Downloads Docs & Guides
GitHub stars


๐Ÿš€ Features

  • ๐Ÿ“– Documentation & guides
  • ๐Ÿ‘Œ Zero-Config: sensible built-in default configs for common use cases
  • ๐Ÿ”ฉ Extensible: expose the full ability to customize the behavior of the plugin
  • ๐Ÿฆพ Type Strong: written in TypeScript
  • ๐Ÿ”Œ Offline Support: generate service worker with offline support (via Workbox)
  • โšก Fully tree shakable: auto inject Web App Manifest
  • ๐Ÿ’ฌ Prompt for new content: built-in support for Vanilla JavaScript, Vue 3, React, Svelte, SolidJS and Preact
  • โš™๏ธ Stale-while-revalidate: automatic reload when new content is available
  • โœจ Static assets handling: configure static assets for offline support
  • ๐Ÿž Development Support: debug your custom service worker logic as you develop your application
  • ๐Ÿ› ๏ธ Versatile: integration with meta frameworks: รฎles, SvelteKit, VitePress, Astro, Nuxt 3 and Remix
  • ๐Ÿ’ฅ PWA Assets Generator: generate all the PWA assets from a single command and a single source image
  • ๐Ÿš€ PWA Assets Integration: serving, generating and injecting PWA Assets on the fly in your application

๐Ÿ“ฆ Install

@vite-pwa/remix requires Vite 5 and Remix 2.8.0 or above.

npm i @vite-pwa/remix -D 

# yarn 
yarn add @vite-pwa/remix -D

# pnpm 
pnpm add @vite-pwa/remix -D

๐Ÿฆ„ Usage

Import the @vite-pwa/remix helper, create the Remix PWA Preset and the PWA Plugin and configure them in your Vite configuration file:

// vite.config.js
import { vitePlugin as remix } from '@remix-run/dev'
import { installGlobals } from '@remix-run/node'
import { defineConfig } from 'vite'
import { RemixVitePWA } from '@vite-pwa/remix'

installGlobals()

const { RemixVitePWAPlugin, RemixPWAPreset } = RemixVitePWA()

export default defineConfig({
  plugins: [
    remix({
      presets: [RemixPWAPreset()],
    }),
    RemixVitePWAPlugin({
      // PWA options
    })
  ]
})

Read the ๐Ÿ“– documentation for a complete guide on how to configure and use this plugin.

๐Ÿ‘€ Full config

Check out the following links for more details:

๐Ÿ“„ License

MIT License ยฉ 2024-PRESENT Anthony Fu