SWUpdatePopup.vue

<template>
  <transition name="sw-update-popup">
    <div
      v-if="enabled"
      class="sw-update-popup"
    >
      {{message}}<br>
      <button @click="reload">{{buttonText}}</button>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    updateEvent: {
      type: Object,
      default: null
    }
  },

  computed: {
    popupConfig () {
      for (const config of [this.$themeLocaleConfig, this.$site.themeConfig]) {
        const sw = config.serviceWorker
        if (sw && sw.updatePopup) {
          return typeof sw.updatePopup === 'object' ? sw.updatePopup : {}
        }
      }
      return null
    },

    enabled () {
      return Boolean(this.popupConfig && this.updateEvent)
    },

    message () {
      const c = this.popupConfig
      return (c && c.message) || 'New content is available.'
    },

    buttonText () {
      const c = this.popupConfig
      return (c && c.buttonText) || 'Refresh'
    }
  },

  methods: {
    reload () {
      if (this.updateEvent) {
        this.updateEvent.skipWaiting().then(() => {
          location.reload(true)
        })
        this.updateEvent = null
      }
    }
  }
}
</script>

<style lang="stylus">
@import './styles/config.styl'

.sw-update-popup
  position fixed
  right 1em
  bottom 1em
  padding 1em
  border 1px solid $accentColor
  border-radius 3px
  background #fff
  box-shadow 0 4px 16px rgba(0, 0, 0, 0.5)
  text-align center

  button
    margin-top 0.5em
    padding 0.25em 2em

.sw-update-popup-enter-active, .sw-update-popup-leave-active
  transition opacity 0.3s, transform 0.3s

.sw-update-popup-enter, .sw-update-popup-leave-to
  opacity 0
  transform translate(0, 50%) scale(0.5)
</style>