0
# Update Notifications
1

2
Vue component system for displaying service worker update notifications to users, including the default popup component and customization options.
3

4
## Capabilities
5

6
### SWUpdatePopup Component
7

8
Default Vue component for displaying service worker update notifications with internationalization support and customizable styling.
9

10
```javascript { .api }
11
/**
12
 * Default service worker update popup component
13
 * Automatically registered when updatePopup is enabled
14
 */
15
const SWUpdatePopup: VueComponent;
16

17
interface SWUpdatePopupData {
18
  /** Raw popup configuration from plugin options */
19
  rawPopupConfig: boolean | UpdatePopupConfig;
20
  /** Current update event instance */
21
  updateEvent: SWUpdateEvent | null;
22
}
23

24
interface SWUpdatePopupComputed {
25
  /** Processed popup configuration with locale resolution */
26
  popupConfig: UpdatePopupConfig;
27
  /** Whether the popup should be displayed */
28
  enabled: boolean;
29
  /** Localized update message text */
30
  message: string;
31
  /** Localized refresh button text */
32
  buttonText: string;
33
}
34

35
interface SWUpdatePopupMethods {
36
  /** Handle service worker update event */
37
  onSWUpdated(event: SWUpdateEvent): void;
38
  /** Reload page with new service worker */
39
  reload(): void;
40
}
41
```
42

43
**Template Structure:**
44

45
The component provides a default slot with scoped props for complete customization:
46

47
```javascript { .api }
48
interface SWUpdatePopupSlotProps {
49
  /** Function to reload with new service worker */
50
  reload: () => void;
51
  /** Whether popup should be shown */
52
  enabled: boolean;
53
  /** Localized update message */
54
  message: string;
55
  /** Localized button text */
56
  buttonText: string;
57
}
58
```
59

60
**Usage Examples:**
61

62
```javascript
63
// Using default popup
64
module.exports = {
65
  plugins: [
66
    ['@vuepress/pwa', {
67
      updatePopup: true
68
    }]
69
  ]
70
}
71

72
// Custom popup content using scoped slot
73
// In a Vue component or markdown file
74
<SWUpdatePopup>
75
  <template v-slot="{ reload, enabled, message, buttonText }">
76
    <div v-if="enabled" class="custom-update-popup">
77
      <h3>{{ message }}</h3>
78
      <p>Click to get the latest content!</p>
79
      <button @click="reload" class="update-btn">
80
        {{ buttonText }}
81
      </button>
82
    </div>
83
  </template>
84
</SWUpdatePopup>
85
```
86

87
### Custom Popup Component
88

89
You can replace the default popup component with your own implementation.
90

91
```javascript { .api }
92
/**
93
 * Custom popup component requirements
94
 * Must listen for 'sw-updated' events and handle reload functionality
95
 */
96
interface CustomPopupComponent extends VueComponent {
97
  /** Must handle SWUpdateEvent from event bus */
98
  created(): void;
99
  /** Must implement reload functionality */
100
  methods: {
101
    reload(): void;
102
  };
103
}
104
```
105

106
**Custom Component Example:**
107

108
```javascript
109
// CustomSWUpdatePopup.vue
110
export default {
111
  name: 'CustomSWUpdatePopup',
112
  data() {
113
    return {
114
      updateEvent: null,
115
      show: false
116
    };
117
  },
118
  created() {
119
    // Import event bus (available as '@sw-event' alias)
120
    const event = require('@sw-event').default;
121
    event.$on('sw-updated', this.onSWUpdated);
122
  },
123
  methods: {
124
    onSWUpdated(updateEvent) {
125
      this.updateEvent = updateEvent;
126
      this.show = true;
127
    },
128
    reload() {
129
      if (this.updateEvent) {
130
        this.updateEvent.skipWaiting().then(() => {
131
          location.reload(true);
132
        });
133
        this.show = false;
134
        this.updateEvent = null;
135
      }
136
    }
137
  }
138
};
139

140
// Configure in .vuepress/config.js
141
module.exports = {
142
  plugins: [
143
    ['@vuepress/pwa', {
144
      updatePopup: true,
145
      popupComponent: 'CustomSWUpdatePopup'
146
    }]
147
  ]
148
}
149
```
150

