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

package/lib/node/options.d.ts

@@ -0,0 +1,183 @@
+import type { LocaleConfig } from 'vuepress/shared';
+import type { GenerateSWOptions } from 'workbox-build';
+import type { AppManifest, PwaPluginLocaleData } from '../shared/index.js';
+interface ApplePwaOptions {
+    /**
+     * Path of icon used on apple devices
+     *
+     * Recommend 152×152 size
+     *
+     * 苹果上使用的图标路径
+     *
+     * 推荐 152×152 大小
+     */
+    icon?: string;
+    /**
+     * Color of status bar
+     *
+     * 状态栏的颜色
+     *
+     * @default "black"
+     */
+    statusBarColor?: 'black' | 'white';
+    /**
+     * Safari mask icon
+     *
+     * Safari 图标
+     */
+    maskIcon?: string;
+}
+interface MicrosoftPwaOptions {
+    /**
+     * Microsoft tile image
+     *
+     * 144×144 transparent recommended
+     *
+     * 微软磁贴图片
+     *
+     * 推荐 144×144，透明
+     */
+    image?: string;
+    /**
+     * Tile color
+     *
+     * 磁贴颜色
+     */
+    color?: string;
+}
+export interface PwaPluginOptions {
+    /**
+     * Service Worker file path
+     *
+     * Service Worker 文件路径
+     *
+     * @default "service-worker.js"
+     */
+    serviceWorkerFilename?: string;
+    /**
+     * Whether display install button
+     *
+     * 是否显示安装按钮
+     *
+     * @default true
+     */
+    showInstall?: boolean;
+    /**
+     * Manifest file Config
+     *
+     * manifest 文件设置
+     */
+    manifest?: AppManifest;
+    /**
+     * Path of favicon
+     *
+     * favicon 地址
+     */
+    favicon?: string;
+    /**
+     * Theme Color
+     *
+     * 主题色
+     *
+     * @default "#46bd87"
+     */
+    themeColor?: string;
+    /**
+     * Max size which allows to cache, with KB unit
+     *
+     * 允许缓存的最大大小，单位 KB
+     *
+     * @default 2048
+     */
+    maxSize?: number;
+    /**
+     * Whether cache html files besides home page and 404
+     *
+     * 是否缓存除主页与 404 之外的 HTML
+     *
+     * @default false
+     */
+    cacheHTML?: boolean;
+    /**
+     * Whether cache pictures
+     *
+     * 是否缓存站点图片
+     *
+     * @default false
+     */
+    cacheImage?: boolean;
+    /**
+     * Max size which allows to cache, with KB unit
+     *
+     * 图片允许缓存的最大大小，单位 KB
+     *
+     * @default 1024
+     */
+    maxImageSize?: number;
+    /**
+     * Settings for apple
+     *
+     * 苹果设置
+     */
+    apple?: ApplePwaOptions | false;
+    /**
+     * Settings for Microsoft
+     *
+     * 微软设置
+     */
+    msTile?: MicrosoftPwaOptions | false;
+    /**
+     * Update logic
+     *
+     * - `"disabled"`: Do nothing even when new service worker is available. After new service work succeeds installing and starts waiting, it will control page and provide new content in next visit.
+     * - `"available"`: Only display update popup when the new service worker is available
+     * - `"hint"`: Display a hint to let user choose to refresh immediately. This is helpful when you want users to see new docs immediately.
+     * - `"force"`: unregister current service worker immediately then refresh to get new content. **This may affect visiting experiences**！
+     *
+     * 更新逻辑
+     *
+     * - `"disabled"`: 即使有新的 service worker 也不做任何事情，新的 service work 开始等待后，会在用户下次访问时接管页面，让用户获得新内容。
+     * - `"available"`: 仅当新的 service worker 可用时才显示更新弹出窗口
+     * - `"hint"`: 显示更新内容可用提示，并允许用户立即刷新。当新的 SW 成功注册后，将转为更新内容就绪弹窗。当你希望用户立即查看新文档时，这很有帮助。
+     * - `"force"`: 立即注销当前 Service Worker 然后刷新以获取新内容。**这可能会影响访问体验**!
+     *
+     * @default "available"
+     */
+    update?: 'available' | 'hint' | 'force' | 'disable';
+    /**
+     * A custom component to replace the default hint popup component.
+     *
+     * 用于替换默认提示弹出组件的自定义组件。
+     *
+     * @default "PwaFoundPopup"
+     */
+    foundComponent?: string;
+    /**
+     * A custom component to replace the default update popup component.
+     *
+     * 用于替换默认更新弹出组件的自定义组件。
+     *
+     * @default "PwaReadyPopup"
+     */
+    readyComponent?: string;
+    /**
+     * workbox-build’s [generateSW config](https://developers.google.com/web/tools/workbox/modules/workbox-build#full_generatesw_config)
+     *
+     */
+    generateSWConfig?: Partial<GenerateSWOptions>;
+    /**
+     * Locales config
+     *
+     * 国际化配置
+     */
+    locales?: LocaleConfig<PwaPluginLocaleData>;
+    /**
+     * Whether append base to all absolute links in options
+     *
+     * 是否为选项中所有绝对链接添加 base
+     *
+     * @default false
+     */
+    appendBase?: boolean;
+}
+export {};

