Adding Capacitor

Adding Capacitor

Adding Capacitor to the Framework7 Build

Install the runtime, the plugins the demo uses, and the CLI with TypeScript pinned to 6 (Existing Web Apps), then initialize with the Framework7 572,986 build folder as webDir:

Adding Capacitor to the Framework7 projectShell

npm install @capacitor/core @capacitor/android \
  @capacitor/app @capacitor/camera @capacitor/geolocation
npm install -D @capacitor/cli typescript@6
npx cap init BookNest com.example.booknest --web-dir www

Output

✔ Creating capacitor.config.ts in /home/dev/lane-ch4/demo412 in 7.31ms
[success] capacitor.config.ts created!

Leaving out @capacitor/android is easy, and the next step then stops with Could not find the android platform. You must install it in your project first, which happened on the first attempt here. The generated capacitor.config.ts holds just appId, appName and webDir: 'www'; Device, UI and System Plugins later added the plugin settings for the splash screen, status bar and keyboard (Plugin Configuration).

The one source change is the service worker. The app's page comes from https://localhost (Local Schemes), so the protocol test of Service Worker would register it on the phone too, adding a second cache in front of files that are already local, which could keep serving an old version after an app update. So app.js skips it on native platforms:

src/js/app.js: no service worker inside the native appJavaScript

  serviceWorker: process.env.NODE_ENV === 'production' && location.protocol.startsWith('http')
    && !Capacitor.isNativePlatform() ? { path: '/service-worker.js' } : {},

Capacitor 243,123 is imported from @capacitor/core at the top of the file (Framework7's app.device.capacitor would work as well). The PWA still registers the worker.

MENU