@vuepress/plugin-pwa 2.0.0-rc.14 → 2.0.0-rc.17

package/lib/client/styles/modal.css

@@ -0,0 +1,402 @@
+@keyframes pwa-opened {
+  from {
+    opacity: 0.4;
+    transform: scale(0.8, 0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+}
+@keyframes pwa-mobile {
+  from {
+    opacity: 0.6;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes pwa-fade-in {
+  from {
+    opacity: 0.2;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.modal-button {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  z-index: 50;
+  padding: 0 16px;
+  border-width: 0;
+  border-radius: 1.2rem;
+  background: var(--pwa-btn-bg-color);
+  color: var(--pwa-btn-text-color);
+  outline: none;
+  font-weight: 600;
+  line-height: 2.2rem;
+  cursor: pointer;
+  transition: background 0.3s, color 0.3s;
+}
+@media (display-mode: standalone) {
+  .modal-button {
+    display: none;
+  }
+}
+@media print {
+  .modal-button {
+    display: none;
+  }
+}
+.modal-button:hover, .modal-button:active {
+  background: var(--pwa-btn-hover-bg-color);
+}
+
+#install-modal-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 997;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  width: 100vw;
+  height: 100vh;
+}
+@media print {
+  #install-modal-wrapper {
+    display: none;
+  }
+}
+#install-modal-wrapper button {
+  border-width: 0;
+  background: transparent;
+  cursor: pointer;
+}
+#install-modal-wrapper .background {
+  position: fixed;
+  inset: 0;
+  z-index: 998;
+  animation: 0.25s pwa-fade-in;
+  backdrop-filter: blur(10px);
+}
+#install-modal-wrapper .install-modal {
+  position: absolute;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  max-width: 56em;
+  border-radius: 10px;
+  background: var(--pwa-bg-color);
+  transition: background 0.3s;
+  animation: 0.15s pwa-opened;
+}
+@media (max-width: 1280px) {
+  #install-modal-wrapper .install-modal {
+    width: 92%;
+    animation: 0.25s pwa-mobile;
+  }
+}
+@media (max-width: 419px) {
+  #install-modal-wrapper .install-modal {
+    overflow-y: auto;
+    max-height: 80%;
+  }
+  #install-modal-wrapper .install-modal::-webkit-scrollbar {
+    display: none;
+  }
+}
+#install-modal-wrapper .header {
+  margin: 40px 40px 32px;
+}
+@media (max-width: 959px) {
+  #install-modal-wrapper .header {
+    margin-bottom: 24px;
+  }
+}
+@media (max-width: 719px) {
+  #install-modal-wrapper .header {
+    margin: 20px;
+  }
+}
+#install-modal-wrapper .header .close-button {
+  border-width: 0;
+  float: right;
+  background: transparent;
+  color: var(--pwa-content-color);
+  transition: color 0.3s ease;
+  cursor: pointer;
+}
+#install-modal-wrapper .header .close-button:hover, #install-modal-wrapper .header .close-button:focus {
+  color: var(--pwa-content-light-color);
+}
+#install-modal-wrapper .header .logo {
+  display: flex;
+}
+#install-modal-wrapper .header h1 {
+  margin-top: 0;
+  margin-bottom: 7px;
+  color: var(--pwa-content-light-color);
+  font-size: 34px;
+}
+@media (max-width: 959px) {
+  #install-modal-wrapper .header h1 {
+    margin-bottom: 0;
+  }
+}
+@media (max-width: 419px) {
+  #install-modal-wrapper .header h1 {
+    font-size: 26px;
+  }
+}
+#install-modal-wrapper .header img {
+  width: 122px;
+  height: 122px;
+  margin-inline-end: 24px;
+  padding: 12px;
+  border-radius: 24px;
+}
+@media (max-width: 959px) {
+  #install-modal-wrapper .header img {
+    width: 60px;
+    height: 60px;
+  }
+}
+@media (max-width: 719px) {
+  #install-modal-wrapper .header img {
+    margin-inline-end: 12px;
+    padding: 8px;
+  }
+}
+@media (max-width: 419px) {
+  #install-modal-wrapper .header img {
+    width: 40px;
+    height: 40px;
+    padding: 6px;
+  }
+}
+#install-modal-wrapper .header .desc {
+  overflow: hidden;
+  max-width: 40em;
+  color: #888;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: pre-wrap;
+}
+@media (max-width: 959px) {
+  #install-modal-wrapper .header .desc {
+    display: none;
+  }
+}
+#install-modal-wrapper .content {
+  flex: 1;
+  margin: 0 40px;
+  color: var(--pwa-content-color);
+}
+@media (max-width: 719px) {
+  #install-modal-wrapper .content {
+    margin: 0 20px;
+  }
+}
+#install-modal-wrapper .content h3 {
+  margin-bottom: 12px;
+  font-size: 22px;
+}
+#install-modal-wrapper .content p {
+  font-size: 14px;
+}
+#install-modal-wrapper .highlight {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-inline-end: 20px;
+}
+@media (max-width: 719px) {
+  #install-modal-wrapper .highlight {
+    flex-direction: column;
+    align-items: flex-start;
+    margin-inline-end: 0;
+  }
+}
+#install-modal-wrapper .highlight h3 {
+  margin-top: 0;
+  font-weight: 600;
+  font-size: 22px;
+  line-height: 225%;
+}
+@media (max-width: 419px) {
+  #install-modal-wrapper .highlight h3 {
+    margin-bottom: 0;
+    font-size: 18px;
+  }
+}
+#install-modal-wrapper .feature-wrapper {
+  overflow: hidden;
+  padding-inline-end: 2em;
+}
+#install-modal-wrapper .feature-wrapper ul {
+  margin-block-start: 12px;
+  padding-inline-start: 22px;
+}
+@media (max-width: 419px) {
+  #install-modal-wrapper .feature-wrapper ul {
+    margin-top: 0;
+  }
+}
+#install-modal-wrapper .feature-wrapper li {
+  color: var(--pwa-content-light-color);
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 29px;
+  transition: color 0.3s;
+}
+#install-modal-wrapper .screenshot-wrapper {
+  display: flex;
+  max-width: 30em;
+  max-height: 220px;
+}
+@media (max-width: 719px) {
+  #install-modal-wrapper .screenshot-wrapper {
+    width: 100%;
+  }
+}
+#install-modal-wrapper .screenshot-wrapper button {
+  width: 4em;
+  border-width: 0;
+  background: transparent;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+#install-modal-wrapper .screenshot-wrapper button:hover, #install-modal-wrapper .screenshot-wrapper button:focus {
+  background: #bbb;
+}
+#install-modal-wrapper .screenshot-wrapper button svg {
+  width: 28px;
+  fill: #6b6969;
+}
+#install-modal-wrapper .screenshot {
+  display: flex;
+  flex-flow: column wrap;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  width: 22em;
+  max-height: 220px;
+  scroll-snap-type: x mandatory;
+}
+@media (max-width: 1280px) {
+  #install-modal-wrapper .screenshot {
+    justify-content: center;
+  }
+}
+#install-modal-wrapper .screenshot::-webkit-scrollbar {
+  display: none;
+}
+#install-modal-wrapper .screenshot div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 14em;
+  background: #efefef;
+  scroll-snap-align: start;
+}
+#install-modal-wrapper .screenshot img {
+  object-fit: contain;
+  height: 100%;
+}
+@media (max-width: 719px) {
+  #install-modal-wrapper .screenshot img {
+    height: 180px;
+  }
+}
+#install-modal-wrapper .description {
+  margin-bottom: 3em;
+}
+#install-modal-wrapper .button-wrapper {
+  width: 100%;
+  padding: 1rem 0;
+  text-align: end;
+}
+@media (max-width: 719px) {
+  #install-modal-wrapper .button-wrapper {
+    text-align: center;
+  }
+}
+#install-modal-wrapper .install-button,
+#install-modal-wrapper .cancel-button {
+  display: inline-block;
+  flex: 0 0 auto;
+  min-width: 80px;
+  margin: 0.5rem 1rem;
+  padding: 0.5rem 1rem;
+  border: 2px solid var(--pwa-btn-bg-color);
+  border-radius: 20px;
+  background: transparent;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+}
+#install-modal-wrapper .install-button {
+  background: var(--pwa-btn-bg-color);
+  color: var(--pwa-bg-color);
+  transition: color 0.3s;
+}
+@media (max-width: 419px) {
+  #install-modal-wrapper .install-button span {
+    display: none;
+  }
+}
+#install-modal-wrapper .install-button:hover, #install-modal-wrapper .install-button:focus {
+  background: var(--pwa-btn-hover-bg-color);
+}
+#install-modal-wrapper .cancel-button {
+  background: transparent;
+  color: var(--pwa-btn-bg-color);
+}
+#install-modal-wrapper .cancel-button:hover, #install-modal-wrapper .cancel-button:focus {
+  background: var(--pwa-btn-hover-bg-color);
+  color: var(--pwa-bg-color);
+}
+#install-modal-wrapper .ios-text {
+  position: fixed;
+  bottom: 0;
+  box-sizing: border-box;
+  width: 92%;
+  margin: 2em auto;
+  padding: 0.5em 2em;
+  border-radius: 8px;
+  background: var(--pwa-bg-color);
+  box-shadow: 0 2px 12px 0 var(--pwa-shadow-color);
+  font-weight: bold;
+  font-size: 14px;
+  text-align: center;
+  transition: background 0.3s, box-shadow 0.3s;
+}
+#install-modal-wrapper .ios-text::after {
+  content: " ";
+  position: absolute;
+  bottom: -1em;
+  left: calc(50% - 0.8em);
+  width: 0;
+  height: 0;
+  border-top: 1em solid var(--pwa-bg-color);
+  border-right: 0.8em solid transparent;
+  border-left: 0.8em solid transparent;
+  transition: border-color 0.3s;
+}
+#install-modal-wrapper .ios-text p {
+  margin: 0 0 0.5em;
+}
+#install-modal-wrapper .ios-text .success {
+  margin-bottom: 0.5em;
+  padding: 0.5em 1em;
+  border: none;
+  border-radius: 1em;
+  background: #07c160;
+  color: var(--pwa-bg-color);
+  cursor: pointer;
+  transition: color 0.3s;
+}

