@vuepress/plugin-pwa 2.0.0-rc.3 → 2.0.0-rc.31

package/lib/client/components/PwaFoundPopup.d.ts

@@ -0,0 +1,21 @@
+import type { PropType, SlotsType, VNode } from 'vue';
+import type { PwaPluginLocaleConfig } from '../../shared/index.js';
+import '../styles/popup.css';
+export declare const PwaFoundPopup: import("vue").DefineComponent<{
+    /** locale data */
+    locales: {
+        type: PropType<PwaPluginLocaleConfig>;
+        required: true;
+    };
+}, () => VNode, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** locale data */
+    locales: {
+        type: PropType<PwaPluginLocaleConfig>;
+        required: true;
+    };
+}>>, {}, SlotsType<{
+    default?: ((props: {
+        found: boolean;
+        refresh: () => void;
+    }) => VNode[] | VNode | null) | undefined;
+}>>;

package/lib/client/components/PwaFoundPopup.js

@@ -0,0 +1,56 @@
+import { useLocaleConfig } from '@vuepress/helper/client';
+import { defineComponent, h, onMounted, ref, Transition } from 'vue';
+import { usePwaEvent } from '../composables/index.js';
+import { UpdateIcon } from './icons.js';
+import '../styles/popup.css';
+export const PwaFoundPopup = defineComponent({
+    name: 'PwaFoundPopup',
+    props: {
+        /** locale data */
+        locales: {
+            type: Object,
+            required: true,
+        },
+    },
+    slots: Object,
+    setup(props, { slots }) {
+        const locale = useLocaleConfig(props.locales);
+        const found = ref(false);
+        const refresh = () => {
+            if (found.value) {
+                // force refresh
+                // @ts-expect-error: A non-standard API
+                window.location.reload(true);
+                found.value = false;
+            }
+        };
+        onMounted(() => {
+            const event = usePwaEvent();
+            event.on('updatefound', () => {
+                navigator.serviceWorker.getRegistration().then((registration) => {
+                    // Check whether a valid service worker is active
+                    if (registration && registration.active)
+                        found.value = true;
+                });
+            });
+            event.on('updated', () => {
+                found.value = false;
+            });
+        });
+        return () => h(Transition, { name: 'popup' }, () => slots.default?.({
+            found: found.value,
+            refresh,
+        }) ||
+            (found.value
+                ? h('button', {
+                    type: 'button',
+                    class: 'sw-hint-popup',
+                    tabindex: 0,
+                    onClick: () => refresh(),
+                }, [
+                    locale.value.hint,
+                    h('span', { class: 'icon-wrapper' }, h(UpdateIcon)),
+                ])
+                : null));
+    },
+});

package/lib/client/components/PwaInstall.d.ts

@@ -0,0 +1,16 @@
+import type { PropType, VNode } from 'vue';
+import type { PwaPluginLocaleConfig } from '../../shared/index.js';
+import '../styles/modal.css';
+export declare const PwaInstall: import("vue").DefineComponent<{
+    /** locale data */
+    locales: {
+        type: PropType<PwaPluginLocaleConfig>;
+        required: true;
+    };
+}, () => VNode, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** locale data */
+    locales: {
+        type: PropType<PwaPluginLocaleConfig>;
+        required: true;
+    };
+}>>, {}, {}>;

package/lib/client/components/PwaInstall.js

