Busting SPA chunk cache for active users after a deploy

created_hook.js

created () {
    const channel = PusherService.subscribe('deployments')
    channel.bind('hypenews', data => {
      persist('FORCE_RELOAD', true)
    })
},

guards.js

function reloadOnDeploy (to, from, next) {
  // check if FORCE_RELOAD is set in localStorage to `true`
  const forceReload = load('FORCE_RELOAD', false)
  if (!forceReload) {
    // Continue as usual if not
    return next()
  }
  // Check if route is blacklisted
  const blackListed = to.matched.slice(0).reverse().some(route => _.get(route, 'meta.blacklisted', false))
  // If blacklisted, then we don't want a refresh, so we continue as normal
  if (blackListed) return next()
  persist('FORCE_RELOAD', false)
  window.location = to.fullPath
}

router.beforeEach(reloadOnDeploy)

notify-deployment.js

const Pusher = require('pusher')

const options = {
  'staging': {
    appId: 'ТHE_STAGING_APP_ID',
    key: 'THE_STAGING_KEY',
    secret: 'THE_STAGING_SECRET',
    cluster: 'THE_CLUSTER',
    encrypted: true
  },
  'production': {
    appId: 'ТHE_PRODUCTION_APP_ID',
    key: 'THE_PRODUCTION_KEY',
    secret: 'THE_PRODUCTION_SECRET',
    cluster: 'THE_CLUSTER',
    encrypted: true
  }
}

const argument = process.argv[2]
const pusher = new Pusher(options[argument])

const deploymentTime = new Date()

pusher.trigger('deployments', 'hypefactors', {
  'message': 'new deployment',
  'time': deploymentTime.toUTCString(),
  'timestamp': deploymentTime.getTime()
})

package.json

{
  "scripts": {
    "deploy": "node build/build.js && node build/build-report.js",
    "notify:deployment:production": "node build/notify-deployment.js production",
    "notify:deployment:staging": "node build/notify-deployment.js staging",
  }
}

PusherService.js

import Pusher from 'pusher-js'

Pusher.logToConsole = process.env.NODE_ENV === 'development'
export const PusherService = new Pusher(process.env.PUSHER_KEY, {
  cluster: 'eu',
  encrypted: true
})

webpack.prod.conf.js

let env
const nodeEnv = process.env.NODE_ENV
switch (nodeEnv) {
  case 'staging':
    env = require('../config/staging.env')
    break
  case 'test':
    env = require('../config/test.env')
    break
  default:
    env = require('../config/prod.env')
}

const webpackConfig = {
  module: {...},
  devtool: {...},
  output: {...},
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
    })
  // other config here    
}
    
module.exports = webpackConfig