Registry / devops / parcel-plugin-sw-asset-urls

parcel-plugin-sw-asset-urls

library0.1.2jsnpmunverified

The `parcel-plugin-sw-asset-urls` (version 0.1.2) is a plugin specifically designed for `parcel-bundler` (Parcel v1.x) that addresses a common issue in Progressive Web App (PWA) development. Parcel automatically generates static assets with hashed filenames for effective browser cache busting. However, in Parcel v1, it does not inherently update the `sw.js` (service worker) file with these newly hashed URLs, leading to broken asset paths in the service worker's cache manifest. This plugin integrates into the Parcel v1 build process to replace the original, unhashed asset filenames within the generated service worker script with their corresponding hashed versions in the `dist` directory. This ensures the service worker correctly identifies and caches the fingerprinted assets. The package is currently at an early version (0.1.2) and its development is tied to Parcel v1, making it incompatible with Parcel v2, which has a different plugin architecture and often handles such issues internally or with updated strategies.

devops

npm install parcel-plugin-sw-asset-urls

github ↗package ↗

INSTALL

IMPORT

SIG · PARCEL-PLUGIN-SW-A

parcel-plugin-sw-asset-urls

devopsjavascriptv0.1.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

No direct imports for userland code.

✓ This package is a Parcel plugin. It is automatically detected and loaded by `parcel-bundler` (Parcel v1) when installed as a development dependency. There are no explicit symbols to import into your application code.

Parcel v1 plugins operate via auto-discovery from `node_modules`. Parcel v2 uses a `.parcelrc` configuration for plugins.

This quickstart demonstrates how to set up a minimal Parcel v1 project with the plugin. It shows how the plugin automatically replaces unhashed asset URLs in `service-worker.js` with their fingerprinted versions after a Parcel build, which is crucial for correct PWA caching.

{ "name": "my-pwa", "version": "1.0.0", "devDependencies": { "parcel-bundler": "^1.12.5", "parcel-plugin-sw-asset-urls": "^0.1.2" }, "scripts": { "build": "parcel build index.html" } } // index.html // This file links to a service worker and some assets. // <script> // if ('serviceWorker' in navigator) { // window.addEventListener('load', () => { // navigator.serviceWorker.register('/service-worker.js').then(registration => { // console.log('SW registered: ', registration); // }).catch(error => { // console.log('SW registration failed: ', error); // }); // }); // } // </script> // <img src="./image.png" alt="example"> // service-worker.js // This service worker explicitly lists assets to cache. // const CACHE_NAME = 'my-pwa-cache-v1'; // const urlsToCache = [ // '/', // '/index.html', // '/image.png', // '/app.js' // Assuming app.js is also part of your build // ]; // // self.addEventListener('install', (event) => { // event.waitUntil( // caches.open(CACHE_NAME) // .then((cache) => { // console.log('Opened cache'); // return cache.addAll(urlsToCache); // }) // ); // }); # 1. Create a project directory and navigate into it mkdir my-parcel-pwa && cd my-parcel-pwa # 2. Initialize npm and install Parcel v1 and the plugin npm init -y npm install parcel-bundler@^1.12.5 parcel-plugin-sw-asset-urls@^0.1.2 -D # 3. Create dummy files (index.html, service-worker.js, image.png, app.js) echo '<!DOCTYPE html><html><body><h1>Hello PWA</h1><script>if ("serviceWorker" in navigator) { window.addEventListener("load", () => { navigator.serviceWorker.register("/service-worker.js"); }); }</script><img src="./image.png" alt="example"><script src="./app.js"></script></body></html>' > index.html echo 'self.addEventListener("install", (event) => { event.waitUntil(caches.open("v1").then((cache) => cache.addAll(["/", "/index.html", "/image.png", "/app.js"]))); });' > service-worker.js echo 'console.log("App loaded");' > app.js echo 'dummy-image-content' > image.png # 4. Run the Parcel build command (the plugin will activate automatically) npx parcel build index.html # 5. Inspect the 'dist' directory, particularly the 'service-worker.js' file. # You should find that '/image.png' and '/app.js' in 'dist/service-worker.js' # have been replaced with their hashed counterparts (e.g., '/image.c36190a6.png').

Debug

Known issues

breakingThis plugin is designed exclusively for Parcel v1 (`parcel-bundler`) and is not compatible with Parcel v2 (`parcel`). Parcel v2 introduced a new plugin system and significantly changed its internal architecture.

fix

For Parcel v2, consult the official Parcel documentation for handling service workers and asset hashing. Parcel v2 may provide native solutions or require different plugin approaches.

affects: >=0.1.2

gotchaThe project appears to be abandoned. The last commit on GitHub was in January 2019, and the package version is 0.1.2. No further updates or maintenance are expected.

fix

Consider alternatives or be prepared to fork and maintain the code yourself if you need this functionality with Parcel v1. For new projects, use Parcel v2, which is actively maintained.

affects: >=0.1.2

deprecatedThe underlying `parcel-bundler` package (Parcel v1) itself is deprecated and no longer maintained. Users are strongly encouraged to migrate to Parcel v2.

fix

Migrate your project to Parcel v2. This will involve updating dependencies (e.g., `parcel-bundler` to `parcel`), adjusting project configuration, and potentially finding new solutions for functionalities previously provided by Parcel v1-specific plugins like this one.

affects: >=0.1.2

Errors

Common errors & fixes

Error: Cannot find module 'parcel-bundler'

This error typically occurs if you have `parcel` (Parcel v2) installed but are trying to run a build that expects `parcel-bundler` (Parcel v1), or if `parcel-bundler` is not correctly installed as a development dependency.

fix

Ensure `parcel-bundler` (specifically version 1.x) is installed as a development dependency: `npm install parcel-bundler@^1.11.0 -D` or `yarn add parcel-bundler@^1.11.0 -D`. Verify your `package.json` to confirm the correct Parcel version.

Plugin not working or service worker not updated with hashed URLs.

This plugin will not function if you are using Parcel v2 instead of Parcel v1. Parcel v2 has a completely different plugin architecture and does not automatically load v1 plugins.

fix

Verify that your project is configured to use `parcel-bundler` (Parcel v1). If you intend to use Parcel v2, you will need to find a Parcel v2-compatible solution for updating service worker asset URLs, as this plugin is not compatible.

Upgrade

Version history

0.1.2latest on npm

Audit

Dependencies

parcel-bundlerrequiredThis is a plugin for Parcel v1 and requires `parcel-bundler` as a peer dependency.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/rohith/parcel-plugin-sw-asset-urls ↗

packagehttps://www.npmjs.com/package/parcel-plugin-sw-asset-urls ↗