@@ -0,0 +1,85 @@
+import { useLocaleConfig } from '@vuepress/helper/client';
+import { useToggle } from '@vueuse/core';
+import { computed, defineComponent, h, onMounted, ref } from 'vue';
+import { PwaInstallModal } from './PwaInstallModal.js';
+import '../styles/modal.css';
+export const PwaInstall = defineComponent({
+    name: 'PwaInstall',
+    props: {
+        /** locale data */
+        locales: {
+            type: Object,
+            required: true,
+        },
+    },
+    setup(props) {
+        const locale = useLocaleConfig(props.locales);
+        const [isOpen, toggleIsOpen] = useToggle(false);
+        const canInstall = ref(false);
+        const hasRelatedApps = ref(false);
+        const isIOS = ref(false);
+        const isSafari = ref(false);
+        const hinted = ref(false);
+        const useHint = computed(() => isIOS.value && isSafari.value && hinted.value === false);
+        const showInstall = computed(() => (hasRelatedApps.value && canInstall.value) || useHint.value);
+        const getInstalledStatus = () => {
+            if (navigator.standalone)
+                return navigator.standalone;
+            return matchMedia('(display-mode: standalone)').matches;
+        };
+        const hint = () => {
+            toggleIsOpen(false);
+            hinted.value = true;
+            // do not notify again
+            localStorage.setItem('iOS-pwa-hint', 'hinted');
+        };
+        onMounted(() => {
+            if (getInstalledStatus()) {
+                const { userAgent } = navigator;
+                // handle iOS specifically
+                isIOS.value =
+                    // regular iPhone
+                    userAgent.includes('iPhone') ||
+                        // regular iPad
+                        userAgent.includes('iPad') ||
+                        // iPad pro
+                        Boolean(userAgent.includes('Macintosh') &&
+                            navigator.maxTouchPoints &&
+                            navigator.maxTouchPoints > 2);
+                isSafari.value =
+                    navigator.userAgent.includes('Safari') &&
+                        !userAgent.includes('Chrome');
+                hinted.value = Boolean(localStorage.getItem('iOS-pwa-hint'));
+            }
+            if ('getInstalledRelatedApps' in navigator)
+                navigator
+                    .getInstalledRelatedApps()
+                    .then((result) => {
+                    hasRelatedApps.value = result.length > 0;
+                });
+        });
+        return () => h('div', { id: 'pwa-install' }, [
+            showInstall.value
+                ? h('button', {
+                    type: 'button',
+                    class: 'modal-button',
+                    onClick: () => {
+                        toggleIsOpen(true);
+                    },
+                }, locale.value.install)
+                : null,
+            h(PwaInstallModal, {
+                style: {
+                    display: isOpen.value ? 'block' : 'none',
+                },
+                locales: props.locales,
+                useHint: useHint.value,
+                onCanInstall: (value) => {
+                    canInstall.value = value;
+                },
+                onHint: () => hint(),
+                onClose: () => toggleIsOpen(false),
+            }),
+        ]);
+    },
+});

package/lib/client/components/PwaInstallModal.d.ts

@@ -0,0 +1,33 @@
+import type { PropType, VNode } from 'vue';
+import type { PwaPluginLocaleConfig } from '../../shared/index.js';
+export declare const PwaInstallModal: import("vue").DefineComponent<{
+    /** locale data */
+    locales: {
+        type: PropType<PwaPluginLocaleConfig>;
+        required: true;
+    };
+    /**
+     * Whether use hint message instead of showing a button
+     *
+     * 是否使用提示
+     */
+    useHint: BooleanConstructor;
+}, () => VNode, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "canInstall" | "hint")[], "close" | "canInstall" | "hint", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** locale data */
+    locales: {
+        type: PropType<PwaPluginLocaleConfig>;
+        required: true;
+    };
+    /**
+     * Whether use hint message instead of showing a button
+     *
+     * 是否使用提示
+     */
+    useHint: BooleanConstructor;
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+    onCanInstall?: ((...args: any[]) => any) | undefined;
+    onHint?: ((...args: any[]) => any) | undefined;
+}, {
+    useHint: boolean;
+}, {}>;

package/lib/client/components/PwaInstallModal.js

