nekr / offline-plugin Goto Github PK
View Code? Open in Web Editor NEWOffline plugin (ServiceWorker, AppCache) for webpack (https://webpack.js.org/)
License: MIT License
Offline plugin (ServiceWorker, AppCache) for webpack (https://webpack.js.org/)
License: MIT License
Consider adding different network strategies to ServiceWorker
https://jakearchibald.com/2014/offline-cookbook/#serving-suggestions-responding-to-requests
Should it be allowed only when AppCache
isn't used? Should it automatically disable AppCache
?
Current in v3
it's allowed to use those sections only with changed
update strategy. Need to make it work with all
update strategy too (assuming hash map will be generated for it too).
Hello, really nice plugin!
I'm doing a server side render of blog posts and was hoping to cache the server side render as externals, but your documentation says I cannot pattern match externals. What would be the recommended solution here? I'm really trying to avoid having to list each possible blog post path as an external.
new OfflinePlugin({
caches: {
main: [
'/',
':rest:',
],
additional: [
'/post/*',
],
},
externals: [ '/', '/post/*' ],
scope: '/',
updateStrategy: 'all',
version: 'v1',
ServiceWorker: {
output: 'sw.js',
},
AppCache: {
directory: 'appcache/',
},
}),```
We are caching all assets with a far-future expire on our webserver. Therefore we need to hash the service worker script in order to update to new versions, but this does not seem to work:
new OfflinePlugin({
ServiceWorker: {
output: 'sw-[hash].js'
}
})
Just outputs it literal: sw-[hash].js
Add a way to explicitly mark external assets so no warnings are reported into console. Something like this should work:
{
...
externals: [
'index.html'
],
...
}
Automatically set relativePaths
to false when publicPath
is used (non empty string).
I currently set offline-plugin's version option to the version of my package.json
, so that it automatically changes when I deploy a new version.
For AppCache, this results in a changed manifest file, which will download the new files and fire an updateready
event. I can then tell the user that there is new content available and refresh the page.
For ServiceWorker though, changing the version results in a new Cache being used. The current SW will still be active and use the old cache, and the new SW will only become active when the user closes and reopens the tab/window.
Is there a way to notify the user of the changes and force switching to the new SW? Or could the old SW somehow pick up the new cache available?
Or am I doing something completely wrong and this should just work? Right now I can refresh the Browser all day, unless I close the tab the SW will always give me the old, cached content...
Currently my service worker script is located at /web/scripts/sw.js
but I need it to cache some external files at /images/
so I need to pass the scope /
to navigator.serviceWorker.register.
We need to either pass ServiceWorker.scope
to register or add a new options field for it.
This is my current implementation: KamiHQ@00ed09d
Add a way to change SW cache name. Currently it's always webpack-offline
.
To allow changed
update strategy to be used with any files names (even without changing them on file update) ServiceWorker should know current hash (easy, just generated map) and old hash (hard, need to store somehow on the client) of the file.
Storing custom headers in request does not work (Headers are immutable
). IndexedDB should work.
v3
is going to fix most import issues in this plugin and here is what was done so far: CHANGELOG
updateStrategy: 'changed'
to download only changed assets, even with different name (existed assets are renamed if needed). Issue #6sw-toolbox
to do this (include it in SW's entry
), but I want this to be fully declarative to be able to generate code for other targets, e.g. Java/Swift code for Cordova. Issue 26v3
anymore)This is most important things planned for v3
. Other things may be added later, but is the roadmap at a moment.
I'm using webpack dev server, and to use inline mode I need to include the dev server entry in my webpack configuration.
var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {...});
server.listen(8080);
This effectively leaves my webpack with:
{
entry: {
app: [
"webpack-dev-server/client?http://localhost:8080",
"./app.js"
]
}
With the warning that OfflinePlugin produces, I can't figure out what problem it causes or what I can do to get rid of the warning other than just not use Webpack's dev server (not an option).
Hi, I'm not sure if this is a bug, but it looks like one... I'm using
"offline-plugin": "^2.1.0",
I added the following code:
let runtime = require('offline-plugin/runtime');
console.log('Runtime', runtime.install.toString());
And got the following output, in Firefox Developer Edition 47.0a2 and regular Firefox:
Runtime function () {}
In other words: the install function doesn't seem to do anything. I'm not sure if I'm doing something wrong or whether it's a bug. I've added the plugin without any options, as they were said to be optional:
new OfflinePlugin()
(And if relevant: my code, although without the debugging statements, is located at Gitlab.)
The code that I used to uninstall sw
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations().then(registrations => {
for (const registration of registrations) {
registration.unregister()
}
})
caches.keys().then(keyList => {
return Promise.all(keyList.map(key => {
return caches.delete(key)
}))
})
}
The idea is serve one cache for any navigation request, /albums
for example. Same, if cache is empty, any navigation request should populate given cache.
Probably not any. Maybe something specified in map like this:
{
'/albums': '/',
'/gallery': '/'
}
// or
{
'/*': '/shell.html'
}
Here is the use case number one: #27
Second use case it to serve server-rendered content on network requests, but in ServiceWorker, cache the AppShell.
I am probably missing something but I can't get to find how to configure the path to the appcache directory and sw.js file.
I have an express application serving assets at /assets
so the current structure looks like:
/assets
/appcache
/manifest.appcache
/manifest.html
/js
/app.js
/sw.js
The problem is that the runtime installation tries to fetch the manifest from /appcache/manifest.html
instead of /assets/appcache/manifest.html
. I tried to play around with publicPath but didn't see any effects, same for relativePaths. I tried to pass options to the runtime function but after digging the code, seems like it's completely ignored.
Is there a way to configure the appcache and sw.js path? Must it be located at the root?
Generate assets already without search params if marked to ignoreSearch
.
Doc says to install service worker use runtime.install(options:Object)
, but i want the registered reg
object so that i will make push manager use of it as specified in the doc https://developers.google.com/web/fundamentals/getting-started/push-notifications/step-06?hl=en , so here how i will get the .then(function(){})
after registering the serviceWorker using the runtime.
I tried to use your offline-plugin, but I got an error message. Can you help me please?
The only hint is: ERROR in OfflinePlugin: Something went wrong with ServiceWorker entry
The plugin produces some files
This is my config file: https://gist.github.com/anonymous/9a95e4ebeb7f1868e03b
I would be very grateful if you can give me a hint on what I'm doing wrong.
Add support of ApplicationCache#abort when we now that cache was't changed, e.g. same version/hash.
See also:
https://code.google.com/p/chromium/issues/detail?id=175063
This is useful when runtime is planned to use outside of webpack build, e.g. inlined in index.html file.
GET file:///D:/main.bundle.js net::ERR_FILE_NOT_FOUND
tried change 'relativePaths' and 'scope' settings, they has no effect
Hi, great plugin! love it!
just curious about how to use regex for excludes option?
for example, i have list of touch icons and favicon, they all put in 'icons-randomHashNumber' folder, how can I exclude this folder?
plz advise, thx!
... in case if server returned a new version of a file and app still expects an old version.
If I add external resources for caching, they are prefixed with ./
like this:
"assets": {
"main": [
"./"
],
"additional": [],
"optional": [
"./https://weblibrary.myserver.com/styles/main.css",
"./https://weblibrary.myserver.com/fonts/icons.woff"
]
},
I can set relativePaths: false
, but I don't really see why you can't have both relative paths and a few external URLs. Should be easy to detect?
Make caches: 'all'
include all assets from externals
by default and introduce :externals:
keyword to easily add externals to caches
' subsections.
Actually for cache busting im using the webpack hash tag for every generate entry point. but the generate sw doeesnt have the hastag i.e., when my webpack generate file is main.js?78787827878
but sw listed it as only main.js
this should be problematic when second time loading the site.
v3
has new generation for SW which potentially may have problems with #source-map
. Has to be tested.
Would be good if someone could contribute tests to this project, they are at least good to have and unfortunately I do not think that I will have for both: implementation and tests.
Shouldn't we remove the AppCache support since it's deprecated?
https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache
I just added the plugin to webpack config with the below configuration,
new OfflinePlugin({
AppCache: false,
caches: 'all',
scope: '/',
relativePaths: true,
updateStrategy: 'hash'
}),
but it is only firing the install event but not the actiavte event, so i debugged in the chrome://serviceworker-internals/
, there i found this line
Error: {"columnNumber":-1,"lineNumber":-1,"message":"ServiceWorker failed to install","sourceURL":""}
but this error is telling that it is failed, but why?
onUpdateReady
and onUpdated
+ applyUpdate()
method is enough.
Chrome does not support it right now, so probably manual opening cache and comparing will work here instead of using built-in match()
method.
Hi! Thank you for this plugin, really useful and works well.
I would like to hook into the service worker code (I'd like to have custom logic in the fetch
listener), and I was wondering if there was any way to hook into it right now?
Thanks,
William
Need add support of cache absolute (and CORS) url, e.g.
new OfflinePlugin({
caches: {
main: ['index.html', 'https://fonts.googleapis.com/css?family=Roboto:400,500,900'],
additional: [':rest:']
}
})
Of course, relativePaths
and scope
should be ignored for absolute urls.
It would be great if this plugin respected the publicPath setting in output. Currently the service worker and manifest directory needs to be published at /
which sometimes is not possible, for example on gh-pages.
Current NETWORK
option is present only for AppCache
and reflects NETWORK
section of it.
Need to make make network
option global and implement request filtering in ServiceWorker
runtime.
See this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1267733
Basically, if SW is broken and throws an error for navigation request, so request document is never loaded and nothing can tell to Firefox to update SW.
Should we disable support SW for all Firefox version which do not have fix for that? I opinion is -- yes.
Blacklist it: https://twitter.com/wanderview/status/696819243262873600
Or at least call event.respondWith(fetch(request))
, which will block usage of additional scripts for SW (who uses it?).
Currently I place index.html to main assets and it is an external file. When I update it, because service worker script always serve it from the cache so the client will not see the new version.
I think we need an option to specify entry files and always fetch them while online. Only serve the cached version if the fetch failed.
I personally do not use Browserify, but if people need it, then I can do the port.
This will help to know which version of offline-plugin produces particular SW/AppCache when debugging.
My webpack build currently creates several separate single page apps by defining multiple entry points.
It doesn't seem possible to separate the caches this plugin creates into one per each webpack entry point. Is this not supported?
offline-plugin
to disable booth tools (ServiceWorker
, AppCache
) so no files are generated at dev mode.offline-plugin/runtime
to be used (does nothing) even when offline-plugin
is not usedSince additional
cache means that app can function without it, this could make sense to not fail whole additional
section caching fail if some of its assets fail to load.
SW has some events like install
, activated
, but there is also special events like push
and sync
, keep these events in the config so that generate sw.js file will have this like
new OfflinePlugin({
AppCache: false,
caches: 'all',
scope: '',
relativePaths: true,
updateStrategy: 'hash',
events:{
push:function(){
// Developer choice
}
}
}),
Or any much better way it is okay.
If I add OfflinePlugin
as same as setup in README.md
. I would get Failed to load resource: the server responded with a status of 404 (Not Found)
. How could I solve this problem?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.