Laravel-mix: sw-precache integration?

Created on 7 Feb 2017 · 8Comments · Source: JeffreyWay/laravel-mix

Hi there,

Any chance of the sw-precache being integrated into mix?

https://github.com/goldhand/sw-precache-webpack-plugin

Would be nice cache versioned static assets (css / fonts / js) into a service worker cache.

Something like this.

mix.js('resources/assets/js/app.js', 'public/js')
    .autoload({
        jquery: ['$', 'window.jQuery', 'jQuery'],
        vue: ['Vue', 'window.Vue'],
        axios: ['axios', 'window.axios'] 
    })
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/critical.scss', 'public/css')
    .extract(['jquery', 'axios','vue', 'bootstrap-sass'])
    .version()
    .sw-cache();

Source

gcshri

Most helpful comment

in fact it's pretty simple :

var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
mix.webpackConfig({
    plugins: [
    new SWPrecacheWebpackPlugin(
      {
        cacheId: 'myapp',
        filename: 'sw.js',
        maximumFileSizeToCacheInBytes: 4194304,
        minify: false,
        runtimeCaching: [{
          handler: 'cacheFirst',
          urlPattern: /fonts\/.*$/,
        }],
      }
    ),
    ]
});

which will precache css/app.css, js/app.js, mix-manifest.json at load
and then precache all fonts/.* at runtime

pretty awesome !

i'll start working on a PR for laravel-mix implementation

olivM on 24 Mar 2017

❤1 👍1

All 8 comments

No plans, but can manually add support with mix.webpackConfig().

JeffreyWay on 7 Feb 2017

in fact it's pretty simple :

var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
mix.webpackConfig({
    plugins: [
    new SWPrecacheWebpackPlugin(
      {
        cacheId: 'myapp',
        filename: 'sw.js',
        maximumFileSizeToCacheInBytes: 4194304,
        minify: false,
        runtimeCaching: [{
          handler: 'cacheFirst',
          urlPattern: /fonts\/.*$/,
        }],
      }
    ),
    ]
});

which will precache css/app.css, js/app.js, mix-manifest.json at load
and then precache all fonts/.* at runtime

pretty awesome !

i'll start working on a PR for laravel-mix implementation

olivM on 24 Mar 2017

❤1 👍1

Did something like that, but with the sw-toolbox to allow for configurable cache sizes and times for different asset types on the /public folder.

gcshri on 24 Mar 2017

could you share your implentation, so we find the best way to include it in Mix ?

olivM on 24 Mar 2017

ping to @gcshri see olivM comment I'm also interested! Thanks!

acacha on 2 May 2017

@acacha major apologies for missing this one. Would recommend you check out https://workboxjs.org/ - far better integration / build options.

gcshri on 19 May 2017

👍1

Anyone got the workboxPlugin working with Laravel Mix?

cerw on 16 Nov 2017

Thanks @olivM ! After messing around trying to apply the tuto i found on this blog,
Your above clue helped me to break through and get my code working !