@@ -0,0 +1,169 @@
+import { useLocaleConfig } from '@vuepress/helper/client';
+import { useEventListener } from '@vueuse/core';
+import { defineComponent, h, onMounted, shallowRef } from 'vue';
+import { withBase } from 'vuepress/client';
+import { ArrowLeftIcon, ArrowRightIcon, CloseIcon } from './icons.js';
+export const PwaInstallModal = defineComponent({
+    name: 'PwaInstallModal',
+    props: {
+        /** locale data */
+        locales: {
+            type: Object,
+            required: true,
+        },
+        /**
+         * Whether use hint message instead of showing a button
+         *
+         * 是否使用提示
+         */
+        useHint: Boolean,
+    },
+    emits: ['canInstall', 'hint', 'close'],
+    setup(props, { emit }) {
+        const locale = useLocaleConfig(props.locales);
+        const manifest = shallowRef({});
+        const deferredPrompt = shallowRef();
+        const getManifest = async () => {
+            const manifestContent = localStorage.getItem('manifest');
+            if (manifestContent)
+                manifest.value = JSON.parse(manifestContent);
+            else
+                try {
+                    const response = await fetch(withBase('manifest.webmanifest'));
+                    const data = (await response.json());
+                    manifest.value = data;
+                    localStorage.setItem('manifest', JSON.stringify(data));
+                }
+                catch (err) {
+                    console.error('[PWA]: Error getting manifest, check that you have a valid web manifest or network connection');
+                }
+        };
+        const scrollToLeft = () => {
+            const screenshotsDiv = document.querySelector('.screenshot');
+            if (screenshotsDiv)
+                screenshotsDiv.scrollBy({
+                    left: -screenshotsDiv.clientWidth,
+                    top: 0,
+                    behavior: 'smooth',
+                });
+        };
+        const scrollToRight = () => {
+            const screenshotsDiv = document.querySelector('.screenshot');
+            if (screenshotsDiv)
+                screenshotsDiv.scrollBy({
+                    left: screenshotsDiv.clientWidth,
+                    top: 0,
+                    behavior: 'smooth',
+                });
+        };
+        const install = async () => {
+            if (deferredPrompt.value) {
+                deferredPrompt.value.prompt();
+                document.dispatchEvent(new CustomEvent('show'));
+                const choiceResult = await deferredPrompt.value.userChoice;
+                if (choiceResult.outcome === 'accepted') {
+                    console.info('PWA has been installed');
+                    emit('close', false);
+                    emit('canInstall', false);
+                }
+                else {
+                    console.info('You choose to not install PWA');
+                    emit('close', false);
+                    emit('canInstall', false);
+                }
+            }
+        };
+        const hint = () => {
+            console.info('You accepted the install hint');
+            emit('hint');
+        };
+        onMounted(() => {
+            // eslint-disable-next-line no-prototype-builtins
+            if (window.hasOwnProperty('BeforeInstallPromptEvent')) {
+                useEventListener(window, 'beforeinstallprompt', (event) => {
+                    deferredPrompt.value = event;
+                    emit('canInstall', true);
+                    event.preventDefault();
+                });
+                useEventListener('keyup', (event) => {
+                    if (event.key === 'Escape')
+                        emit('close', false);
+                });
+                getManifest();
+            }
+        });
+        return () => h('div', { id: 'install-modal-wrapper' }, [
+            h('div', { class: 'background', onClick: () => emit('close', false) }),
+            h('div', { class: 'install-modal' }, [
+                h('div', { class: 'header' }, [
+                    // close button
+                    h('button', {
+                        'type': 'button',
+                        'class': 'close-button',
+                        'aria-label': locale.value.close,
+                        'onClick': () => emit('close', false),
+                    }, h(CloseIcon)),
+                    h('div', { class: 'logo' }, [
+                        manifest.value.icons
+                            ? h('img', {
+                                src: manifest.value.icons[0]?.src,
+                                alt: 'App Logo',
+                            })
+                            : null,
+                        h('div', { class: 'title' }, [
+                            h('h1', manifest.value.short_name || manifest.value.name),
+                            h('p', { class: 'desc' }, locale.value.explain),
+                        ]),
+                    ]),
+                ]),
+                h('div', { class: 'content' }, [
+                    h('div', { class: 'highlight' }, [
+                        manifest.value.features
+                            ? h('div', { class: 'feature-wrapper' }, [
+                                h('h3', locale.value.feature),
+                                h('ul', manifest.value.features.map((feature) => h('li', feature))),
+                            ])
+                            : null,
+                        manifest.value.screenshots
+                            ? h('div', { class: 'screenshot-wrapper' }, [
+                                h('button', {
+                                    'type': 'button',
+                                    'aria-label': locale.value.prevImage,
+                                    'onClick': scrollToLeft,
+                                }, h(ArrowLeftIcon)),
+                                h('section', { class: 'screenshot' }, [
+                                    manifest.value.screenshots.map((screenshot) => h('div', h('img', {
+                                        src: screenshot.src,
+                                        alt: 'App Screenshot',
+                                    }))),
+                                ]),
+                                h('button', {
+                                    'type': 'button',
+                                    'aria-label': locale.value.nextImage,
+                                    'onClick': scrollToRight,
+                                }, h(ArrowRightIcon)),
+                            ])
+                            : null,
+                    ]),
+                    h('div', { class: 'description' }, [
+                        h('h3', locale.value.desc),
+                        h('p', manifest.value.description),
+                    ]),
+                ]),
+                props.useHint
+                    ? h('div', { class: 'ios-text', onClick: hint }, [
+                        h('p', locale.value.iOSInstall),
+                        h('button', { type: 'button', class: 'success' }, 'Got it!'),
+                    ])
+                    : h('div', { class: 'button-wrapper' }, [
+                        h('button', { type: 'button', class: 'install-button', onClick: install }, [locale.value.install, h('span', manifest.value.short_name)]),
+                        h('button', {
+                            type: 'button',
+                            class: 'cancel-button',
+                            onClick: () => emit('close', false),
+                        }, locale.value.cancel),
+                    ]),
+            ]),
+        ]);
+    },
+});

