Update Notifications

/**
 * Default service worker update popup component
 * Automatically registered when updatePopup is enabled
 */
const SWUpdatePopup: VueComponent;

interface SWUpdatePopupData {
  /** Raw popup configuration from plugin options */
  rawPopupConfig: boolean | UpdatePopupConfig;
  /** Current update event instance */
  updateEvent: SWUpdateEvent | null;
}

interface SWUpdatePopupComputed {
  /** Processed popup configuration with locale resolution */
  popupConfig: UpdatePopupConfig;
  /** Whether the popup should be displayed */
  enabled: boolean;
  /** Localized update message text */
  message: string;
  /** Localized refresh button text */
  buttonText: string;
}

interface SWUpdatePopupMethods {
  /** Handle service worker update event */
  onSWUpdated(event: SWUpdateEvent): void;
  /** Reload page with new service worker */
  reload(): void;
}

interface SWUpdatePopupSlotProps {
  /** Function to reload with new service worker */
  reload: () => void;
  /** Whether popup should be shown */
  enabled: boolean;
  /** Localized update message */
  message: string;
  /** Localized button text */
  buttonText: string;
}

// Using default popup
module.exports = {
  plugins: [
    ['@vuepress/pwa', {
      updatePopup: true
    }]
  ]
}

// Custom popup content using scoped slot
// In a Vue component or markdown file
<SWUpdatePopup>
  <template v-slot="{ reload, enabled, message, buttonText }">
    <div v-if="enabled" class="custom-update-popup">
      <h3>{{ message }}</h3>
      <p>Click to get the latest content!</p>
      <button @click="reload" class="update-btn">
        {{ buttonText }}
      </button>
    </div>
  </template>
</SWUpdatePopup>

/**
 * Custom popup component requirements
 * Must listen for 'sw-updated' events and handle reload functionality
 */
interface CustomPopupComponent extends VueComponent {
  /** Must handle SWUpdateEvent from event bus */
  created(): void;
  /** Must implement reload functionality */
  methods: {
    reload(): void;
  };
}

// CustomSWUpdatePopup.vue
export default {
  name: 'CustomSWUpdatePopup',
  data() {
    return {
      updateEvent: null,
      show: false
    };
  },
  created() {
    // Import event bus (available as '@sw-event' alias)
    const event = require('@sw-event').default;
    event.$on('sw-updated', this.onSWUpdated);
  },
  methods: {
    onSWUpdated(updateEvent) {
      this.updateEvent = updateEvent;
      this.show = true;
    },
    reload() {
      if (this.updateEvent) {
        this.updateEvent.skipWaiting().then(() => {
          location.reload(true);
        });
        this.show = false;
        this.updateEvent = null;
      }
    }
  }
};

// Configure in .vuepress/config.js
module.exports = {
  plugins: [
    ['@vuepress/pwa', {
      updatePopup: true,
      popupComponent: 'CustomSWUpdatePopup'
    }]
  ]
}

/**
 * Default popup configuration with internationalization
 * Exported from lib/i18n.js
 */
interface PopupI18nConfig {
  '/': LocaleConfig;      // English (default)
  '/zh/': LocaleConfig;   // Chinese
  '/ru/': LocaleConfig;   // Russian  
  '/uk/': LocaleConfig;   // Ukrainian
  '/ja/': LocaleConfig;   // Japanese
  '/es/': LocaleConfig;   // Spanish
}

interface LocaleConfig {
  /** Notification message text */
  message: string;
  /** Refresh button text */
  buttonText: string;
}

const defaultMessages = {
  '/': {
    message: 'New content is available.',
    buttonText: 'Refresh'
  },
  '/zh/': {
    message: '发现新内容可用',
    buttonText: '刷新'
  },
  '/ru/': {
    message: 'Доступен новый контент.',
    buttonText: 'Обновить'
  },
  '/uk/': {
    message: 'Доступний новий контент.',
    buttonText: 'Оновити'
  },
  '/ja/': {
    message: '新しいコンテンツがあります。',
    buttonText: '更新する'
  },
  '/es/': {
    message: 'Hay nuevo contenido disponible.',
    buttonText: 'Actualizar'
  }
};

/**
 * Default popup styles (scoped CSS)
 * Can be overridden with custom CSS
 */
interface PopupStyles {
  /** Main popup container */
  '.sw-update-popup': {
    position: 'fixed';
    right: '1em';
    bottom: '1em';
    padding: '1em';
    border: '1px solid #3eaf7c';
    borderRadius: '3px';
    background: '#fff';
    boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)';
    textAlign: 'center';
    zIndex: 3;
  };
  
  /** Refresh button */
  '.sw-update-popup > button': {
    marginTop: '0.5em';
    padding: '0.25em 2em';
  };
  
  /** Transition animations */
  '.sw-update-popup-enter-active, .sw-update-popup-leave-active': {
    transition: 'opacity 0.3s, transform 0.3s';
  };
}

/* Override default styles in your custom CSS */
.sw-update-popup {
  background: #f0f0f0;
  border-color: #007acc;
  border-radius: 8px;
}

.sw-update-popup > button {
  background: #007acc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

interface UpdatePopupConfig {
  /** Default message text */
  message?: string;
  /** Default button text */
  buttonText?: string;
  /** Locale-specific configurations */
  [locale: string]: {
    message: string;
    buttonText: string;
  };
}

interface VueComponent {
  /** Component name */
  name?: string;
  /** Component data */
  data?(): any;
  /** Computed properties */  
  computed?: Record<string, () => any>;
  /** Component methods */
  methods?: Record<string, (...args: any[]) => any>;
  /** Lifecycle hooks */
  created?(): void;
  /** Component template */
  template?: string;
}