Fix PWA caching behavior and launch

Author: garrettmflynn

packages/core/flows/BuildFlow.ts

@@ -250,15 +250,11 @@ export class BuildFlow {
       hooks,
     })
 
-    const customViteLogger = new ScopedLogger((...args) =>
-      customViteLogger.call(() => hooks.emit({ type: 'log', args }))
-    )
 
     const _vite = await vite
-    await _vite.build({
-      ...resolvedViteConfig,
-      customLogger: customViteLogger,
-    })
+    const customViteLogger = new ScopedLogger((...args) => customViteLogger.call(() => hooks.emit({ type: 'log', args })))
+    await _vite.build({ ...resolvedViteConfig, customLogger: customViteLogger })
+    customViteLogger.close()
 
     this.logger.debug('Emitting build:assets:complete', { phase: 'frontend' })
     hooks.emit({ type: 'build:assets:complete', phase: 'frontend' })

packages/core/flows/LaunchFlow.ts

@@ -4,7 +4,7 @@
  */
 
 import { createLogger } from '../assets/utils/logger.js'
-import type { UserConfig, HooksInterface, ResolvedConfig } from '../types.js'
+import type { UserConfig, HooksInterface, ResolvedConfig, LaunchOutput } from '../types.js'
 import { resolveConfig, resolveHooks } from '../index.js'
 
 const logger = createLogger('launch-flow')