package/lib/client/components/PwaReadyPopup.d.ts

@@ -0,0 +1,21 @@
+import type { PropType, SlotsType, VNode } from 'vue';
+import type { PwaPluginLocaleConfig } from '../../shared/index.js';
+import '../styles/popup.css';
+export declare const PwaReadyPopup: import("vue").DefineComponent<{
+    /** locale data */
+    locales: {
+        type: PropType<PwaPluginLocaleConfig>;
+        required: true;
+    };
+}, () => VNode, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** locale data */
+    locales: {
+        type: PropType<PwaPluginLocaleConfig>;
+        required: true;
+    };
+}>>, {}, SlotsType<{
+    default?: ((props: {
+        isReady: boolean;
+        reload: () => void;
+    }) => VNode[] | VNode | null) | undefined;
+}>>;

package/lib/client/components/PwaReadyPopup.js

@@ -0,0 +1,50 @@
+import { useLocaleConfig } from '@vuepress/helper/client';
+import { computed, defineComponent, h, onMounted, shallowRef, Transition, } from 'vue';
+import { usePwaEvent } from '../composables/index.js';
+import { skipWaiting } from '../utils/index.js';
+import { UpdateIcon } from './icons.js';
+import '../styles/popup.css';
+export const PwaReadyPopup = defineComponent({
+    name: 'PwaReadyPopup',
+    props: {
+        /** locale data */
+        locales: {
+            type: Object,
+            required: true,
+        },
+    },
+    slots: Object,
+    setup(props, { slots }) {
+        const locale = useLocaleConfig(props.locales);
+        const registration = shallowRef();
+        const isReady = computed(() => Boolean(registration.value));
+        const reload = () => {
+            if (registration.value) {
+                skipWaiting(registration.value);
+                registration.value = undefined;
+            }
+        };
+        onMounted(() => {
+            const event = usePwaEvent();
+            event.on('updated', (reg) => {
+                if (reg)
+                    registration.value = reg;
+            });
+        });
+        return () => h(Transition, { name: 'popup' }, () => slots.default?.({
+            isReady: isReady.value,
+            reload,
+        }) ||
+            (isReady.value
+                ? h('button', {
+                    type: 'button',
+                    class: 'sw-update-popup',
+                    tabindex: 0,
+                    onClick: () => reload(),
+                }, [
+                    locale.value.update,
+                    h('span', { class: 'icon-wrapper' }, h(UpdateIcon)),
+                ])
+                : null));
+    },
+});

package/lib/client/components/icons.d.ts

@@ -0,0 +1,9 @@
+import type { FunctionalComponent } from 'vue';
+export interface SVGWrapperProps {
+    name?: string;
+    color?: string;
+}
+export declare const ArrowLeftIcon: FunctionalComponent;
+export declare const ArrowRightIcon: FunctionalComponent;
+export declare const CloseIcon: FunctionalComponent;
+export declare const UpdateIcon: FunctionalComponent;

package/lib/client/components/icons.js