package/lib/node/options.js

@@ -0,0 +1 @@
+export {};

package/lib/node/prepareConfigFile.d.ts

@@ -0,0 +1,3 @@
+import type { App } from 'vuepress/core';
+import type { PwaPluginOptions } from './options.js';
+export declare const prepareConfigFile: (app: App, options: PwaPluginOptions) => Promise<string>;

package/lib/node/prepareConfigFile.js

@@ -0,0 +1,48 @@
+import { getDirname, path } from 'vuepress/utils';
+const __dirname = getDirname(import.meta.url);
+export const prepareConfigFile = (app, options) => {
+    let configImport = '';
+    const rootComponents = [];
+    if (options.showInstall) {
+        configImport += `\
+import { PwaInstall as _PwaInstall } from "${path.join(__dirname, '../client/components/PwaInstall.js')}";
+`;
+        rootComponents.push('PwaInstall');
+    }
+    if (options.update === 'hint') {
+        configImport += `\
+import { PwaFoundPopup as _PwaFoundPopup } from "${options.foundComponent ||
+            path.join(__dirname, '../client/components/PwaFoundPopup.js')}";
+`;
+        rootComponents.push('PwaFoundPopup');
+    }
+    else if (options.update !== 'disable' && options.update !== 'force') {
+        configImport += `\
+import { PwaReadyPopup as _PwaReadyPopup } from "${options.readyComponent ||
+            path.join(__dirname, '../client/components/PwaReadyPopup.js')}";
+`;
+        rootComponents.push('PwaReadyPopup');
+    }
+    return app.writeTemp(`pwa/config.js`, `\
+import { h }  from "vue";
+import { defineClientConfig } from "vuepress/client";
+import { setupPwa } from "${path.join(__dirname, '../client/composables/setupPwa.js')}";
+import { setupViewPoint } from "${path.join(__dirname, '../client/composables/setupViewPoint.js')}";
+${configImport}
+import "${path.join(__dirname, '../client/styles/vars.css')}";
+
+const locales = __PWA_LOCALES__;
+
+${rootComponents.map((item) => `const ${item} = () => h(_${item}, { locales })`).join('\n')}
+
+export default defineClientConfig({
+  setup: () => {
+    setupPwa(__SW_PATH__, __SW_FORCE_UPDATE__);
+    setupViewPoint();
+  },
+  rootComponents: [
+${rootComponents.map((item) => `    ${item},`).join('\n')}
+  ],
+});
+`);
+};

package/lib/node/pwaPlugin.d.ts

@@ -1,17 +1,3 @@
-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;
+import type { PluginFunction } from 'vuepress/core';
+import type { PwaPluginOptions } from './options.js';
+export declare const pwaPlugin: (options?: PwaPluginOptions) => PluginFunction;