@@ -31,7 +31,7 @@ export interface LaunchStrategy {
   /**
    * Launch the application
    */
-  launch(context: LaunchContext): Promise<void>
+  launch(context: LaunchContext): Promise<LaunchOutput>
 
   /**
    * Cleanup on shutdown
@@ -48,7 +48,6 @@ export interface LaunchContext {
   target: string
   root: string
   outDir: string
-  dev: boolean
   port?: number
   host?: string
 }
@@ -89,12 +88,11 @@ export class LaunchFlow {
     config: UserConfig = {},
     options: {
       hooks?: HooksInterface
-      dev?: boolean
       port?: number
       host?: string
     } = {}
-  ): Promise<void> {
-    const { hooks: optHooks, dev = true, port, host } = options
+  ): Promise<LaunchOutput> {
+    const { hooks: optHooks, port, host } = options
 
     // Resolve hooks
     const hooks = (config.hooks = await resolveHooks(config.hooks, optHooks))
@@ -104,10 +102,10 @@ export class LaunchFlow {
       const resolvedConfig = await resolveConfig(config, { build: false })
       const { root, target } = resolvedConfig
 
-      this.logger.info('Starting launch', { target, dev, port, host })
+      this.logger.info('Starting launch', { target, port, host })
 
       // Emit launch start event
-      this.logger.debug('Emitting launch:start', { config: resolvedConfig.name, target, dev })
+      this.logger.debug('Emitting launch:start', { config: resolvedConfig.name, target })
       hooks.emit({ type: 'launch:start', config: resolvedConfig })
 
       // Get the appropriate launch strategy
@@ -125,15 +123,14 @@ export class LaunchFlow {
         target,
         root,
         outDir: '', // Will be set by strategy
-        dev,
         port,
         host,
       }
 
       // Execute launch flow
-      await this.executeLaunchFlow(context, strategy)
-
+      const result = await this.executeLaunchFlow(context, strategy)
       this.logger.info('Launch completed successfully')
+      return result
     } catch (error) {
       this.logger.debug('Emitting launch:error', { error: (error as Error).message })
       hooks.emit({
@@ -152,17 +149,16 @@ export class LaunchFlow {
   private async executeLaunchFlow(
     context: LaunchContext,
     strategy: LaunchStrategy
-  ): Promise<void> {
+  ): Promise<LaunchOutput> {
     try {
       // Step 1: Prepare launch environment
       await strategy.prepare(context)
 
       // Step 2: Launch the application
-      await strategy.launch(context)
-
-      // Emit launch complete event
+      const result = await strategy.launch(context)
       this.logger.debug('Emitting launch:complete', { target: context.target })
       context.hooks.emit({ type: 'launch:complete' })
+      return result
     } catch (error) {
       // Cleanup on error
       await strategy.cleanup(context).catch((cleanupError) => {
@@ -185,7 +181,7 @@ export abstract class BaseLaunchStrategy implements LaunchStrategy {
 
   abstract prepare(context: LaunchContext): Promise<void>
 
-  abstract launch(context: LaunchContext): Promise<void>
+  abstract launch(context: LaunchContext): Promise<LaunchOutput>
 
   async cleanup(context: LaunchContext): Promise<void> {
     // Default: no cleanup

packages/core/flows/strategies/ElectronLaunchStrategy.ts

@@ -12,6 +12,7 @@ import { TARGET_ELECTRON } from '../../constants.js'
 import { PLATFORM } from '../../globals.js'
 import { spawnProcess } from '../../utils/processes.js'
 import { BuildError } from '../../errors.js'
+import { LaunchOutput } from '../../types.js'
 
 const logger = createLogger('ElectronLaunchStrategy')
 
@@ -89,7 +90,7 @@ export class ElectronLaunchStrategy extends BaseLaunchStrategy {
     logger.debug('Electron launch prepared', { outDir: context.outDir })
   }
 
-  async launch(context: LaunchContext): Promise<void> {
+  async launch(context: LaunchContext): Promise<LaunchOutput> {
     const { outDir, hooks } = context
 
     // Verify output directory exists
@@ -138,5 +139,7 @@ export class ElectronLaunchStrategy extends BaseLaunchStrategy {
     )
 
     logger.info('Electron app launched successfully')
+
+    return { url: null }
   }
 }

packages/core/flows/strategies/MobileLaunchStrategy.ts

@@ -9,6 +9,7 @@ import { createLogger } from '../../assets/utils/logger.js'
 import { BaseLaunchStrategy, type LaunchContext } from '../LaunchFlow.js'
 import { BuildError } from '../../errors.js'
 import * as mobile from '../../mobile/index.js'
+import { LaunchOutput } from '../../types.js'
 
 const logger = createLogger('MobileLaunchStrategy')
 
@@ -50,7 +51,7 @@ export class MobileLaunchStrategy extends BaseLaunchStrategy {
     logger.debug(`${this.platform} launch prepared`, { outDir: context.outDir })
   }
 
-  async launch(context: LaunchContext): Promise<void> {
+  async launch(context: LaunchContext): Promise<LaunchOutput> {
     const { outDir, target, config } = context
     const { root } = config
 
@@ -65,5 +66,7 @@ export class MobileLaunchStrategy extends BaseLaunchStrategy {
     // Emit ready event
     logger.debug('Emitting launch:ready', { platform: this.platform, outDir })
     context.hooks.emit({ type: 'launch:ready' })
+
+    return { url: null }
   }
 }

packages/core/flows/strategies/WebLaunchStrategy.ts

@@ -9,6 +9,7 @@ import { createLogger } from '../../assets/utils/logger.js'
 import { BaseLaunchStrategy, type LaunchContext } from '../LaunchFlow.js'
 import { vite } from '../../globals.js'
 import { BuildError } from '../../errors.js'
+import { LaunchOutput } from '../../types.js'
 
 const logger = createLogger('WebLaunchStrategy')
 
@@ -53,46 +54,35 @@ export class WebLaunchStrategy extends BaseLaunchStrategy {
     logger.debug('Web launch prepared', { outDir: context.outDir })
   }
 
-  async launch(context: LaunchContext): Promise<void> {
+  async launch(context: LaunchContext): Promise<LaunchOutput> {
     const { outDir, port, host, config } = context
     const { public: isPublic } = config
 
-    logger.info('Starting Vite dev server', { outDir, port, host })
-
     const __vite = await vite
 
-    const serverConfig: ViteServerOptions = {
+    logger.info('Starting Vite preview server', { outDir, port, host })
+    
+    const previewConfig = {
       port,
       open: !process.env.VITEST,
+      host: isPublic || host ? (host || '0.0.0.0') : undefined,
     }
 
-    if (isPublic || host) {
-      serverConfig.host = host || '0.0.0.0'
-    }
-
-    // Create Vite server
-    this.server = await __vite.createServer({
-      configFile: false,
-      root: outDir,
-      server: serverConfig,
+    // Create Vite preview server for built artifacts (handles PWA correctly)
+    this.server = await __vite.preview({
+      build: {
+        outDir
+      },
+      preview: previewConfig,
     })
 
-    await this.server.listen()
-
-    // Get server info
-    const { port: resolvedPort, host: resolvedHost } = this.server.config.server
-    const protocol = this.server.config.server.https ? 'https' : 'http'
+    const resolvedPort = this.server.config.preview.port
+    const resolvedHost = this.server.config.preview.host
+    const protocol = this.server.config.preview.https ? 'https' : 'http'
     const url = `${protocol}://localhost:${resolvedPort}`
+    logger.info('Vite preview server running', { url, host: resolvedHost, port: resolvedPort })
+    context.hooks.emit({ type: 'launch:ready', url, server: this.server })
 
-    logger.info('Vite dev server running', { url, host: resolvedHost, port: resolvedPort })
-
-    // Emit ready event with server info
-    logger.debug('Emitting launch:ready', { url, hasServer: !!this.server })
-    context.hooks.emit({
-      type: 'launch:ready',
-      url,
-      server: this.server,
-    })
   }
 
   async cleanup(context: LaunchContext): Promise<void> {

packages/core/launch.ts

@@ -90,7 +90,6 @@ export const resolveAppToLaunch = (config: LaunchConfig): string => {
  */
 export const launchApp = async (
   config: LaunchConfig,
-  args: string[] = []
 ): Promise<any> => {
   getLogger().debug('Starting app launch with flow architecture')
 
@@ -101,18 +100,17 @@ export const launchApp = async (
 
     // Extract launch options
     const { port, public: isPublic } = resolvedConfig
-
+    
     // Delegate to LaunchFlow for orchestration
-    await getLaunchFlow().launch(resolvedConfig, {
+    const result = await getLaunchFlow().launch(resolvedConfig, {
       hooks,
-      dev: true, // launch is always in dev mode
       port,
       host: isPublic ? '0.0.0.0' : undefined,
     })
 
     logger.info('App launch completed successfully')
 
-    return {}
+    return result
   } catch (error) {
     logger.error('App launch failed', {}, error as Error)
     throw error

packages/core/types.ts

@@ -70,7 +70,7 @@ export type DevServerEvent =
 
 export type LaunchEvent =
   | { type: 'launch:start'; outDir: string, target: string }
-  | { type: 'launch:ready'; }
+  | { type: 'launch:ready'; url?: string; server?: any; }
   | { type: 'launch:error'; error: Error; target?: string }
 
 
@@ -85,6 +85,10 @@ export interface HooksInterface {
   on: (eventType: HookEvent['type'] | 'all', handler: HookFunction) => () => void
 }
 
+export type LaunchOutput = {
+  url?: string // URL for web targets
+}
+
 export type ServiceOptions = string | string[]
 
 export type ServiceCreationOptions = {

packages/core/utils/ui/ui.ts

@@ -604,7 +604,9 @@ export class CommonersUI {
 
   add(...args: string[]) {
     const currentSection = this.getCurrentSection()
+    // console.log(...args)
     const message = args.join(' ')
+    // console.log(message)
     const indent = this.indentString.repeat(this.indentLevel)
 
     if (currentSection) {

packages/core/vite/index.ts

@@ -54,10 +54,9 @@ const resolvePWAOptions = (
   else if (!Array.isArray(pwaOpts.includeAssets)) pwaOpts.includeAssets = [pwaOpts.includeAssets]
 
   // Only include preferred icons
-  const icons = getAllIcons(icon).map((src: string) =>
-    relative(outDir, getAssetBuildPath(getAbsolutePath(root, src), outDir))
-  )
-  pwaOpts.includeAssets.push(...icons.map(safePath)) // Include specified assets
+  const icons = getAllIcons(icon).map((src: string) => relative(outDir, getAssetBuildPath(getAbsolutePath(root, src), outDir)))
+  const scopedIconPaths = icons.map(src => safePath(src))
+  pwaOpts.includeAssets.push(...scopedIconPaths) // Include specified assets
 
   const baseManifest = {
     id: `?${appId}=1`,
@@ -75,16 +74,23 @@ const resolvePWAOptions = (
 
     // Generated
     icons: icons.map(src => {
-      return {
-        src: safePath(src),
-        type: `image/${extname(src).slice(1)}`,
-        sizes: 'any',
-      }
+      return { src: safePath(src), type: `image/${extname(src).slice(1)}`, sizes: 'any' }
     }),
   } as Partial<ManifestOptions>
 
   pwaOpts.manifest = 'manifest' in pwaOpts ? { ...baseManifest, ...pwaOpts.manifest } : baseManifest // Naive merge
 
+  // Configure workbox for proper caching behavior
+  if (!('workbox' in pwaOpts)) {
+    pwaOpts.workbox = {
+      globPatterns: ['**/*.{html,js,css,svg,png,webp,ico,woff2}'], // Cache common web assets
+      additionalManifestEntries: [ ...scopedIconPaths.map(src => ({ url: src, revision: null }))], // Ensures that icons are cached
+      cleanupOutdatedCaches: true, // Ensure outdated caches are cleaned up
+      clientsClaim: true, // Force service worker to activate immediately
+      skipWaiting: true,
+    }
+  }
+
   return pwaOpts as ResolvedConfig['pwa']
 }
 

packages/core/vite/logger.ts

@@ -5,20 +5,45 @@ import { createLogger, type Logger, type LogOptions, type LogErrorOptions } from
   export class ScopedLogger implements Logger {
     #active = false
     #__levels = {}
+    #customLoggingFunction: Function
     #logger = createLogger('info', { prefix: '' }); // Vite’s default logger
 
 
     constructor(customLoggingFunction: Function) {
-        LOG_LEVELS.forEach(level => {
+        this.#customLoggingFunction = customLoggingFunction;
+        this.#start();
+    }
+
+    #PWAMessageThrown = false;
+
+    #isPWAMessage(args) {
+        const firstArg = args[0];
+        if (this.#PWAMessageThrown) return false
+        if (typeof firstArg === 'string' && firstArg.includes('PWA')) return true
+    }
+
+    #start() {
+         LOG_LEVELS.forEach(level => {
             this.#__levels[level] = console[level].bind(console);
             console[level] = (...args) => {
                 const ogLevel = this.#__levels[level]
-                if (this.#active) customLoggingFunction.call(this, ...args); // Forward to original console method
-                else ogLevel(...args); // Forward to original console method
+                if (this.#active) this.#customLoggingFunction.call(this, ...args);
+                else {
+                    const isPWA = this.#isPWAMessage(args);
+                    if (isPWA) {
+                        this.#PWAMessageThrown = true;
+                        this.#customLoggingFunction.call(this, ...args);
+                    }
+                    else ogLevel(...args);
+                }
             }
         })
     }
 
+    close() {
+        LOG_LEVELS.forEach(level => console[level] = this.#__levels[level])
+    }
+
     // Call original function safely
     call (callback) {  
         const currentState = this.#active;