@@ -0,0 +1,25 @@
+import { h } from 'vue';
+const SVGWrapper = ({ name = '', color = 'currentColor' }, { slots }) => h('svg', {
+    'xmlns': 'http://www.w3.org/2000/svg',
+    'class': ['icon', `${name}-icon`],
+    'viewBox': '0 0 1024 1024',
+    'fill': color,
+    'aria-label': `${name} icon`,
+}, slots.default?.());
+SVGWrapper.displayName = 'SVGWrapper';
+export const ArrowLeftIcon = () => h(SVGWrapper, { name: 'arrow-left' }, () => h('path', {
+    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',
+}));
+ArrowLeftIcon.displayName = 'ArrowLeftIcon';
+export const ArrowRightIcon = () => h(SVGWrapper, { name: 'arrow-right' }, () => h('path', {
+    d: 'M569.8 825.2l276.2-268c12-11.6 18-27.4 18-44.8v-0.8c0-17.4-6-33.2-18-44.8l-276.2-268c-24-25-62.6-25-86.4 0-23.8 25-23.8 65.4 0 90.4l166 158.8h-428c-34 0-61.4 28.6-61.4 64 0 36 27.4 64 61.2 64h428l-166 158.8c-23.8 25-23.8 65.4 0 90.4 24 25 62.6 25 86.6 0z',
+}));
+ArrowRightIcon.displayName = 'ArrowRightIcon';
+export const CloseIcon = () => h(SVGWrapper, { name: 'close' }, () => h('path', {
+    d: 'M589.654 511.965 1007.212 84.22a49.777 49.777 0 0 0-.73-70.02 49.046 49.046 0 0 0-69.687.665L519.967 441.946 85.882 14.2a49.08 49.08 0 0 0-69.687.664 49.777 49.777 0 0 0 .664 70.019l433.454 427.082L16.859 939.048a49.777 49.777 0 0 0-.664 70.019 49.013 49.013 0 0 0 69.687.663l434.085-427.746 416.828 427.083A49.013 49.013 0 0 0 972.037 1024a48.416 48.416 0 0 0 34.512-14.27 49.777 49.777 0 0 0 .73-70.019z',
+}));
+CloseIcon.displayName = 'CloseIcon';
+export const UpdateIcon = () => h(SVGWrapper, { name: 'update' }, () => h('path', {
+    d: 'M949.949 146.25v255.826c0 21.981-13.989 35.97-35.97 35.97H658.154c-13.988 0-25.983-7.992-33.973-21.981-5.997-13.989-4-27.977 7.991-39.97l79.942-77.946c-55.954-51.973-121.918-77.955-199.863-77.955-37.975 0-75.95 8.002-113.924 21.99-37.975 15.985-67.948 37.976-91.934 63.957-25.982 23.987-47.973 53.96-63.957 91.934-29.983 73.955-29.983 153.895 0 227.85 15.984 37.976 37.975 67.947 63.957 91.934 23.986 25.982 53.959 47.973 91.934 63.956 37.974 13.989 75.95 21.991 113.924 21.991 45.967 0 87.942-9.998 127.913-29.982 41.976-17.99 75.951-45.967 101.931-83.943 7.993-4 11.994-5.995 13.989-5.995 5.997 0 9.998 1.994 13.988 5.995l77.958 77.946c3.989 4 5.986 7.993 5.986 11.994 0 1.994-1.996 5.995-3.99 11.994-43.973 51.962-93.941 91.934-151.9 117.914-53.958 25.983-115.92 39.972-185.874 39.972-61.961 0-119.921-11.984-169.89-33.973-57.96-25.985-105.923-57.963-139.896-93.943-35.98-33.972-67.958-81.936-93.94-139.897-45.967-101.93-45.967-237.846 0-339.777 25.982-57.96 57.96-105.923 93.94-139.896 33.973-35.98 81.936-67.958 139.896-93.94 49.968-21.99 107.928-33.974 169.89-33.974 55.963 0 109.923 9.988 161.885 29.973 53.97 21.99 101.933 51.963 139.908 89.938l73.954-73.944c9.987-9.998 23.987-13.988 39.971-8.002 13.988 8.002 21.98 19.995 21.98 33.984z',
+}));
+UpdateIcon.displayName = 'UpdateIcon';

package/lib/client/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './PwaInstall.js';
+export * from './PwaFoundPopup.js';
+export * from './PwaReadyPopup.js';

package/lib/client/components/index.js

@@ -0,0 +1,3 @@
+export * from './PwaInstall.js';
+export * from './PwaFoundPopup.js';
+export * from './PwaReadyPopup.js';

package/lib/client/composables/index.d.ts

@@ -1,2 +1,4 @@
+export * from './setupPwa.js';
+export * from './setupViewPoint.js';
 export * from './usePwaEvent.js';
-export * from './useSkipWaiting.js';
+export * from './useRegisterSW.js';

package/lib/client/composables/index.js

@@ -1,2 +1,4 @@
+export * from './setupPwa.js';
+export * from './setupViewPoint.js';
 export * from './usePwaEvent.js';