151
### Internationalization Support
152

153
Built-in support for multiple locales with customizable messages.
154

155
```javascript { .api }
156
/**
157
 * Default popup configuration with internationalization
158
 * Exported from lib/i18n.js
159
 */
160
interface PopupI18nConfig {
161
  '/': LocaleConfig;      // English (default)
162
  '/zh/': LocaleConfig;   // Chinese
163
  '/ru/': LocaleConfig;   // Russian  
164
  '/uk/': LocaleConfig;   // Ukrainian
165
  '/ja/': LocaleConfig;   // Japanese
166
  '/es/': LocaleConfig;   // Spanish
167
}
168

169
interface LocaleConfig {
170
  /** Notification message text */
171
  message: string;
172
  /** Refresh button text */
173
  buttonText: string;
174
}
175
```
176

177
**Default Messages:**
178

179
```javascript
180
const defaultMessages = {
181
  '/': {
182
    message: 'New content is available.',
183
    buttonText: 'Refresh'
184
  },
185
  '/zh/': {
186
    message: '发现新内容可用',
187
    buttonText: '刷新'
188
  },
189
  '/ru/': {
190
    message: 'Доступен новый контент.',
191
    buttonText: 'Обновить'
192
  },
193
  '/uk/': {
194
    message: 'Доступний новий контент.',
195
    buttonText: 'Оновити'
196
  },
197
  '/ja/': {
198
    message: '新しいコンテンツがあります。',
199
    buttonText: '更新する'
200
  },
201
  '/es/': {
202
    message: 'Hay nuevo contenido disponible.',
203
    buttonText: 'Actualizar'
204
  }
205
};
206
```
207

208
### Popup Styling
209

210
Default CSS styles for the popup component with transition animations.
211

212
```javascript { .api }
213
/**
214
 * Default popup styles (scoped CSS)
215
 * Can be overridden with custom CSS
216
 */
217
interface PopupStyles {
218
  /** Main popup container */
219
  '.sw-update-popup': {
220
    position: 'fixed';
221
    right: '1em';
222
    bottom: '1em';
223
    padding: '1em';
224
    border: '1px solid #3eaf7c';
225
    borderRadius: '3px';
226
    background: '#fff';
227
    boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)';
228
    textAlign: 'center';
229
    zIndex: 3;
230
  };
231
  
232
  /** Refresh button */
233
  '.sw-update-popup > button': {
234
    marginTop: '0.5em';
235
    padding: '0.25em 2em';
236
  };
237
  
238
  /** Transition animations */
239
  '.sw-update-popup-enter-active, .sw-update-popup-leave-active': {
240
    transition: 'opacity 0.3s, transform 0.3s';
241
  };
242
}
243
```
244

245
**Custom Styling Example:**
246

247
```css
248
/* Override default styles in your custom CSS */
249
.sw-update-popup {
250
  background: #f0f0f0;
251
  border-color: #007acc;
252
  border-radius: 8px;
253
}
254

255
.sw-update-popup > button {
256
  background: #007acc;
257
  color: white;
258
  border: none;
259
  border-radius: 4px;
260
  cursor: pointer;
261
}
262
```
263

264
## Types
265

266
```javascript { .api }
267
interface UpdatePopupConfig {
268
  /** Default message text */
269
  message?: string;
270
  /** Default button text */
271
  buttonText?: string;
272
  /** Locale-specific configurations */
273
  [locale: string]: {
274
    message: string;
275
    buttonText: string;
276
  };
277
}
278

279
interface VueComponent {
280
  /** Component name */
281
  name?: string;
282
  /** Component data */
283
  data?(): any;
284
  /** Computed properties */  
285
  computed?: Record<string, () => any>;
286
  /** Component methods */
287
  methods?: Record<string, (...args: any[]) => any>;
288
  /** Lifecycle hooks */
289
  created?(): void;
290
  /** Component template */
291
  template?: string;
292
}
293
```