package/lib/client/styles/popup.css

@@ -0,0 +1,66 @@
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.popup-enter-active,
+.popup-leave-active {
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.popup-enter-from,
+.popup-leave-to {
+  opacity: 0;
+  transform: translate(0, 50%) scale(0.5);
+}
+
+.sw-hint-popup,
+.sw-update-popup {
+  position: fixed;
+  bottom: 1rem;
+  inset-inline-end: 1rem;
+  z-index: var(--pwa-z-index);
+  padding: 0.5rem 0.75rem;
+  border-width: 0;
+  border-radius: 0.5rem;
+  background: var(--pwa-bg-color);
+  color: var(--pwa-color);
+  box-shadow: 0 2px 12px 0 var(--pwa-shadow-color);
+  font-size: 1rem;
+  line-height: 1.5;
+  cursor: pointer;
+}
+@media print {
+  .sw-hint-popup,
+  .sw-update-popup {
+    display: none;
+  }
+}
+.sw-hint-popup .icon-wrapper,
+.sw-update-popup .icon-wrapper {
+  display: inline-block;
+  vertical-align: middle;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-inline-start: 0.4rem;
+  border-radius: 0.75rem;
+  background: var(--pwa-btn-bg-color);
+}
+.sw-hint-popup .icon-wrapper:hover,
+.sw-update-popup .icon-wrapper:hover {
+  background: var(--pwa-btn-hover-bg-color);
+}
+.sw-hint-popup .icon-wrapper svg,
+.sw-update-popup .icon-wrapper svg {
+  width: 1.2rem;
+  height: 1.2rem;
+  margin: 0.15rem;
+  color: var(--pwa-btn-text-color);
+  animation: rotate 3s ease infinite;
+}

package/lib/client/styles/vars.css

@@ -0,0 +1,12 @@
+:root {
+  --pwa-z-index: 10;
+  --pwa-color: #2c3e50;
+  --pwa-bg-color: #ffffff;
+  --pwa-border-color: #3eaf7c;
+  --pwa-shadow-color: rgb(0 0 0 / 15%);
+  --pwa-btn-text-color: #ffffff;
+  --pwa-btn-bg-color: #3eaf7c;
+  --pwa-btn-hover-bg-color: #4abf8a;
+  --pwa-content-color: #333;
+  --pwa-content-light-color: #666;
+}

package/lib/client/utils/forceUpdate.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Force update page content
+ *
+ * 强制更新页面内容
+ */
+export declare const forceUpdate: () => void;

package/lib/client/utils/forceUpdate.js

@@ -0,0 +1,16 @@
+/**
+ * Force update page content
+ *
+ * 强制更新页面内容
+ */
+export const forceUpdate = () => {
+    navigator.serviceWorker.getRegistration().then((registration) => {
+        // Check whether a valid service worker is active
+        if (registration && registration.active)
+            registration?.addEventListener('updatefound', () => {
+                // force refresh
+                // @ts-expect-error: A non-standard API
+                window.location.reload(true);
+            });
+    });
+};

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

@@ -0,0 +1,4 @@
+export * from './forceUpdate.js';
+export * from './registerSW.js';
+export * from './skipWaiting.js';
+export * from './unregisterSW.js';

package/lib/client/utils/index.js

@@ -0,0 +1,4 @@
+export * from './forceUpdate.js';
+export * from './registerSW.js';
+export * from './skipWaiting.js';
+export * from './unregisterSW.js';

package/lib/client/utils/registerSW.d.ts

@@ -0,0 +1,15 @@
+import type { Hooks } from 'register-service-worker';
+/**
+ * Register serviceWorker under `serviceWorkerPath`
+ *
+ * @param serviceWorkerPath Service Worker path
+ * @param hooks Service worker hooks
+ * @param showStatus Whether to show status in console
+ *
+ * 在 `serviceWorkerPath` 下注册 Service Worker
+ *
+ * @param serviceWorkerPath Service Worker 路径
+ * @param hooks Service Worker 钩子
+ * @param showStatus 是否在控制台显示状态
+ */
+export declare const registerSW: (serviceWorkerPath: string, hooks?: Hooks, showStatus?: boolean) => Promise<void>;

package/lib/client/utils/registerSW.js

@@ -0,0 +1,57 @@
+/**
+ * Register serviceWorker under `serviceWorkerPath`
+ *
+ * @param serviceWorkerPath Service Worker path
+ * @param hooks Service worker hooks
+ * @param showStatus Whether to show status in console
+ *
+ * 在 `serviceWorkerPath` 下注册 Service Worker
+ *
+ * @param serviceWorkerPath Service Worker 路径
+ * @param hooks Service Worker 钩子
+ * @param showStatus 是否在控制台显示状态
+ */
+export const registerSW = async (serviceWorkerPath, hooks = {}, showStatus = true) => {
+    const { register } = await import(
+    /* webpackChunkName: "register-service-worker" */ 'register-service-worker');
+    // Register service worker
+    register(serviceWorkerPath, {
+        ready(registration) {
+            if (showStatus)
+                console.info('[Service Worker]: active');
+            hooks.ready?.(registration);
+        },
+        registered(registration) {
+            if (showStatus)
+                console.log('[Service Worker]: registered');
+            hooks.registered?.(registration);
+        },
+        cached(registration) {
+            if (showStatus)
+                console.log('[Service Worker]: cached');
+            hooks.cached?.(registration);
+        },
+        async updatefound(registration) {
+            if (await navigator.serviceWorker.getRegistration()) {
+                if (showStatus)
+                    console.log('[Service Worker]: update found');
+                hooks.updatefound?.(registration);
+            }
+        },
+        updated(registration) {
+            if (showStatus)
+                console.log('[Service Worker]: updated');
+            hooks.updated?.(registration);
+        },
+        offline() {
+            if (showStatus)
+                console.log('[Service Worker]: offline');
+            hooks.offline?.();
+        },
+        error(err) {
+            if (showStatus)
+                console.error('[Service Worker]: ', err);
+            hooks.error?.(err);
+        },
+    });
+};

package/lib/client/utils/skipWaiting.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Call `skipWaiting()` inside current waiting worker
+ *
+ * 在当前等待中的 Service Worker 中调用 `skipWaiting()`
+ */
+export declare const skipWaiting: (registration: ServiceWorkerRegistration) => void;

package/lib/client/utils/skipWaiting.js

@@ -0,0 +1,15 @@
+/**
+ * Call `skipWaiting()` inside current waiting worker
+ *
+ * 在当前等待中的 Service Worker 中调用 `skipWaiting()`
+ */
+export const skipWaiting = (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/utils/unregisterSW.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Call `unregister()` inside current active worker
+ *
+ * @returns `true` if unregister success, `false` if unregister failed
+ *
+ * 在当前激活的 Service Worker 中调用 `unregister()`
+ *
+ * @returns `true` 表示注销成功，`false` 表示注销失败
+ */
+export declare const unregisterSW: () => Promise<boolean>;

package/lib/client/utils/unregisterSW.js

@@ -0,0 +1,24 @@
+/**
+ * Call `unregister()` inside current active worker
+ *
+ * @returns `true` if unregister success, `false` if unregister failed
+ *
+ * 在当前激活的 Service Worker 中调用 `unregister()`
+ *
+ * @returns `true` 表示注销成功，`false` 表示注销失败
+ */
+export const unregisterSW = () => navigator.serviceWorker
+    .getRegistration()
+    .then((registration) => {
+    if (registration)
+        return registration.unregister().then((found) => {
+            if (found)
+                console.log('[PWA] Current service worker unregistered');
+            return found;
+        });
+    return false;
+})
+    .catch((error) => {
+    console.log('[PWA] Unregister current service worker failed with error:', error);
+    return false;
+});

package/lib/node/generateManifest.d.ts

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

package/lib/node/generateManifest.js

@@ -0,0 +1,12 @@
+import { colors, fs, path } from 'vuepress/utils';
+import { getManifest } from './getManifest.js';
+import { logger } from './logger.js';
+export const generateManifest = async (app, options) => {
+    const { succeed } = logger.load('Generating manifest.webmanifest');
+    const manifest = await getManifest(app, options);
+    const manifestPath = app.dir.dest('manifest.webmanifest');
+    await fs.writeJSON(manifestPath, manifest, {
+        flag: 'w',
+    });
+    succeed(`Manifest generated and saved to ${colors.cyan(path.relative(process.cwd(), manifestPath))}!`);
+};

package/lib/node/generateServiceWorker.d.ts

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