@vuepress/plugin-pwa 2.0.0-beta.50-pre → 2.0.0-beta.51

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

@@ -0,0 +1,2 @@
+export * from './usePwaEvent.js';
+export * from './useSkipWaiting.js';

package/lib/client/composables/index.js

@@ -0,0 +1,2 @@
+export * from './usePwaEvent.js';
+export * from './useSkipWaiting.js';

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

@@ -0,0 +1,21 @@
+import type { Emitter } from 'mitt';
+import type { InjectionKey } from 'vue';
+export declare type PwaEvent = Emitter<{
+    ready: ServiceWorkerRegistration;
+    registered: ServiceWorkerRegistration;
+    cached: ServiceWorkerRegistration;
+    updatefound: ServiceWorkerRegistration;
+    updated: ServiceWorkerRegistration;
+    offline: void;
+    error: Error;
+}>;
+export declare const pwaEventSymbol: InjectionKey<PwaEvent>;
+export declare const usePwaEvent: () => Emitter<{
+    ready: ServiceWorkerRegistration;
+    registered: ServiceWorkerRegistration;
+    cached: ServiceWorkerRegistration;
+    updatefound: ServiceWorkerRegistration;
+    updated: ServiceWorkerRegistration;
+    offline: void;
+    error: Error;
+}>;

package/lib/client/composables/usePwaEvent.js

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

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

@@ -0,0 +1,4 @@
+/**
+ * Call `skipWaiting()` inside current waiting worker
+ */
+export declare const useSkipWaiting: (registration: ServiceWorkerRegistration) => void;

package/lib/client/composables/useSkipWaiting.js

@@ -0,0 +1,13 @@
+/**
+ * Call `skipWaiting()` inside current waiting worker
+ */
+export const useSkipWaiting = (registration) => {
+    // get the waiting worker
+    const worker = registration.waiting;
+    // if there is no waiting worker, return directly
+    if (!worker)
+        return;
+    // post SKIP_WAITING message to the waiting worker
+    const channel = new MessageChannel();
+    worker.postMessage({ type: 'SKIP_WAITING' }, [channel.port2]);
+};

package/lib/client/config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@vuepress/client").ClientConfig;
+export default _default;

package/lib/client/config.js

@@ -0,0 +1,50 @@
+import { defineClientConfig, withBase } from '@vuepress/client';
+import mitt from 'mitt';
+import { onMounted, provide } from 'vue';
+import { pwaEventSymbol } from './composables/index.js';
+const swFilename = __PWA_SW_FILENAME__;
+export default defineClientConfig({
+    setup() {
+        if (__VUEPRESS_SSR__ || !swFilename)
+            return;
+        const log = (...args) => console.log('[@vuepress/plugin-pwa]', ...args);
+        // create event emitter and provide it
+        const event = mitt();
+        provide(pwaEventSymbol, event);
+        onMounted(async () => {
+            // lazy load register-service-worker
+            const { register } = await import('register-service-worker');
+            // Register service worker
+            register(withBase(swFilename), {
+                ready(registration) {
+                    log('Service worker is active.');
+                    event.emit('ready', registration);
+                },
+                registered(registration) {
+                    log('Service worker has been registered.');
+                    event.emit('registered', registration);
+                },
+                cached(registration) {
+                    log('Content has been cached for offline use.');
+                    event.emit('cached', registration);
+                },
+                updatefound(registration) {
+                    log('New content is downloading.');
+                    event.emit('updatefound', registration);
+                },
+                updated(registration) {
+                    log('New content is available, please refresh.');
+                    event.emit('updated', registration);
+                },
+                offline() {
+                    log('No internet connection found. App is running in offline mode.');
+                    event.emit('offline');
+                },
+                error(err) {
+                    log('Error during service worker registration:', err);
+                    event.emit('error', err);
+                },
+            });
+        });
+    },
+});

package/lib/client/index.d.ts

@@ -0,0 +1 @@
+export * from './composables/index.js';

package/lib/client/index.js

@@ -0,0 +1 @@
+export * from './composables/index.js';

package/lib/node/generateServiceWorker.d.ts

@@ -0,0 +1,4 @@
+import type { App } from '@vuepress/core';
+import type { GenerateSWOptions } from 'workbox-build';
+export declare type GenerateSWConfig = Omit<GenerateSWOptions, 'swDest' | 'globDirectory'>;
+export declare const generateServiceWorker: (app: App, serviceWorkerFilename: string, generateSWConfig: GenerateSWConfig) => Promise<void>;

package/lib/node/generateServiceWorker.js

