CODEWITHSUNDEEP
laravelwebpacklaravel-mixworkboxworkbox-webpack-plugin
mp035
mp035

Reputation: 1065

How to precache static assets with laravel-mix-workbox?

I'm trying to build a PWA with offline support using Laravel and Vue.js. I'm using the laravel-mix-workbox plugin to setup my service worker, but I'm having a massive amount of trouble trying to accomplish what should be a simple task. I have some static assets (images, XML files etc.) that are served out of my application, and I can't get workbox to add them to the precached file list.

I have tried moving the assets to /resources/img and adding a call to copyDirectory to try to get them included, also, I have tried the webpack-copy-plugin, but only the compiled assets are included(js, css, fonts etc). Here is my webpack.mix.js file:

const mix = require('laravel-mix');

//mp035 add workbox plugin and copy-webpack-plugin
require('laravel-mix-workbox');
const CopyPlugin = require('copy-webpack-plugin');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

//mp035 fix issue with laravel-mix outputting bad urls in precache manifest for app.js (//js/app.js) and app.css
// and copy assets into place (so they are in the build tree)
mix.webpackConfig({
    output: {
      publicPath: ''
    },
    plugins: [
        new CopyPlugin([
          { from: 'resources/img/*', to: 'public/img', flatten:true },
          { from: 'resources/root/*', to: 'public', flatten:true },
        ]),
      ],
  })


.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .sourceMaps().version()

// mp035 add inject manifest plugin to inject workbox manifest into the service worker.
.injectManifest({
    swSrc: './resources/pwa/service-worker.js',
    maximumFileSizeToCacheInBytes: 20000000, // ******************************DEBUG ONLY!!!
});

Does anyone know how I can include all files in my /resources/img (or /public/img) in the precached files list?

Upvotes: 0

Views: 1355

Answers (1)

mp035
mp035

Reputation: 1065

Ok, so it looks like this is an issue with laravel-mix-workbox. Removing it and using the generic workbox webpack plugin solves the problem. For anyone finding this, here is the updated webpack.mix.js:

const mix = require('laravel-mix');

//mp035 add workbox plugin and copy-webpack-plugin
const CopyPlugin = require('copy-webpack-plugin');
const {InjectManifest} = require('workbox-webpack-plugin');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

//mp035 fix issue with laravel-mix outputting bad urls in precache manifest for app.js (//js/app.js) and app.css
// and copy assets into place (so they are in the build tree)
mix.webpackConfig({
    output: {
      publicPath: ''
    },
    plugins: [
        new CopyPlugin([
          { from: 'resources/img/*', to: 'public/img', flatten:true },
          { from: 'resources/root/*', to: 'public', flatten:true },
        ]),
        new InjectManifest({
            swSrc: './resources/pwa/service-worker.js',
            maximumFileSizeToCacheInBytes: 20000000, // ******************************DEBUG ONLY!!!
        }),
      ],
  })


.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .sourceMaps().version();

All in all, using workbox with laravel-mix has been an extremely painful process with all of the 'minor' tweaks that laravel-mix does breaking the workbox plugin. I'd recommend sticking to plain webpack if possible.

Upvotes: 1

Related Questions