-export * from './useSkipWaiting.js';
+export * from './useRegisterSW.js';

package/lib/client/composables/setupPwa.d.ts

@@ -0,0 +1 @@
+export declare const setupPwa: (serviceWorkerPath: string, shouldForceUpdate?: boolean) => void;

package/lib/client/composables/setupPwa.js

@@ -0,0 +1,28 @@
+import mitt from 'mitt';
+import { onMounted, provide } from 'vue';
+import { forceUpdate } from '../utils/index.js';
+import { pwaEventSymbol } from './usePwaEvent.js';
+import { useRegisterSW } from './useRegisterSW.js';
+export const setupPwa = (serviceWorkerPath, shouldForceUpdate = false) => {
+    if (__VUEPRESS_SSR__)
+        return;
+    // Create event emitter and provide it
+    const event = mitt();
+    provide(pwaEventSymbol, event);
+    onMounted(async () => {
+        if (__VUEPRESS_DEV__)
+            return;
+        let refreshing = false;
+        // Only listen controllerchange event when a serviceWorker is active
+        if (navigator.serviceWorker?.controller)
+            navigator.serviceWorker.addEventListener('controllerchange', () => {
+                if (refreshing)
+                    return;
+                refreshing = true;
+                window.location.reload();
+            });
+        if (shouldForceUpdate)
+            forceUpdate();
+        await useRegisterSW(serviceWorkerPath, event);
+    });
+};

package/lib/client/composables/setupViewPoint.d.ts

@@ -0,0 +1 @@
+export declare const setupViewPoint: () => void;

package/lib/client/composables/setupViewPoint.js

@@ -0,0 +1,18 @@
+import { onMounted } from 'vue';
+export const setupViewPoint = () => {
+    onMounted(() => {
+        const isStandAlone = window.matchMedia('(display-mode: standalone)').matches;
+        if (isStandAlone) {
+            const head = document.head.querySelector('meta[name="viewport"]');
+            if (head) {
+                head.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover');
+                return;
+            }
+            const viewportMeta = document.createElement('meta');
+            viewportMeta.name = 'viewport';
+            viewportMeta.content =
+                'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover';
+            document.head.appendChild(viewportMeta);
+        }
+    });
+};

package/lib/client/composables/usePwaEvent.js

@@ -1,9 +1,8 @@
 import { inject } from 'vue';
-export const pwaEventSymbol = Symbol('pwaEvent');
+export const pwaEventSymbol = Symbol(__VUEPRESS_DEV__ ? 'PwaEvent' : '');
 export const usePwaEvent = () => {
     const pwaEvent = inject(pwaEventSymbol);
-    if (!pwaEvent) {
+    if (!pwaEvent)
         throw new Error('usePwaEvent() is called without provider.');
-    }
     return pwaEvent;
 };

package/lib/client/composables/useRegisterSW.d.ts

@@ -0,0 +1,2 @@
+import type { PwaEvent } from './usePwaEvent.js';
+export declare const useRegisterSW: (serviceWorkerPath: string, event: PwaEvent) => Promise<void>;

package/lib/client/composables/useRegisterSW.js

@@ -0,0 +1,29 @@
+import { withBase } from 'vuepress/client';
+import { registerSW } from '../utils/index.js';
+export const useRegisterSW = async (serviceWorkerPath, event) => registerSW(withBase(serviceWorkerPath), {
+    ready(registration) {
+        event.emit('ready', registration);
+    },
+    registered(registration) {
+        event.emit('registered', registration);
+    },
+    cached(registration) {
+        event.emit('cached', registration);
+    },
+    updatefound(registration) {
+        event.emit('updatefound', registration);
+    },
+    updated(registration) {
+        const key = 'service-worker-version';
+        const version = Number(localStorage.getItem(key) || 0);
+        localStorage.setItem(key, (version + 1).toString());
+        localStorage.removeItem('manifest');
+        event.emit('updated', registration);
+    },
+    offline() {
+        event.emit('offline');
+    },
+    error(err) {
+        event.emit('error', err);
+    },
+});

package/lib/client/index.d.ts

@@ -1 +1,3 @@
+export * from './components/index.js';
 export * from './composables/index.js';
+export * from './utils/index.js';

package/lib/client/index.js

@@ -1 +1,3 @@
+export * from './components/index.js';
 export * from './composables/index.js';
+export * from './utils/index.js';