@vuepress/plugin-pwa 2.0.0-rc.41 → 2.0.0-rc.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/client/components/PwaFoundPopup.d.ts +5 -5
- package/lib/client/components/PwaFoundPopup.js +7 -5
- package/lib/client/components/PwaInstall.d.ts +3 -3
- package/lib/client/components/PwaInstall.js +5 -3
- package/lib/client/components/PwaInstallModal.d.ts +5 -5
- package/lib/client/components/PwaInstallModal.js +14 -4
- package/lib/client/components/PwaReadyPopup.d.ts +5 -5
- package/lib/client/components/PwaReadyPopup.js +6 -5
- package/lib/client/components/icons.js +1 -1
- package/lib/client/composables/setupPwa.js +2 -2
- package/lib/client/styles/modal.css +21 -23
- package/lib/client/styles/popup.css +6 -6
- package/lib/client/styles/vars.css +9 -9
- package/lib/client/utils/forceUpdate.js +3 -3
- package/lib/client/utils/unregisterSW.js +1 -0
- package/lib/node/generateServiceWorker.js +1 -1
- package/lib/node/getManifest.js +3 -0
- package/lib/node/helper.js +1 -1
- package/lib/node/options.d.ts +1 -1
- package/lib/node/pwaPlugin.js +4 -4
- package/lib/shared/manifest.d.ts +4 -4
- package/lib/shared/manifest.js +0 -1
- package/package.json +6 -6
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import type { PropType, SlotsType, VNode } from 'vue';
|
|
2
2
|
import type { PwaPluginLocaleConfig } from '../../shared/index.js';
|
|
3
3
|
import '../styles/popup.css';
|
|
4
|
-
export declare const PwaFoundPopup: import("vue").DefineComponent<{
|
|
4
|
+
export declare const PwaFoundPopup: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
5
5
|
/** locale data */
|
|
6
6
|
locales: {
|
|
7
7
|
type: PropType<PwaPluginLocaleConfig>;
|
|
8
8
|
required: true;
|
|
9
9
|
};
|
|
10
|
-
}
|
|
10
|
+
}>, () => VNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
11
11
|
/** locale data */
|
|
12
12
|
locales: {
|
|
13
13
|
type: PropType<PwaPluginLocaleConfig>;
|
|
14
14
|
required: true;
|
|
15
15
|
};
|
|
16
|
-
}
|
|
16
|
+
}>> & Readonly<{}>, {}, SlotsType<{
|
|
17
17
|
default?: (props: {
|
|
18
18
|
found: boolean;
|
|
19
19
|
refresh: () => void;
|
|
20
|
-
}) => VNode
|
|
21
|
-
}
|
|
20
|
+
}) => VNode | VNode[] | null;
|
|
21
|
+
}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useLocaleConfig } from '@vuepress/helper/client';
|
|
2
|
-
import { defineComponent, h, onMounted, ref
|
|
2
|
+
import { Transition, defineComponent, h, onMounted, ref } from 'vue';
|
|
3
3
|
import { usePwaEvent } from '../composables/index.js';
|
|
4
4
|
import { UpdateIcon } from './icons.js';
|
|
5
5
|
import '../styles/popup.css';
|
|
@@ -27,9 +27,9 @@ export const PwaFoundPopup = defineComponent({
|
|
|
27
27
|
onMounted(() => {
|
|
28
28
|
const event = usePwaEvent();
|
|
29
29
|
event.on('updatefound', () => {
|
|
30
|
-
navigator.serviceWorker.getRegistration().then((registration) => {
|
|
30
|
+
void navigator.serviceWorker.getRegistration().then((registration) => {
|
|
31
31
|
// Check whether a valid service worker is active
|
|
32
|
-
if (registration
|
|
32
|
+
if (registration?.active)
|
|
33
33
|
found.value = true;
|
|
34
34
|
});
|
|
35
35
|
});
|
|
@@ -40,13 +40,15 @@ export const PwaFoundPopup = defineComponent({
|
|
|
40
40
|
return () => h(Transition, { name: 'popup' }, () => slots.default?.({
|
|
41
41
|
found: found.value,
|
|
42
42
|
refresh,
|
|
43
|
-
})
|
|
43
|
+
}) ??
|
|
44
44
|
(found.value
|
|
45
45
|
? h('button', {
|
|
46
46
|
type: 'button',
|
|
47
47
|
class: 'sw-hint-popup',
|
|
48
48
|
tabindex: 0,
|
|
49
|
-
onClick: () =>
|
|
49
|
+
onClick: () => {
|
|
50
|
+
refresh();
|
|
51
|
+
},
|
|
50
52
|
}, [
|
|
51
53
|
locale.value.hint,
|
|
52
54
|
h('span', { class: 'icon-wrapper' }, h(UpdateIcon)),
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import type { PropType, VNode } from 'vue';
|
|
2
2
|
import type { PwaPluginLocaleConfig } from '../../shared/index.js';
|
|
3
3
|
import '../styles/modal.css';
|
|
4
|
-
export declare const PwaInstall: import("vue").DefineComponent<{
|
|
4
|
+
export declare const PwaInstall: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
5
5
|
/** locale data */
|
|
6
6
|
locales: {
|
|
7
7
|
type: PropType<PwaPluginLocaleConfig>;
|
|
8
8
|
required: true;
|
|
9
9
|
};
|
|
10
|
-
}
|
|
10
|
+
}>, () => VNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
11
11
|
/** locale data */
|
|
12
12
|
locales: {
|
|
13
13
|
type: PropType<PwaPluginLocaleConfig>;
|
|
14
14
|
required: true;
|
|
15
15
|
};
|
|
16
|
-
}
|
|
16
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -20,7 +20,7 @@ export const PwaInstall = defineComponent({
|
|
|
20
20
|
const isIOS = ref(false);
|
|
21
21
|
const isSafari = ref(false);
|
|
22
22
|
const hinted = ref(false);
|
|
23
|
-
const useHint = computed(() => isIOS.value && isSafari.value && hinted.value
|
|
23
|
+
const useHint = computed(() => isIOS.value && isSafari.value && !hinted.value);
|
|
24
24
|
const showInstall = computed(() => (hasRelatedApps.value && canInstall.value) || useHint.value);
|
|
25
25
|
const getInstalledStatus = () => {
|
|
26
26
|
if (navigator.standalone)
|
|
@@ -52,7 +52,7 @@ export const PwaInstall = defineComponent({
|
|
|
52
52
|
hinted.value = Boolean(localStorage.getItem('iOS-pwa-hint'));
|
|
53
53
|
}
|
|
54
54
|
if ('getInstalledRelatedApps' in navigator)
|
|
55
|
-
navigator
|
|
55
|
+
void navigator
|
|
56
56
|
.getInstalledRelatedApps()
|
|
57
57
|
.then((result) => {
|
|
58
58
|
hasRelatedApps.value = result.length > 0;
|
|
@@ -77,7 +77,9 @@ export const PwaInstall = defineComponent({
|
|
|
77
77
|
onCanInstall: (value) => {
|
|
78
78
|
canInstall.value = value;
|
|
79
79
|
},
|
|
80
|
-
onHint: () =>
|
|
80
|
+
onHint: () => {
|
|
81
|
+
hint();
|
|
82
|
+
},
|
|
81
83
|
onClose: () => toggleIsOpen(false),
|
|
82
84
|
}),
|
|
83
85
|
]);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { PropType, VNode } from 'vue';
|
|
2
2
|
import type { PwaPluginLocaleConfig } from '../../shared/index.js';
|
|
3
|
-
export declare const PwaInstallModal: import("vue").DefineComponent<{
|
|
3
|
+
export declare const PwaInstallModal: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
4
4
|
/** locale data */
|
|
5
5
|
locales: {
|
|
6
6
|
type: PropType<PwaPluginLocaleConfig>;
|
|
@@ -12,7 +12,7 @@ export declare const PwaInstallModal: import("vue").DefineComponent<{
|
|
|
12
12
|
* 是否使用提示
|
|
13
13
|
*/
|
|
14
14
|
useHint: BooleanConstructor;
|
|
15
|
-
}
|
|
15
|
+
}>, () => VNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "canInstall" | "hint")[], "close" | "canInstall" | "hint", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
16
16
|
/** locale data */
|
|
17
17
|
locales: {
|
|
18
18
|
type: PropType<PwaPluginLocaleConfig>;
|
|
@@ -24,10 +24,10 @@ export declare const PwaInstallModal: import("vue").DefineComponent<{
|
|
|
24
24
|
* 是否使用提示
|
|
25
25
|
*/
|
|
26
26
|
useHint: BooleanConstructor;
|
|
27
|
-
}>> & {
|
|
27
|
+
}>> & Readonly<{
|
|
28
28
|
onClose?: ((...args: any[]) => any) | undefined;
|
|
29
29
|
onCanInstall?: ((...args: any[]) => any) | undefined;
|
|
30
30
|
onHint?: ((...args: any[]) => any) | undefined;
|
|
31
|
-
}
|
|
31
|
+
}>, {
|
|
32
32
|
useHint: boolean;
|
|
33
|
-
}, {}>;
|
|
33
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* eslint-disable no-console */
|
|
1
2
|
import { useLocaleConfig } from '@vuepress/helper/client';
|
|
2
3
|
import { useEventListener } from '@vueuse/core';
|
|
3
4
|
import { defineComponent, h, onMounted, shallowRef } from 'vue';
|
|
@@ -89,11 +90,16 @@ export const PwaInstallModal = defineComponent({
|
|
|
89
90
|
if (event.key === 'Escape')
|
|
90
91
|
emit('close', false);
|
|
91
92
|
});
|
|
92
|
-
getManifest();
|
|
93
|
+
void getManifest();
|
|
93
94
|
}
|
|
94
95
|
});
|
|
95
96
|
return () => h('div', { id: 'install-modal-wrapper' }, [
|
|
96
|
-
h('div', {
|
|
97
|
+
h('div', {
|
|
98
|
+
class: 'background',
|
|
99
|
+
onClick: () => {
|
|
100
|
+
emit('close', false);
|
|
101
|
+
},
|
|
102
|
+
}),
|
|
97
103
|
h('div', { class: 'install-modal' }, [
|
|
98
104
|
h('div', { class: 'header' }, [
|
|
99
105
|
// close button
|
|
@@ -101,7 +107,9 @@ export const PwaInstallModal = defineComponent({
|
|
|
101
107
|
'type': 'button',
|
|
102
108
|
'class': 'close-button',
|
|
103
109
|
'aria-label': locale.value.close,
|
|
104
|
-
'onClick': () =>
|
|
110
|
+
'onClick': () => {
|
|
111
|
+
emit('close', false);
|
|
112
|
+
},
|
|
105
113
|
}, h(CloseIcon)),
|
|
106
114
|
h('div', { class: 'logo' }, [
|
|
107
115
|
manifest.value.icons
|
|
@@ -160,7 +168,9 @@ export const PwaInstallModal = defineComponent({
|
|
|
160
168
|
h('button', {
|
|
161
169
|
type: 'button',
|
|
162
170
|
class: 'cancel-button',
|
|
163
|
-
onClick: () =>
|
|
171
|
+
onClick: () => {
|
|
172
|
+
emit('close', false);
|
|
173
|
+
},
|
|
164
174
|
}, locale.value.cancel),
|
|
165
175
|
]),
|
|
166
176
|
]),
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import type { PropType, SlotsType, VNode } from 'vue';
|
|
2
2
|
import type { PwaPluginLocaleConfig } from '../../shared/index.js';
|
|
3
3
|
import '../styles/popup.css';
|
|
4
|
-
export declare const PwaReadyPopup: import("vue").DefineComponent<{
|
|
4
|
+
export declare const PwaReadyPopup: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
5
5
|
/** locale data */
|
|
6
6
|
locales: {
|
|
7
7
|
type: PropType<PwaPluginLocaleConfig>;
|
|
8
8
|
required: true;
|
|
9
9
|
};
|
|
10
|
-
}
|
|
10
|
+
}>, () => VNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
11
11
|
/** locale data */
|
|
12
12
|
locales: {
|
|
13
13
|
type: PropType<PwaPluginLocaleConfig>;
|
|
14
14
|
required: true;
|
|
15
15
|
};
|
|
16
|
-
}
|
|
16
|
+
}>> & Readonly<{}>, {}, SlotsType<{
|
|
17
17
|
default?: (props: {
|
|
18
18
|
isReady: boolean;
|
|
19
19
|
reload: () => void;
|
|
20
|
-
}) => VNode
|
|
21
|
-
}
|
|
20
|
+
}) => VNode | VNode[] | null;
|
|
21
|
+
}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useLocaleConfig } from '@vuepress/helper/client';
|
|
2
|
-
import { computed, defineComponent, h, onMounted, shallowRef,
|
|
2
|
+
import { Transition, computed, defineComponent, h, onMounted, shallowRef, } from 'vue';
|
|
3
3
|
import { usePwaEvent } from '../composables/index.js';
|
|
4
4
|
import { skipWaiting } from '../utils/index.js';
|
|
5
5
|
import { UpdateIcon } from './icons.js';
|
|
@@ -27,20 +27,21 @@ export const PwaReadyPopup = defineComponent({
|
|
|
27
27
|
onMounted(() => {
|
|
28
28
|
const event = usePwaEvent();
|
|
29
29
|
event.on('updated', (reg) => {
|
|
30
|
-
|
|
31
|
-
registration.value = reg;
|
|
30
|
+
registration.value = reg;
|
|
32
31
|
});
|
|
33
32
|
});
|
|
34
33
|
return () => h(Transition, { name: 'popup' }, () => slots.default?.({
|
|
35
34
|
isReady: isReady.value,
|
|
36
35
|
reload,
|
|
37
|
-
})
|
|
36
|
+
}) ??
|
|
38
37
|
(isReady.value
|
|
39
38
|
? h('button', {
|
|
40
39
|
type: 'button',
|
|
41
40
|
class: 'sw-update-popup',
|
|
42
41
|
tabindex: 0,
|
|
43
|
-
onClick: () =>
|
|
42
|
+
onClick: () => {
|
|
43
|
+
reload();
|
|
44
|
+
},
|
|
44
45
|
}, [
|
|
45
46
|
locale.value.update,
|
|
46
47
|
h('span', { class: 'icon-wrapper' }, h(UpdateIcon)),
|
|
@@ -5,7 +5,7 @@ const SVGWrapper = ({ name = '', color = 'currentColor' }, { slots }) => h('svg'
|
|
|
5
5
|
'viewBox': '0 0 1024 1024',
|
|
6
6
|
'fill': color,
|
|
7
7
|
'aria-label': `${name} icon`,
|
|
8
|
-
}, slots.default
|
|
8
|
+
}, slots.default());
|
|
9
9
|
SVGWrapper.displayName = 'SVGWrapper';
|
|
10
10
|
export const ArrowLeftIcon = () => h(SVGWrapper, { name: 'arrow-left' }, () => h('path', {
|
|
11
11
|
d: 'M802.8 448h-428l166-158.8c23.8-25 23.8-65.4 0-90.4s-62.4-25-86.4 0L178 466.8c-12 11.6-18 27.4-18 44.8v0.8c0 17.4 6 33.2 18 44.8l276.2 268c24 25 62.6 25 86.4 0 23.8-25 23.8-65.4 0-90.4l-166-158.8h428c33.8 0 61.2-28.6 61.2-64 0.2-36-27.2-64-61-64z',
|
|
@@ -10,11 +10,11 @@ export const setupPwa = (serviceWorkerPath, shouldForceUpdate = false) => {
|
|
|
10
10
|
const event = mitt();
|
|
11
11
|
provide(pwaEventSymbol, event);
|
|
12
12
|
onMounted(async () => {
|
|
13
|
-
if (__VUEPRESS_DEV__)
|
|
13
|
+
if (__VUEPRESS_DEV__ || !('serviceWorker' in navigator))
|
|
14
14
|
return;
|
|
15
15
|
let refreshing = false;
|
|
16
16
|
// Only listen controllerchange event when a serviceWorker is active
|
|
17
|
-
if (navigator.serviceWorker
|
|
17
|
+
if (navigator.serviceWorker.controller)
|
|
18
18
|
navigator.serviceWorker.addEventListener('controllerchange', () => {
|
|
19
19
|
if (refreshing)
|
|
20
20
|
return;
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
padding: 0 16px;
|
|
33
33
|
border-width: 0;
|
|
34
34
|
border-radius: 1.2rem;
|
|
35
|
-
background: var(--pwa-
|
|
36
|
-
color: var(--pwa-
|
|
35
|
+
background: var(--pwa-c-accent-bg);
|
|
36
|
+
color: var(--pwa-c-accent-text);
|
|
37
37
|
outline: none;
|
|
38
38
|
font-weight: 600;
|
|
39
39
|
line-height: 2.2rem;
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
.modal-button:hover, .modal-button:active {
|
|
54
|
-
background: var(--pwa-
|
|
54
|
+
background: var(--pwa-c-accent-hover);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
#install-modal-wrapper {
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
flex-direction: column;
|
|
91
91
|
max-width: 56em;
|
|
92
92
|
border-radius: 10px;
|
|
93
|
-
background: var(--pwa-bg
|
|
93
|
+
background: var(--pwa-c-bg);
|
|
94
94
|
transition: background 0.3s;
|
|
95
95
|
animation: 0.15s pwa-opened;
|
|
96
96
|
}
|
|
@@ -126,12 +126,12 @@
|
|
|
126
126
|
float: right;
|
|
127
127
|
border-width: 0;
|
|
128
128
|
background: transparent;
|
|
129
|
-
color: var(--pwa-
|
|
129
|
+
color: var(--pwa-c-text);
|
|
130
130
|
cursor: pointer;
|
|
131
131
|
transition: color 0.3s ease;
|
|
132
132
|
}
|
|
133
133
|
#install-modal-wrapper .header .close-button:hover, #install-modal-wrapper .header .close-button:focus {
|
|
134
|
-
color: var(--pwa-
|
|
134
|
+
color: var(--pwa-c-text-mute);
|
|
135
135
|
}
|
|
136
136
|
#install-modal-wrapper .header .logo {
|
|
137
137
|
display: flex;
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
#install-modal-wrapper .header h1 {
|
|
140
140
|
margin-top: 0;
|
|
141
141
|
margin-bottom: 7px;
|
|
142
|
-
color: var(--pwa-
|
|
142
|
+
color: var(--pwa-c-text-mute);
|
|
143
143
|
font-size: 34px;
|
|
144
144
|
}
|
|
145
145
|
@media (max-width: 959px) {
|
|
@@ -194,7 +194,7 @@
|
|
|
194
194
|
#install-modal-wrapper .content {
|
|
195
195
|
flex: 1;
|
|
196
196
|
margin: 0 40px;
|
|
197
|
-
color: var(--pwa-
|
|
197
|
+
color: var(--pwa-c-text);
|
|
198
198
|
}
|
|
199
199
|
@media (max-width: 719px) {
|
|
200
200
|
#install-modal-wrapper .content {
|
|
@@ -247,7 +247,7 @@
|
|
|
247
247
|
}
|
|
248
248
|
}
|
|
249
249
|
#install-modal-wrapper .feature-wrapper li {
|
|
250
|
-
color: var(--pwa-
|
|
250
|
+
color: var(--pwa-c-text-mute);
|
|
251
251
|
font-weight: 600;
|
|
252
252
|
font-size: 16px;
|
|
253
253
|
line-height: 29px;
|
|
@@ -332,7 +332,6 @@
|
|
|
332
332
|
min-width: 80px;
|
|
333
333
|
margin: 0.5rem 1rem;
|
|
334
334
|
padding: 0.5rem 1rem;
|
|
335
|
-
border: 2px solid var(--pwa-btn-bg-color);
|
|
336
335
|
border-radius: 20px;
|
|
337
336
|
background: transparent;
|
|
338
337
|
font-weight: 600;
|
|
@@ -340,25 +339,24 @@
|
|
|
340
339
|
cursor: pointer;
|
|
341
340
|
}
|
|
342
341
|
#install-modal-wrapper .install-button {
|
|
343
|
-
background: var(--pwa-
|
|
344
|
-
color: var(--pwa-
|
|
342
|
+
background: var(--pwa-c-accent-bg);
|
|
343
|
+
color: var(--pwa-c-accent-text);
|
|
345
344
|
transition: color 0.3s;
|
|
346
345
|
}
|
|
346
|
+
#install-modal-wrapper .install-button:hover, #install-modal-wrapper .install-button:focus {
|
|
347
|
+
background: var(--pwa-c-accent-hover);
|
|
348
|
+
}
|
|
347
349
|
@media (max-width: 419px) {
|
|
348
350
|
#install-modal-wrapper .install-button span {
|
|
349
351
|
display: none;
|
|
350
352
|
}
|
|
351
353
|
}
|
|
352
|
-
#install-modal-wrapper .install-button:hover, #install-modal-wrapper .install-button:focus {
|
|
353
|
-
background: var(--pwa-btn-hover-bg-color);
|
|
354
|
-
}
|
|
355
354
|
#install-modal-wrapper .cancel-button {
|
|
356
|
-
background:
|
|
357
|
-
color: var(--pwa-
|
|
355
|
+
background: var(--pwa-c-control);
|
|
356
|
+
color: var(--pwa-c-text);
|
|
358
357
|
}
|
|
359
358
|
#install-modal-wrapper .cancel-button:hover, #install-modal-wrapper .cancel-button:focus {
|
|
360
|
-
background: var(--pwa-
|
|
361
|
-
color: var(--pwa-bg-color);
|
|
359
|
+
background: var(--pwa-c-control-hover);
|
|
362
360
|
}
|
|
363
361
|
#install-modal-wrapper .ios-text {
|
|
364
362
|
position: fixed;
|
|
@@ -368,8 +366,8 @@
|
|
|
368
366
|
margin: 2em auto;
|
|
369
367
|
padding: 0.5em 2em;
|
|
370
368
|
border-radius: 8px;
|
|
371
|
-
background: var(--pwa-bg
|
|
372
|
-
box-shadow: 0 2px 12px 0 var(--pwa-shadow
|
|
369
|
+
background: var(--pwa-c-bg);
|
|
370
|
+
box-shadow: 0 2px 12px 0 var(--pwa-c-shadow);
|
|
373
371
|
font-weight: bold;
|
|
374
372
|
font-size: 14px;
|
|
375
373
|
text-align: center;
|
|
@@ -382,7 +380,7 @@
|
|
|
382
380
|
left: calc(50% - 0.8em);
|
|
383
381
|
width: 0;
|
|
384
382
|
height: 0;
|
|
385
|
-
border-top: 1em solid var(--pwa-bg
|
|
383
|
+
border-top: 1em solid var(--pwa-c-bg);
|
|
386
384
|
border-right: 0.8em solid transparent;
|
|
387
385
|
border-left: 0.8em solid transparent;
|
|
388
386
|
transition: border-color 0.3s;
|
|
@@ -396,7 +394,7 @@
|
|
|
396
394
|
border: none;
|
|
397
395
|
border-radius: 1em;
|
|
398
396
|
background: #07c160;
|
|
399
|
-
color: var(--pwa-bg
|
|
397
|
+
color: var(--pwa-c-bg);
|
|
400
398
|
cursor: pointer;
|
|
401
399
|
transition: color 0.3s;
|
|
402
400
|
}
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
padding: 0.5rem 0.75rem;
|
|
30
30
|
border-width: 0;
|
|
31
31
|
border-radius: 0.5rem;
|
|
32
|
-
background: var(--pwa-bg
|
|
33
|
-
color: var(--pwa-
|
|
34
|
-
box-shadow: 0 2px 12px 0 var(--pwa-shadow
|
|
32
|
+
background: var(--pwa-c-bg);
|
|
33
|
+
color: var(--pwa-c-text);
|
|
34
|
+
box-shadow: 0 2px 12px 0 var(--pwa-c-shadow);
|
|
35
35
|
font-size: 1rem;
|
|
36
36
|
line-height: 1.5;
|
|
37
37
|
cursor: pointer;
|
|
@@ -50,17 +50,17 @@
|
|
|
50
50
|
height: 1.5rem;
|
|
51
51
|
margin-inline-start: 0.4rem;
|
|
52
52
|
border-radius: 0.75rem;
|
|
53
|
-
background: var(--pwa-
|
|
53
|
+
background: var(--pwa-c-accent-bg);
|
|
54
54
|
}
|
|
55
55
|
.sw-hint-popup .icon-wrapper:hover,
|
|
56
56
|
.sw-update-popup .icon-wrapper:hover {
|
|
57
|
-
background: var(--pwa-
|
|
57
|
+
background: var(--pwa-c-accent-hover);
|
|
58
58
|
}
|
|
59
59
|
.sw-hint-popup .icon-wrapper svg,
|
|
60
60
|
.sw-update-popup .icon-wrapper svg {
|
|
61
61
|
width: 1.2rem;
|
|
62
62
|
height: 1.2rem;
|
|
63
63
|
margin: 0.15rem;
|
|
64
|
-
color: var(--pwa-
|
|
64
|
+
color: var(--pwa-c-accent-text);
|
|
65
65
|
animation: rotate 3s ease infinite;
|
|
66
66
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--pwa-z-index: 10;
|
|
3
|
-
--pwa-
|
|
4
|
-
--pwa-
|
|
5
|
-
--pwa-
|
|
6
|
-
--pwa-
|
|
7
|
-
--pwa-
|
|
8
|
-
--pwa-
|
|
9
|
-
--pwa-
|
|
10
|
-
--pwa-
|
|
11
|
-
--pwa-
|
|
3
|
+
--pwa-c-bg: var(--vp-c-bg-elv);
|
|
4
|
+
--pwa-c-text: var(--vp-c-text);
|
|
5
|
+
--pwa-c-shadow: var(--vp-c-shadow);
|
|
6
|
+
--pwa-c-accent-bg: var(--vp-c-accent-bg);
|
|
7
|
+
--pwa-c-accent-hover: var(--vp-c-accent-hover);
|
|
8
|
+
--pwa-c-accent-text: var(--vp-c-accent-text);
|
|
9
|
+
--pwa-c-control: var(--vp-c-control);
|
|
10
|
+
--pwa-c-control-hover: var(--vp-c-control-hover);
|
|
11
|
+
--pwa-c-text-mute: var(--vp-c-text-mute);
|
|
12
12
|
}
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
* 强制更新页面内容
|
|
5
5
|
*/
|
|
6
6
|
export const forceUpdate = () => {
|
|
7
|
-
navigator.serviceWorker.getRegistration().then((registration) => {
|
|
7
|
+
void navigator.serviceWorker.getRegistration().then((registration) => {
|
|
8
8
|
// Check whether a valid service worker is active
|
|
9
|
-
if (registration
|
|
10
|
-
registration
|
|
9
|
+
if (registration?.active)
|
|
10
|
+
registration.addEventListener('updatefound', () => {
|
|
11
11
|
// force refresh
|
|
12
12
|
// @ts-expect-error: A non-standard API
|
|
13
13
|
window.location.reload(true);
|
|
@@ -42,7 +42,7 @@ export const generateServiceWorker = async (app, options) => {
|
|
|
42
42
|
globPatterns,
|
|
43
43
|
cleanupOutdatedCaches: true,
|
|
44
44
|
clientsClaim: true,
|
|
45
|
-
maximumFileSizeToCacheInBytes: (options.maxSize
|
|
45
|
+
maximumFileSizeToCacheInBytes: (options.maxSize ?? 2048) * 1024,
|
|
46
46
|
manifestTransforms: [imageFilter(options.maxImageSize)],
|
|
47
47
|
mode: app.env.isDebug ? 'development' : 'production',
|
|
48
48
|
sourcemap: app.env.isDebug,
|
package/lib/node/getManifest.js
CHANGED
|
@@ -11,9 +11,12 @@ export const getManifest = async (app, options) => {
|
|
|
11
11
|
? await fs.readFile(userManifestJSONPath, 'utf8')
|
|
12
12
|
: '{}');
|
|
13
13
|
const manifest = {
|
|
14
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
14
15
|
name: siteData.title || siteData.locales['/']?.title || 'Site',
|
|
16
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
15
17
|
short_name: siteData.title || siteData.locales['/']?.title || 'Site',
|
|
16
18
|
description: siteData.description ||
|
|
19
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
17
20
|
siteData.locales['/']?.description ||
|
|
18
21
|
'A site built with vuepress',
|
|
19
22
|
lang: getRootLang(app),
|
package/lib/node/helper.js
CHANGED
|
@@ -12,7 +12,7 @@ export const appendBaseToManifest = (base, manifest) => {
|
|
|
12
12
|
icons: shortcut.icons?.map((icon) => ({
|
|
13
13
|
...icon,
|
|
14
14
|
src: appendBaseToLink(base, icon.src),
|
|
15
|
-
}))
|
|
15
|
+
})) ?? [],
|
|
16
16
|
url: appendBaseToLink(base, shortcut.url),
|
|
17
17
|
}));
|
|
18
18
|
if (manifest.screenshots)
|
package/lib/node/options.d.ts
CHANGED
|
@@ -143,7 +143,7 @@ export interface PwaPluginOptions {
|
|
|
143
143
|
*
|
|
144
144
|
* @default "available"
|
|
145
145
|
*/
|
|
146
|
-
update?: 'available' | '
|
|
146
|
+
update?: 'available' | 'disable' | 'force' | 'hint';
|
|
147
147
|
/**
|
|
148
148
|
* A custom component to replace the default hint popup component.
|
|
149
149
|
*
|
package/lib/node/pwaPlugin.js
CHANGED
|
@@ -5,7 +5,7 @@ import { getManifest } from './getManifest.js';
|
|
|
5
5
|
import { appendBase } from './helper.js';
|
|
6
6
|
import { injectLinksToHead } from './injectLinksToHead.js';
|
|
7
7
|
import { pwaLocales } from './locales.js';
|
|
8
|
-
import {
|
|
8
|
+
import { PLUGIN_NAME, logger } from './logger.js';
|
|
9
9
|
import { prepareConfigFile } from './prepareConfigFile.js';
|
|
10
10
|
export const pwaPlugin = (options = {}) => (app) => {
|
|
11
11
|
if (app.env.isDebug)
|
|
@@ -28,7 +28,7 @@ export const pwaPlugin = (options = {}) => (app) => {
|
|
|
28
28
|
__SW_FORCE_UPDATE__: options.update === 'force',
|
|
29
29
|
__SW_PATH__: options.serviceWorkerFilename || 'service-worker.js',
|
|
30
30
|
}),
|
|
31
|
-
extendsBundlerOptions: (bundlerOptions
|
|
31
|
+
extendsBundlerOptions: (bundlerOptions) => {
|
|
32
32
|
addViteOptimizeDepsExclude(bundlerOptions, app, [
|
|
33
33
|
'mitt',
|
|
34
34
|
'register-service-worker',
|
|
@@ -43,10 +43,10 @@ export const pwaPlugin = (options = {}) => (app) => {
|
|
|
43
43
|
errMsg: 'Unexpected manifest generation error',
|
|
44
44
|
});
|
|
45
45
|
},
|
|
46
|
-
onGenerated: async (
|
|
46
|
+
onGenerated: async () => {
|
|
47
47
|
await generateManifest(app, options);
|
|
48
48
|
await generateServiceWorker(app, options);
|
|
49
49
|
},
|
|
50
|
-
clientConfigFile: (
|
|
50
|
+
clientConfigFile: () => prepareConfigFile(app, options),
|
|
51
51
|
};
|
|
52
52
|
};
|
package/lib/shared/manifest.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @see https://www.w3.org/TR/mediaqueries-5/#display-mode
|
|
3
3
|
*/
|
|
4
|
-
export type DisplayMode = '
|
|
4
|
+
export type DisplayMode = 'browser' | 'fullscreen' | 'minimal-ui' | 'standalone';
|
|
5
5
|
/**
|
|
6
6
|
* @see https://github.com/w3c/manifest/wiki/Categories
|
|
7
7
|
*/
|
|
@@ -9,7 +9,7 @@ export type ManifestCategory = 'books' | 'business' | 'education' | 'entertainme
|
|
|
9
9
|
/**
|
|
10
10
|
* @see https://www.w3.org/TR/screen-orientation/#dom-orientationlocktype
|
|
11
11
|
*/
|
|
12
|
-
export type OrientationLockType = 'any' | '
|
|
12
|
+
export type OrientationLockType = 'any' | 'landscape-primary' | 'landscape-secondary' | 'landscape' | 'natural' | 'portrait-primary' | 'portrait-secondary' | 'portrait';
|
|
13
13
|
/**
|
|
14
14
|
* @see https://www.w3.org/TR/appmanifest/#manifest-image-resources
|
|
15
15
|
*/
|
|
@@ -28,7 +28,7 @@ export interface ManifestExternalApplicationResource {
|
|
|
28
28
|
/**
|
|
29
29
|
* @see https://github.com/w3c/manifest/wiki/Platforms
|
|
30
30
|
*/
|
|
31
|
-
platform: '
|
|
31
|
+
platform: 'amazon' | 'chrome_web_store' | 'chromeos_play' | 'f-droid' | 'itunes' | 'play' | 'webapp' | 'windows';
|
|
32
32
|
url: string;
|
|
33
33
|
id?: string;
|
|
34
34
|
min_version?: string;
|
|
@@ -74,7 +74,7 @@ export interface AppManifest extends Record<string, unknown> {
|
|
|
74
74
|
*
|
|
75
75
|
* The base direction for the localizable members of the manifest.
|
|
76
76
|
*/
|
|
77
|
-
dir?: '
|
|
77
|
+
dir?: 'auto' | 'ltr' | 'rtl';
|
|
78
78
|
/**
|
|
79
79
|
* @see https://www.w3.org/TR/appmanifest/#lang-member
|
|
80
80
|
*
|
package/lib/shared/manifest.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vuepress/plugin-pwa",
|
|
3
|
-
"version": "2.0.0-rc.
|
|
3
|
+
"version": "2.0.0-rc.43",
|
|
4
4
|
"description": "VuePress plugin - progressive web application",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"vuepress-plugin",
|
|
@@ -36,18 +36,18 @@
|
|
|
36
36
|
"lib"
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@vuepress/helper": "2.0.0-rc.
|
|
40
|
-
"@vueuse/core": "^
|
|
39
|
+
"@vuepress/helper": "2.0.0-rc.43",
|
|
40
|
+
"@vueuse/core": "^11.0.3",
|
|
41
41
|
"mitt": "^3.0.1",
|
|
42
42
|
"register-service-worker": "^1.7.2",
|
|
43
|
-
"vue": "^3.4
|
|
43
|
+
"vue": "^3.5.4",
|
|
44
44
|
"workbox-build": "^7.1.1"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
|
-
"vuepress": "2.0.0-rc.
|
|
47
|
+
"vuepress": "2.0.0-rc.15"
|
|
48
48
|
},
|
|
49
49
|
"publishConfig": {
|
|
50
50
|
"access": "public"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "7c75a58f6aed788e2ee40e2b2f0451a76ec20a23"
|
|
53
53
|
}
|