nekr/offline-plugin

★ 4,510JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((offline-plugin))
    What it does
      Offline-first caching
      Service Worker setup
      AppCache fallback
    Tech stack
      JavaScript
      webpack plugin
      Service Worker API
    Setup
      webpack config entry
      Runtime activation line
    Features
      Auto file discovery
      Update handling
      TypeScript support

mindmap root((offline-plugin)) What it does Offline-first caching Service Worker setup AppCache fallback Tech stack JavaScript webpack plugin Service Worker API Setup webpack config entry Runtime activation line Features Auto file discovery Update handling TypeScript support

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Make a webpack-based web app load and run even when the user has no internet connection

USE CASE 2

Automatically cache all webpack output files so returning users get instant page loads from the local cache

USE CASE 3

Handle app updates gracefully so users get the new version the next time they open the app after going online

Tech stack

JavaScriptwebpackService Worker

Getting it running

Difficulty · easy Time to first run · 30min

Requires an existing webpack project, two small edits to config and entry file are all that is needed.

In plain English

This is a plugin for webpack, a tool that JavaScript developers use to bundle and package their web application's code. The plugin's job is to make a web app work without an internet connection, which is often called "offline-first" capability. When a user visits a site built with this plugin, the browser quietly saves a copy of the app's files locally so it can still run the next time there is no network available. The underlying technology it uses is called a Service Worker, which is a small background script the browser runs separately from the main page. Service Workers can intercept network requests and serve cached files instead, making the app feel fast and functional even on flaky connections. For older browsers that do not support Service Workers, the plugin falls back to an older, more limited browser feature called AppCache, which does a similar job of storing files locally. Setting it up involves two small steps. A developer adds the plugin to their webpack configuration file, and then adds one short line to their main JavaScript entry file to activate the offline runtime. Everything else is handled automatically. The plugin figures out which files webpack produces and takes care of caching them. All configuration options are optional, so a basic setup requires no extra decisions. The project has documentation covering topics like how updates are handled when you ship a new version of your app, how to control which files get cached, and how to use it with TypeScript. There are also troubleshooting guides and a FAQ section for common problems. The plugin has attracted over 4,500 stars on GitHub, indicating it has been widely used in production web projects.

Copy-paste prompts

Prompt 1

I have a webpack app. Walk me through adding offline-plugin to webpack.config.js and the one runtime line in my entry file to enable offline support.

Prompt 2

How does offline-plugin handle app updates when I ship a new version, will users automatically get the new files?

Prompt 3

I'm using offline-plugin with TypeScript. Are there type definitions included or do I need to install them separately?

Prompt 4

offline-plugin is not caching my app's API responses. Is that expected, and how would I cache dynamic data separately?

Prompt 5

How do I configure offline-plugin to exclude certain files from being cached?

Open on GitHub → Explain another repo

← nekr on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.