package/lib/node/pwaPlugin.js

@@ -1,19 +1,52 @@
-import { getDirname, path, withSpinner } from 'vuepress/utils';
+import { addViteOptimizeDepsExclude, addViteSsrNoExternal, customizeDevServer, getLocaleConfig, } from '@vuepress/helper';
+import { generateManifest } from './generateManifest.js';
 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;
-    }
+import { getManifest } from './getManifest.js';
+import { appendBase } from './helper.js';
+import { injectLinksToHead } from './injectLinksToHead.js';
+import { pwaLocales } from './locales.js';
+import { logger, PLUGIN_NAME } from './logger.js';
+import { prepareConfigFile } from './prepareConfigFile.js';
+export const pwaPlugin = (options = {}) => (app) => {
+    if (app.env.isDebug)
+        logger.info('Options:', options);
+    const { base, shouldPrefetch = true } = app.options;
+    if (options.appendBase)
+        appendBase(base, options);
+    if (shouldPrefetch === true)
+        logger.warn('The plugin will register service worker to handle assets, so we recommend you to set "shouldPrefetch: false" in VuePress config file.');
+    app.options.head = injectLinksToHead(options, base, app.options.head);
     return {
-        ...plugin,
-        clientConfigFile: path.resolve(__dirname, '../client/config.js'),
-        define: {
-            __PWA_SW_FILENAME__: serviceWorkerFilename,
+        name: PLUGIN_NAME,
+        define: () => ({
+            __PWA_LOCALES__: getLocaleConfig({
+                app,
+                name: PLUGIN_NAME,
+                default: pwaLocales,
+                config: options.locales,
+            }),
+            __SW_FORCE_UPDATE__: options.update === 'force',
+            __SW_PATH__: options.serviceWorkerFilename || 'service-worker.js',
+        }),
+        extendsBundlerOptions: (bundlerOptions, app) => {
+            addViteOptimizeDepsExclude(bundlerOptions, app, [
+                'mitt',
+                'register-service-worker',
+            ]);
+            addViteSsrNoExternal(bundlerOptions, app, '@vuepress/helper');
+            customizeDevServer(bundlerOptions, app, {
+                path: '/manifest.webmanifest',
+                response: async (_, response) => {
+                    response.setHeader('Content-Type', 'application/manifest+json');
+                    return JSON.stringify(await getManifest(app, options));
+                },
+                errMsg: 'Unexpected manifest generation error',
+            });
+        },
+        onGenerated: async (app) => {
+            await generateManifest(app, options);
+            await generateServiceWorker(app, options);
         },
-        onGenerated: (app) => withSpinner('Generating service worker')(() => generateServiceWorker(app, serviceWorkerFilename, generateSWConfig)),
+        clientConfigFile: (app) => prepareConfigFile(app, options),
     };
 };

package/lib/shared/index.d.ts

@@ -0,0 +1,2 @@
+export * from './locales.js';
+export * from './manifest.js';

package/lib/shared/index.js

@@ -0,0 +1,2 @@
+export * from './locales.js';
+export * from './manifest.js';

package/lib/shared/locales.d.ts

@@ -0,0 +1,70 @@
+import type { ExactLocaleConfig } from '@vuepress/helper';
+export interface PwaPluginLocaleData {
+    /**
+     * Install button text
+     *
+     * 安装按钮文字
+     */
+    install: string;
+    /**
+     * iOS install hint text
+     *
+     * iOS 安装文字
+     */
+    iOSInstall: string;
+    /**
+     * Cancel button text
+     *
+     * 取消按钮文字
+     */
+    cancel: string;
+    /**
+     * Close button text
+     *
+     * 关闭按钮文字
+     */
+    close: string;
+    /**
+     * Previous image text
+     *
+     * 上一张图片文字
+     */
+    prevImage: string;
+    /**
+     * Next image text
+     *
+     * 下一张图片文字
+     */
+    nextImage: string;
+    /**
+     * Install explain text
+     *
+     * 安装解释
+     */
+    explain: string;
+    /**
+     * Description label text
+     *
+     * 描述标签文字
+     */
+    desc: string;
+    /**
+     * Feature label text
+     *
+     * 特性标签文字
+     */
+    feature: string;
+    /**
+     * Update hint text
+     *
+     * 提示有更新文字
+     */
+    hint: string;
+    /**
+     * Update available text
+     *
+     * 更新可用文字
+     */
+    update: string;
+}
+export type PwaPluginLocaleConfig = ExactLocaleConfig<PwaPluginLocaleData>;

package/lib/shared/locales.js

@@ -0,0 +1 @@
+export {};

package/lib/shared/manifest.d.ts

@@ -0,0 +1,129 @@
+/**
+ * @see https://www.w3.org/TR/mediaqueries-5/#display-mode
+ */
+export type DisplayMode = 'fullscreen' | 'standalone' | 'minimal-ui' | 'browser';
+/**
+ * @see https://github.com/w3c/manifest/wiki/Categories
+ */
+export type ManifestCategory = 'books' | 'business' | 'education' | 'entertainment' | 'finance' | 'fitness' | 'food' | 'games' | 'government' | 'health' | 'kids' | 'lifestyle' | 'magazines' | 'medical' | 'music' | 'navigation' | 'news' | 'personalization' | 'photo' | 'politics' | 'productivity' | 'security' | 'shopping' | 'social' | 'sports' | 'travel' | 'utilities' | 'weather';
+/**
+ * @see https://www.w3.org/TR/screen-orientation/#dom-orientationlocktype
+ */
+export type OrientationLockType = 'any' | 'natural' | 'landscape' | 'portrait' | 'portrait-primary' | 'portrait-secondary' | 'landscape-primary' | 'landscape-secondary';
+/**
+ * @see https://www.w3.org/TR/appmanifest/#manifest-image-resources
+ */
+export interface ManifestImageResource {
+    src: string;
+    sizes: string;
+    type?: string;
+}
+export interface ManifestIcon extends ManifestImageResource {
+    purpose?: 'any' | 'maskable' | 'monochrome';
+}
+/**
+ * @see https://www.w3.org/TR/appmanifest/#external-application-resource
+ */
+export interface ManifestExternalApplicationResource {
+    /**
+     * @see https://github.com/w3c/manifest/wiki/Platforms
+     */
+    platform: 'chrome_web_store' | 'play' | 'chromeos_play' | 'itunes' | 'webapp' | 'windows' | 'f-droid' | 'amazon';
+    url: string;
+    id?: string;
+    min_version?: string;
+    fingerprints?: {
+        type: string;
+        value: string;
+    }[];
+}
+/**
+ * @see https://www.w3.org/TR/appmanifest/#shortcut-items
+ */
+export interface ManifestShortCutItem {
+    name: string;
+    url: string;
+    short_name?: string;
+    description?: string;
+    icons?: ManifestIcon[];
+}
+/**
+ * @see https://www.w3.org/TR/appmanifest/
+ */
+export interface AppManifest extends Record<string, unknown> {
+    /**
+     * @see https://www.w3.org/TR/appmanifest/#name-member
+     *
+     * The name of the web application as it is usually displayed to the user
+     */
+    name?: string;
+    /**
+     * @see https://www.w3.org/TR/appmanifest/#short_name-member
+     *
+     * A short version of the name of the web application
+     */
+    short_name?: string;
+    /**
+     * @see https://www.w3.org/TR/appmanifest/#dfn-background_color
+     *
+     * The expected background color of the web application
+     */
+    background_color?: string;
+    /**
+     * @see https://www.w3.org/TR/appmanifest/#dir-member
+     *
+     * The base direction for the localizable members of the manifest.
+     */
+    dir?: 'ltr' | 'rtl' | 'auto';
+    /**
+     * @see https://www.w3.org/TR/appmanifest/#lang-member
+     *
+     * specifies the primary language for the values of the manifest's localizable members
+     */
+    lang?: string;
+    /**
+     * @see https://www.w3.org/TR/appmanifest/#dfn-display
+     *
+     * The developer's preferred display mode for the web application
+     */
+    display?: DisplayMode;
+    icons?: ManifestIcon[];
+    /**
+     * @see https://www.w3.org/TR/appmanifest/#orientation-member
+     *
+     * Serves as the default screen orientation for all top-level browsing contexts of the web application
+     */
+    orientation?: OrientationLockType;
+    /**
+     * @see https://www.w3.org/TR/appmanifest/#scope-member
+     *
+     * The navigation scope of this web application's application context.
+     */
+    scope?: string;
+    /**
+     * @see https://www.w3.org/TR/appmanifest/#start_url-member
+     *
+     * Start URL
+     */
+    start_url?: string;
+    /**
+     * @see https://www.w3.org/TR/appmanifest/#id-member
+     *
+     * Identity for the application
+     */
+    id?: string;
+    /**
+     * @see https://www.w3.org/TR/appmanifest/#theme_color-member
+     *
+     * Default theme color for an application context
+     */
+    theme_color?: string;
+    shortcuts?: ManifestShortCutItem[];
+    prefer_related_applications?: boolean;
+    related_applications?: ManifestExternalApplicationResource[];
+    description?: string;
+    categories?: ManifestCategory[];
+    screenshots?: ManifestImageResource[];
+    iarc_rating_id?: string;
+    features?: string[];
+}

package/lib/shared/manifest.js

@@ -0,0 +1,2 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/plugin-pwa",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0-rc.31",
   "description": "VuePress plugin - progressive web application",
   "keywords": [
     "vuepress-plugin",
@@ -8,7 +8,7 @@
     "plugin",
     "pwa"
   ],
-  "homepage": "https://github.com/vuepress",
+  "homepage": "https://ecosystem.vuejs.press/plugins/pwa.html",
   "bugs": {
     "url": "https://github.com/vuepress/ecosystem/issues"
   },
@@ -18,11 +18,16 @@
     "directory": "plugins/plugin-pwa"
   },
   "license": "MIT",
