chore: example using webpack (#6)

nftstorage · May 4, 2022 · 74d3c62 · 74d3c62
1 parent 9477581
commit 74d3c62
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -14,6 +14,10 @@ if ('serviceWorker' in navigator) {
 }
 ```
 
+## Use with Webpack
+
+For using `nftstorage-service-worker` on your project bundle with webpack, look into [webpack example](./example/webpack/).
+
 ## References
 
 - https://github.com/olizilla/see-other - a sw to resolve mutable dnslinks to their current immutable form for better caching.

diff --git a/example/webpack/.gitignore b/example/webpack/.gitignore
@@ -0,0 +1 @@
+dist
diff --git a/example/webpack/README.md b/example/webpack/README.md
@@ -0,0 +1,2 @@
+# nftstorage service worker using Webpack
+
diff --git a/example/webpack/package.json b/example/webpack/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "nftstorage-service-worker-webpack",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack",
+    "start": "npm run build && serve dist"
+  },
+  "dependencies": {
+    "nftstorage-service-worker": "../.."
+  },
+  "devDependencies": {
+    "html-webpack-plugin": "^5.5.0",
+    "serve": "^13.0.2",
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2"
+  },
+  "author": "",
+  "license": "MIT"
+}
diff --git a/example/webpack/src/index.html b/example/webpack/src/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Hello Webpack</title>
+</head>
+<body>
+  <img src="https://nftstorage.link/ipfs/bafybeidluj5ub7okodgg5v6l4x3nytpivvcouuxgzuioa6vodg3xt2uqle/olizilla.png" alt="olizilla" />
+  <script type="text/javascript" src="./app.js"></script>
+</body>
+</html>
diff --git a/example/webpack/src/index.js b/example/webpack/src/index.js
@@ -0,0 +1,3 @@
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('./nftstorage-sw.js');
+}
diff --git a/example/webpack/webpack.config.js b/example/webpack/webpack.config.js
@@ -0,0 +1,13 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = () => ({
+  entry: {
+    'app': './src/index.js',
+    'nftstorage-sw': './node_modules/nftstorage-service-worker/src/nftstorage-sw.js',
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'src/index.html'
+    })
+  ]
+})