@eclipse-docks/create-app 0.7.76 → 0.7.79

package/README.md

@@ -52,7 +52,7 @@ From the created project root, `npm run dev` runs the app (Vite). Use `npm run b
 ## What you get
 
 - A **monorepo** with two workspace packages:
-  - **`packages/app`** – the Docks app (Vite, core + extensions from npm).
+  - **`packages/app`** – the Docks app (Vite, core + extensions from npm), including **PWA** (web app manifest, injectManifest service worker, `@eclipse-docks/extension-pwa` for install/update in the toolbar).
   - **`packages/example-extension`** – a minimal example extension you can copy or extend.
 - The app registers a **logo contribution** on the left main toolbar (slot `start`) with the text `my!app`; you can change it in `packages/app/src/main.ts`.
 - The example extension is loaded by the app and adds an "Example" view in the left side panel.

package/index.js

@@ -54,6 +54,15 @@ function main() {
   mainTs = mainTs.replace(/\{\{APP_NAME\}\}/g, appName);
   writeFileSync(mainTsPath, mainTs);
 
+  function escapeForSingleQuotedTs(s) {
+    return s.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+  }
+  const viteConfigPath = join(targetDir, 'packages', 'app', 'vite.config.ts');
+  let viteConfig = readFileSync(viteConfigPath, 'utf8');
+  viteConfig = viteConfig.replace(/\{\{APP_NAME\}\}/g, escapeForSingleQuotedTs(appName));
+  viteConfig = viteConfig.replace(/\{\{APP_DESCRIPTION\}\}/g, escapeForSingleQuotedTs(appDescription));
+  writeFileSync(viteConfigPath, viteConfig);
+
   const logoSvgPath = join(targetDir, 'packages', 'app', 'public', 'logo.svg');
   let logoSvg = readFileSync(logoSvgPath, 'utf8');
   logoSvg = logoSvg.replace(/\{\{APP_NAME\}\}/g, appName);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-docks/create-app",
-  "version": "0.7.76",
+  "version": "0.7.79",
   "description": "Scaffold a new Eclipse Docks app (monorepo with app + example extension)",
   "type": "module",
   "bin": "index.js",

package/template/README.md

@@ -20,3 +20,7 @@ Then open the URL shown in the terminal (e.g. https://localhost:5173/).
 
 - **packages/app** – The Docks app (entry point, extensions, UI)
 - **packages/example-extension** – Example extension; use it as a reference to add your own
+
+## PWA
+
+The app is set up with **vite-plugin-pwa** (injectManifest), a **service worker** at `packages/app/src/sw.ts`, and **`@eclipse-docks/extension-pwa`** for install / update controls in the bottom toolbar. Production `npm run build` emits the web app manifest and precached assets. To opt out, remove the PWA extension from `packages/app/src/main.ts` and `extensions.ts`, delete `src/sw.ts`, and strip the `VitePWA(...)` block from `packages/app/vite.config.ts`.

package/template/packages/app/env.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="vite-plugin-pwa/client" />
+
 declare module 'vite-plugin-mkcert' {
   import type { Plugin } from 'vite';
   const plugin: () => Plugin;

package/template/packages/app/package.json

@@ -18,6 +18,7 @@
     "@eclipse-docks/extension-media-viewer": "^0.x",
     "@eclipse-docks/extension-memory-usage": "^0.x",
     "@eclipse-docks/extension-monaco-editor": "^0.x",
+    "@eclipse-docks/extension-pwa": "^0.x",
     "@eclipse-docks/extension-notebook": "^0.x",
     "@eclipse-docks/extension-python-runtime": "^0.x",
     "@eclipse-docks/extension-settings-tree": "^0.x",
@@ -28,7 +29,8 @@
     "typescript": "^6.0.0",
     "vite": "^8.0.0",
     "vite-plugin-cross-origin-isolation": "^0.1.6",
-    "vite-plugin-mkcert": "^1.17.9"
+    "vite-plugin-mkcert": "^1.17.9",
+    "vite-plugin-pwa": "^1.2.0"
   },
   "marketplace": {
     "catalogUrls": [

package/template/packages/app/src/extensions.ts

@@ -1,9 +1,12 @@
 /**
  * Explicit imports of workspace extensions so they are included in the bundle.
- * Replaces import.meta.glob('../../extension-*/src/index.ts') to avoid .ts paths
+ * Replaces import.meta.glob('../../extension-xxx/src/index.ts') to avoid .ts paths
  * in module URLs (servers often map .ts to video/mp2t MIME type).
  * Add or remove imports when you add or remove extensions from the app config.
+ *
+ * PWA is imported first so `beforeinstallprompt` can be captured early (see extension-pwa).
  */
+import '@eclipse-docks/extension-pwa';
 import '@eclipse-docks/extension-ai-system';
 import '@eclipse-docks/extension-command-palette';
 import '@eclipse-docks/extension-catalog';

package/template/packages/app/src/main.ts

@@ -13,6 +13,7 @@ appLoaderService.registerApp(
   {
     extensions: [
       '@eclipse-docks/extension-utils',
+      '@eclipse-docks/extension-pwa',
       '@eclipse-docks/extension-command-palette',
       '@eclipse-docks/extension-catalog',
       '@eclipse-docks/extension-md-editor',

package/template/packages/app/src/sw.ts

@@ -0,0 +1,50 @@
+/// <reference lib="webworker" />
+
+import {
+  addPlugins,
+  cleanupOutdatedCaches,
+  createHandlerBoundToURL,
+  precacheAndRoute,
+} from 'workbox-precaching';
+import { NavigationRoute, registerRoute } from 'workbox-routing';
+
+declare const self: ServiceWorkerGlobalScope;
+
+function withCoopCoep(response: Response): Response {
+  if (response.status === 0 || response.type === 'opaque' || response.type === 'opaqueredirect') {
+    return response;
+  }
+  const headers = new Headers(response.headers);
+  headers.set('Cross-Origin-Opener-Policy', 'same-origin');
+  headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
+  return new Response(response.body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers,
+  });
+}
+
+cleanupOutdatedCaches();
+
+addPlugins([
+  {
+    cachedResponseWillBeUsed: async ({ cachedResponse }) =>
+      cachedResponse ? withCoopCoep(cachedResponse) : cachedResponse,
+    fetchDidSucceed: async ({ response }) => withCoopCoep(response),
+  },
+]);
+
+precacheAndRoute(self.__WB_MANIFEST);
+
+const indexUrl = new URL('index.html', self.registration.scope).href;
+registerRoute(new NavigationRoute(createHandlerBoundToURL(indexUrl)));
+
+self.addEventListener('message', (event) => {
+  if (event.data?.type === 'SKIP_WAITING') {
+    void self.skipWaiting();
+  }
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(self.clients.claim());
+});

package/template/packages/app/tsconfig.json

@@ -6,6 +6,7 @@
     "rootDir": "src"
   },
   "include": [
-    "src/**/*"
+    "src/**/*",
+    "env.d.ts"
   ]
 }

package/template/packages/app/vite.config.ts

@@ -1,27 +1,71 @@
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
 import { defineConfig } from 'vite';
-import mkcert from 'vite-plugin-mkcert';
 import crossOriginIsolation from 'vite-plugin-cross-origin-isolation';
+import mkcert from 'vite-plugin-mkcert';
+import { VitePWA } from 'vite-plugin-pwa';
 import { resolveDepVersionsPlugin } from '@eclipse-docks/core/vite-plugin-resolve-deps';
 import { localAliasesPlugin } from '@eclipse-docks/core/vite-plugin-local-aliases';
-import path from 'path';
-import { fileURLToPath } from 'url';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const basePath = process.env.VITE_BASE_PATH || '/';
 
 export default defineConfig({
   root: __dirname,
-  base: process.env.VITE_BASE_PATH || '/',
+  base: basePath,
   resolve: {},
+  server: {
+    watch: {
+      ignored: ['**/node_modules/**', '**/dist/**'],
+    },
+  },
   plugins: [
     resolveDepVersionsPlugin(),
     localAliasesPlugin({
       useSrcInDev: true,
-      patterns: [
-        { folderPrefix: 'extension-' },
-      ],
+      patterns: [{ folderPrefix: 'extension-' }],
     }),
     mkcert(),
     crossOriginIsolation(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      injectRegister: 'inline',
+      strategies: 'injectManifest',
+      srcDir: 'src',
+      filename: 'sw.ts',
+      manifest: {
+        name: '{{APP_NAME}}',
+        short_name: '{{APP_NAME}}',
+        description: '{{APP_DESCRIPTION}}',
+        theme_color: '#1a1a1a',
+        background_color: '#1a1a1a',
+        display: 'standalone',
+        start_url: basePath,
+        scope: basePath,
+        icons: [
+          {
+            src: 'logo.svg',
+            sizes: 'any',
+            type: 'image/svg+xml',
+            purpose: 'any',
+          },
+          {
+            src: 'favicon.svg',
+            sizes: 'any',
+            type: 'image/svg+xml',
+            purpose: 'monochrome',
+          },
+        ],
+      },
+      includeAssets: ['favicon.svg', 'logo.svg', 'logo-loading.svg'],
+      injectManifest: {
+        maximumFileSizeToCacheInBytes: 12 * 1024 * 1024,
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,woff2,woff,ttf,wasm}'],
+      },
+      devOptions: {
+        enabled: false,
+      },
+    }),
   ],
   worker: {
     format: 'es',