search

goldhand / sw-precache-webpack-plugin

Webpack plugin that generates a service worker using sw-precache that will cache webpack's bundles' emitted assets. You can optionally pass sw-precache configuration options to webpack through this plugin.
MIT License
1.44k stars 104 forks source link

How to add custom files which not generated by webpack into precache list? #137

Closed JounQin closed 6 years ago

JounQin commented 6 years ago

webpack version: 3.10.0

sw-precache-webpack-plugin version: 0.11.4

Please tell us about your environment: macOS 10.13.3

Browser: Chrome 64

Current behavior: No way to add custom file which is not generated by webpack into precache list

Expected/desired behavior: Add an option to add custom files, webpack vendors dll for example https://webpack.js.org/plugins/dll-plugin/

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with your:

Webpack configuration: https://github.com/JounQin/Rubick/blob/master/build/vue-client.ts#L66-L84

goldhand commented 6 years ago

Does importScripts fulfill this behavior?

JounQin commented 6 years ago

@goldhand I've tried importScripts, but it does not work.

image

MikaelEdebro commented 6 years ago

I am also wondering about this feature. I'm trying to cache a font from Google Web Fonts: https://fonts.googleapis.com/icon?family=Material+Icons

goldhand commented 6 years ago

Oh I see, @MikaelEdebro and @JounQin, you want to add additional files to the be precached. Sorry, importScripts is for adding code to your service worker. If you just want to cache things like Google web fonts or any file not emitted by webpack, you want to use a runtimeCaching strategy. Something like this for webfonts:

   runtimeCaching: [
        {
          handler: 'cacheFirst',
          urlPattern: /^https:\/\/fonts\.googleapis\.com\/icon/,
          options: {
            cache: {
              maxEntries: 10,
              name: 'fonts',
            },
          },
        },
  ],