-  "author": "meteorlxy",
+  "author": {
+    "name": "Mr.Hope",
+    "email": "mister-hope@outlook.com",
+    "url": "https://mister-hope.com"
+  },
   "type": "module",
   "exports": {
     ".": "./lib/node/index.js",
     "./client": "./lib/client/index.js",
+    "./client/*": "./lib/client/*",
     "./package.json": "./package.json"
   },
   "main": "./lib/node/index.js",
@@ -32,19 +37,25 @@
   ],
   "scripts": {
     "build": "tsc -b tsconfig.build.json",
-    "clean": "rimraf --glob ./lib ./*.tsbuildinfo"
+    "clean": "rimraf --glob ./lib ./*.tsbuildinfo",
+    "style": "sass src:lib --no-source-map"
   },
   "dependencies": {
+    "@vuepress/helper": "~2.0.0-rc.31",
+    "@vueuse/core": "^10.9.0",
     "mitt": "^3.0.1",
     "register-service-worker": "^1.7.2",
-    "vue": "^3.4.15",
-    "workbox-build": "^7.0.0"
+    "vue": "^3.4.27",
+    "workbox-build": "^7.1.0"
+  },
+  "devDependencies": {
+    "sass": "^1.77.2"
   },
   "peerDependencies": {
-    "vuepress": "2.0.0-rc.2"
+    "vuepress": "2.0.0-rc.12"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7247c765f50c3b2d5a622e0f7cf22bfb13a463c4"
+  "gitHead": "c3d22eb10914f5a6bbb9cfb039498761ca94b524"
 }

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

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

package/lib/client/composables/useSkipWaiting.js

@@ -1,13 +0,0 @@
-/**
- * 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

@@ -1,3 +0,0 @@
-import type { ClientConfig } from 'vuepress/client';
-declare const _default: ClientConfig;
-export default _default;