PWA with Laravel Mix, Webpack and Service Worker caching strategies

README.md

Laravel Mix's Webpack Configuration for auto dependencies extract and Workbox Caching strategies

Documentations

The Service Worker Cookbook
Laravel Mix
Workbox

Videos

Workbox: Flexible PWA Libraries (Chrome Dev Summit 2017)
WordPress + PWAs = 💖 (Chrome Dev Summit 2017)

PWA

Push Companion
Engaging Experiences - PWA Roadshow

package.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "cross-env": "^5.1",
    "laravel-mix": "^2.0",
    "webpack-bundle-analyzer": "^2.10.0",
    "workbox-webpack-plugin": "^2.1.2"
  },
  "dependencies": {
    "axios": "^0.17",
    "bootstrap": "^4.0.0",
    "jquery": "^3.2",
    "lodash": "^4.17.4",
    "popper.js": "^1.12.9",
    "vue": "^2.5.7",
    "vue-router": "^3.0.1"
  }
}

webpack.mix.js

const mix = require('laravel-mix');
const workboxPlugin = require('workbox-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

/*
 |--------------------------------------------------------------------------
 | Package.json
 |--------------------------------------------------------------------------
 */

const package = require('./package.json');
const dependencies = Object.keys(package.dependencies);

/*
 |--------------------------------------------------------------------------
 | 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.
 |
 */

mix.extract(dependencies)
   .js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .autoload({
     jquery: ['$', 'window.jQuery']
   })
   .options({
     extractVueStyles: true,
     processCssUrls: true,
     uglify: {},
     purifyCss: false,
     //purifyCss: {},
     postCss: [require('autoprefixer')],
     clearConsole: false
   })
   .webpackConfig({
     plugins: [
       new workboxPlugin({
         globDirectory: `${__dirname}/public`,
         globPatterns: [
           '**/*.{html,css,js}',
           'fonts/**/*.*'
         ],
        //  swSrc: './src/sw.js',
         swDest: path.join(`${__dirname}/public`, 'sw.js'),
         clientsClaim: true,
         skipWaiting: true,
         runtimeCaching: [
           {
             urlPattern: new RegExp(`${process.env.APP_URL}`),
             handler: 'networkFirst',
             options: {
               cacheName: `${process.env.APP_NAME}-${process.env.APP_ENV}`
             }
           },
           {
             urlPattern: new RegExp('https://fonts.(googleapis|gstatic).com'),
             handler: 'cacheFirst',
             options: {
               cacheName: 'google-fonts'
             }
           }
         ]
       }),
       new BundleAnalyzerPlugin({
         analyzerMode: 'static',
         reportFilename: path.join(`${__dirname}/public`, 'webpack-report.html'),
         openAnalyzer: false,
         logLevel: 'silent'
       }),
     ]
   })
   .sourceMaps(!mix.inProduction())
   .disableNotifications();

This needs to be updated