@@ -0,0 +1,36 @@
+import { logger } from '@vuepress/utils';
+const assetsExtensions = [
+    // basic
+    'html',
+    'js',
+    'css',
+    // images
+    'png',
+    'jpg',
+    'jpeg',
+    'gif',
+    'svg',
+    // fonts
+    'woff',
+    'woff2',
+    'eot',
+    'tff',
+    'otf',
+];
+export const generateServiceWorker = async (app, serviceWorkerFilename, generateSWConfig) => {
+    // lazy-load workbox-build
+    const { generateSW } = await import('workbox-build');
+    const globDirectory = app.dir.dest();
+    const swDest = app.dir.dest(serviceWorkerFilename);
+    const { warnings } = await generateSW({
+        dontCacheBustURLsMatching: new RegExp(`\\.[0-9a-f]{8}\\.(${assetsExtensions.join('|')})$`),
+        globPatterns: [`**/*.{${assetsExtensions.join(',')}}`],
+        mode: app.env.isDebug ? 'development' : 'production',
+        sourcemap: app.env.isDebug,
+        ...generateSWConfig,
+        // should not be override by user config
+        globDirectory,
+        swDest,
+    });
+    warnings.forEach((warning) => logger.warn('[@vuepress/plugin-pwa]', warning));
+};

package/lib/node/index.d.ts

@@ -0,0 +1,4 @@
+import { pwaPlugin } from './pwaPlugin.js';
+export * from './generateServiceWorker.js';
+export * from './pwaPlugin.js';
+export default pwaPlugin;

package/lib/node/index.js

@@ -0,0 +1,4 @@
+import { pwaPlugin } from './pwaPlugin.js';
+export * from './generateServiceWorker.js';
+export * from './pwaPlugin.js';
+export default pwaPlugin;

package/lib/node/pwaPlugin.d.ts

@@ -0,0 +1,17 @@
+import type { Plugin } from '@vuepress/core';
+import type { GenerateSWConfig } from './generateServiceWorker.js';
+/**
+ * Options for @vuepress/plugin-pwa
+ */
+export interface PwaPluginOptions extends GenerateSWConfig {
+    /**
+     * Filename of the generated service worker file
+     *
+     * If you put it into a sub directory, the `scope` of service worker
+     * might be affected
+     *
+     * @default 'service-worker.js'
+     */
+    serviceWorkerFilename?: string;
+}
+export declare const pwaPlugin: ({ serviceWorkerFilename, ...generateSWConfig }?: PwaPluginOptions) => Plugin;

package/lib/node/pwaPlugin.js

@@ -0,0 +1,23 @@
+import { getDirname, path, withSpinner } from '@vuepress/utils';
+import { generateServiceWorker } from './generateServiceWorker.js';
+const __dirname = getDirname(import.meta.url);
+export const pwaPlugin = ({ serviceWorkerFilename = 'service-worker.js', ...generateSWConfig } = {}) => (app) => {
+    const plugin = {
+        name: '@vuepress/plugin-pwa',
+    };
+    if (app.env.isDev) {
+        return plugin;
+    }
+    return {
+        ...plugin,
+        clientConfigFile: path.resolve(__dirname, '../client/config.js'),
+        alias: {
+            // workaround for https://github.com/vitejs/vite/issues/7621
+            '@vuepress/plugin-pwa/client': path.resolve(__dirname, '../client/index.js'),
+        },
+        define: {
+            __PWA_SW_FILENAME__: serviceWorkerFilename,
+        },
+        onGenerated: (app) => withSpinner('Generating service worker')(() => generateServiceWorker(app, serviceWorkerFilename, generateSWConfig)),
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/plugin-pwa",
-  "version": "2.0.0-beta.50-pre",
+  "version": "2.0.0-beta.51",
   "description": "VuePress plugin - progressive web application",
   "keywords": [
     "vuepress-plugin",
@@ -27,12 +27,12 @@
   "main": "./lib/node/index.js",
   "types": "./lib/node/index.d.ts",
   "files": [
-    "./lib"
+    "lib"
   ],
   "dependencies": {
-    "@vuepress/client": "2.0.0-beta.50-pre",
-    "@vuepress/core": "2.0.0-beta.50-pre",
-    "@vuepress/utils": "2.0.0-beta.50-pre",
+    "@vuepress/client": "2.0.0-beta.51",
+    "@vuepress/core": "2.0.0-beta.51",
+    "@vuepress/utils": "2.0.0-beta.51",
     "mitt": "^3.0.0",
     "register-service-worker": "^1.7.2",
     "vue": "^3.2.37",