NekR / offline-plugin

Offline plugin (ServiceWorker, AppCache) for webpack (https://webpack.js.org/)
MIT License
4.52k stars 295 forks source link

Cache url with parameters #99

Closed Naramsim closed 8 years ago

Naramsim commented 8 years ago

Right now if I try to cachehttps://fonts.googleapis.com/css?family=Montserrat:400,700 i get the following error:

WARNING in OfflinePlugin: Cache pattern [https://fonts.googleapis.com/css?family=Montserrat:400,700] did not matched any assets

If I invalidate the URL removing the ? the plugin gives no errors. How can I overcome this issue?

My config:

const offlinePluginOptions = {
    caches:{
        main:[
            'index.js',
            'index.html',
            'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js',
            'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js',
            'https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js',
            'https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.0.1/color-thief.min.js',
            'https://fonts.googleapis.com/css?family=Montserrat:400,700'
        ]
    },
    externals: [
        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.0.1/color-thief.min.js',
        'https://fonts.googleapis.com/css?family=Montserrat:400,700'
    ],
    ServiceWorker: {
        events: true
    },
    version: '[hash]'
}

Thanks

NekR commented 8 years ago

This is a bug, thanks for reporting this.

NekR commented 8 years ago

This will be fixed in v4, probably in September.

NekR commented 8 years ago

@Naramsim

Well, this is September and I think I fixed this issue. Please try it with v4, you may install it with:

npm install offline-plugin@next

Also with v4 your config now can be minimized to this:

const offlinePluginOptions = {
    caches:{
        main:[
            'index.js',
            'index.html',
            ':externals:'
        ]
    },
    externals: [
        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.0.1/color-thief.min.js',
        'https://fonts.googleapis.com/css?family=Montserrat:400,700'
    ],
    ServiceWorker: {
        events: true
    },
    version: '[hash]'
}

and if index.html and index.js are generated by webpack, then even to this:

const offlinePluginOptions = {
    externals: [
        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.0.1/color-thief.min.js',
        'https://fonts.googleapis.com/css?family=Montserrat:400,700'
    ],
    ServiceWorker: {
        events: true
    },
    version: '[hash]'
}
NekR commented 8 years ago

Also, even though this is fixed you still may have issue due to this issue: https://github.com/NekR/offline-plugin/issues/98

Naramsim commented 8 years ago

Thanks, however, I can't try it now, I wrote my custom SW.

Thanks for the effort :+1: Feel free to close

NekR commented 8 years ago

@Naramsim I see, no problem. Just btw, if some feature is missing in offline-plugin you don't need to re-write whole SW, you can still just use offline-plugin but additionally implement your own logic:

new OfflinePlugin({
  ServiceWorker: {
    entry: 'my-sw.js'
  }
})

Here my-sw.js is a file where you can handle SW as you want (e.g. fetch event) and still use offline-plugin.

Naramsim commented 8 years ago

Exactly what Ive done :smile:

NekR commented 8 years ago

@Naramsim nice!