Comments (12)
Oh, there seems be a lot of typos in my previous comments. Just fixed them.
Maybe relativePaths should be ignored if there's a publicPath provided (as it can only be intentional since there's no default value) but really, that one is on me :)
Yeah, it was this way in v2 when publicPath
was called scope
(don't ask why :-)) and I changed behavior in v3, also no idea why, it just happened.
I too think that it makes sense to revert to v2 behavior for relativePaths
and publicPath
, but I can do it only for v4 because I don't want break people who uses v3. Semver, etc.
from offline-plugin.
As in webpack itself, publicPath
isn't related to files output place, there is separate option for that. This plugin has such options too:
ServiceWorker
output: string. Relative (from the webpack's config output.path) output path for emitted script.
Default: 'sw.js'.
AppCache
directory: string. Relative (from the webpack's config output.path) output directly path for the AppCache emmited files.
Default: 'appcache/'.
Example:
new OfflinePlugin({
ServiceWorker: {
output: 'something/sw.js'
},
AppCache: {
directory: 'something/appcache'
}
});
But, to control whole website with SW, it has to be in the root of your website.
from offline-plugin.
Yes, I have actually configured AppCache.directory to move it one level up (/assets/appcache
instead of /assets/js/appcache
). But I can't get the runtime script to load the manifest from /assets/appcache
instead of just /appcache
. I guess I'll just move it to the root, along with sw.js
.
Thank you for your time! 👍
from offline-plugin.
@zhouzi what do you mean cannot? runtime.install()
doesn't load it from assets/appcache
?
from offline-plugin.
It works for me with any custom URL:
from offline-plugin.
That is exactly what I am looking for, what's your configuration? Here's a little reproduction of mine:
var OfflinePlugin = require('offline-plugin');
module.exports = {
entry: './index.js',
output: {
path: './dist',
filename: 'bundle.js'
},
plugins: [
new OfflinePlugin({
publicPath: '/dist/',
ServiceWorker: null
})
]
};
Which end up generating:
/dist
/appcache
/bundle.js
But the runtime installation tries to fetch /appcache/manifest.html
instead of /dist/appcache/manifest.html
. What am I missing?
from offline-plugin.
@zhouzi that's weird, it has to work. Just tried setting publicPath
and it worked for me too. But I'll check with exact your config a bit later.
This is my config, but not sure if it 'll help you:
new OfflinePlugin({
caches: {
main: ['index.html', 'assets/**/main.js', ':rest:'],
// additional: [':rest:']
},
AppCache: {
caches: [],
FALLBACK: {
'/': '/offline/offline.html',
'/assets/': '/offline/offline-asset',
'/icons/': '/offline/offline-asset',
}
},
ServiceWorker: {
events: true
},
updateStrategy: 'all',
version: 'v' + (env.useVersion ? env.version + '_' : '') + (new Date).toLocaleString(),
relativePaths: false,
publicPath: '/',
rewrites: function(asset) {
if (publicPath && publicPath !== '/' && asset.indexOf('assets/') === 0) {
return publicPath + asset;
}
return asset.replace(/^([\s\S]*?)index.htm(l?)$/, function(match, dir) {
return dir || '/';
});
}
})
from offline-plugin.
@zhouzi btw, do you use latest version from npm, right?
from offline-plugin.
I must be missing something, here's what I am trying with:
structure
/dist
/appcache
/manifest.appcache
/manifest.html
/bundle.js
/index.html
/index.js
/node_modules
/package.json
/webpack.config.js
index.html
<script src="dist/bundle.js"></script>
index.js
var runtime = require('offline-plugin/runtime');
runtime.install();
var msg = 'Hello World';
module.exports = function () {
return console.log(msg);
};
package.json
{
"private": true,
"scripts": {
"serve": "http-server",
"build": "webpack"
},
"dependencies": {
"http-server": "^0.9.0",
"offline-plugin": "3.2.1",
"webpack": "1.13.1"
}
}
webpack.config.js
var OfflinePlugin = require('offline-plugin');
module.exports = {
entry: './index.js',
output: {
path: './dist',
filename: 'bundle.js'
},
plugins: [
new OfflinePlugin({
ServiceWorker: null,
publicPath: '/dist/'
})
]
};
Run npm run serve
, open up the address and there's a 404 not found /appcache/manifest.html
which is normal since it's in /dist/appcache/manifest.html
.
from offline-plugin.
Have you seen your console when building project? It says about the problem, just set relativePaths
to false
to make publicPath
work.
I am not sure why it's done this way right now, but I suspect there was a reason for that at a time.
var OfflinePlugin = require('offline-plugin');
module.exports = {
entry: './index.js',
output: {
path: './dist',
filename: 'bundle.js'
},
plugins: [
new OfflinePlugin({
ServiceWorker: null,
publicPath: '/dist/',
relativePaths: false
})
]
};
from offline-plugin.
I can change it in v4 if it makes sense, of course.
from offline-plugin.
That's totally my fault. There's often so much warnings when building a webpack project that I'm no more reading them. I read the documentation and seen the mention of the incompatibility of publicPath/relativePaths but didn't pay attention to the fact that relativePaths is true by default and therefore disables publicPath. Maybe relativePaths should be ignored if there's a publicPath provided (as it can only be intentional since there's no default value) but really, that one is on me :)
Thanks for your kind support 👍
from offline-plugin.
Related Issues (20)
- Question - SW caching all assets site-wide HOT 1
- In Angular 9, files inside directories are not being cached
- Ideas for Documentation to Help with Troubleshooting
- Some files missing in cache on SW first load/install HOT 1
- Caching subpath urls
- Caching fails to download assets in Chrome 85 HOT 1
- Issue with default path
- [question] Having Multiple runtime installations
- Problem with Webpack 5.0 HOT 17
- Micro Front-ends structure with single-spa
- Auto update doesn't work
- After removing redux-offline, how do we ensure that client's who have old versions get the latest update?
- `onInstalling` doesn't seem to be called, because `ignoreInstalling` is always true
- offline-plugin does not serve assets from service worker
- Webpack 5 compatibility HOT 3
- The "path" argument must be of type string. Received undefined HOT 4
- Cache Images from AWS S3
- Pass ServiceWorker version to the install events
- Terser Plugin issue while building with webpack-cli HOT 3
- upgrade ejs package | CVE-2022-29078 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from offline-plugin.