{"library":"parcel-plugin-sw-asset-urls","title":"Parcel Plugin for Hashed Service Worker Assets","description":"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.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install parcel-plugin-sw-asset-urls"],"cli":null},"imports":["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."],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"{\n \"name\": \"my-pwa\",\n \"version\": \"1.0.0\",\n \"devDependencies\": {\n \"parcel-bundler\": \"^1.12.5\",\n \"parcel-plugin-sw-asset-urls\": \"^0.1.2\"\n },\n \"scripts\": {\n \"build\": \"parcel build index.html\"\n }\n}\n\n// index.html\n// This file links to a service worker and some assets.\n// \n// ![\"example\"](\"./image.png\")
\n\n// service-worker.js\n// This service worker explicitly lists assets to cache.\n// const CACHE_NAME = 'my-pwa-cache-v1';\n// const urlsToCache = [\n// '/',\n// '/index.html',\n// '/image.png',\n// '/app.js' // Assuming app.js is also part of your build\n// ];\n//\n// self.addEventListener('install', (event) => {\n// event.waitUntil(\n// caches.open(CACHE_NAME)\n// .then((cache) => {\n// console.log('Opened cache');\n// return cache.addAll(urlsToCache);\n// })\n// );\n// });\n\n# 1. Create a project directory and navigate into it\nmkdir my-parcel-pwa && cd my-parcel-pwa\n\n# 2. Initialize npm and install Parcel v1 and the plugin\nnpm init -y\nnpm install parcel-bundler@^1.12.5 parcel-plugin-sw-asset-urls@^0.1.2 -D\n\n# 3. Create dummy files (index.html, service-worker.js, image.png, app.js)\necho 'Hello PWA
' > index.html\necho 'self.addEventListener(\"install\", (event) => { event.waitUntil(caches.open(\"v1\").then((cache) => cache.addAll([\"/\", \"/index.html\", \"/image.png\", \"/app.js\"]))); });' > service-worker.js\necho 'console.log(\"App loaded\");' > app.js\necho 'dummy-image-content' > image.png\n\n# 4. Run the Parcel build command (the plugin will activate automatically)\nnpx parcel build index.html\n\n# 5. Inspect the 'dist' directory, particularly the 'service-worker.js' file.\n# You should find that '/image.png' and '/app.js' in 'dist/service-worker.js'\n# have been replaced with their hashed counterparts (e.g., '/image.c36190a6.png').","lang":"bash","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}