Using Capacitor in a Web Project

Capacitor fully supports traditional web and Progressive Web Apps. In fact, using Capacitor makes it easy to ship a PWA version of your iOS and Android app store apps with minimal work.

Installation

Chances are, you already have Capacitor installed in your app if you're using Capacitor to build an iOS, or Android app. In capacitor, the web platform is just the web project that powers your app!

If you don't have Capacitor installed yet, consult the Installation guide before continuing.

Using Capacitor as a Module

Generally, apps will be using a framework with a build system that supports importing JavaScript modules. In that case, simply import Capacitor at the top of your app and you're set:

import { Capacitor } from '@capacitor/core';

To use a plugin, import Plugins and call it, noting that only plugins with web support will actually provide useful functionality:

import { Plugins } from '@capacitor/core';

const position = await Plugins.Geolocation.getCurrentPosition();

Using Capacitor as a Script Include

To use Capacitor core in a web app that is not using a build system or bundler/module loader, you must set bundledWebRuntime to true in your capacitor.config.json, tell capacitor to copy the specified version of Capacitor Core into your project, and then import capacitor.js into your index.html:

{
  "bundledWebRuntime": true
}

Copy to your project:

npx cap copy web

In index.html, import capacitor.js before your app's JS:

<script src="capacitor.js"></script>
<script src="your/app.js"></script>

Developing your App

Chances are, you're using a framework like Ionic for UI components and building. To develop your Capacitor web app, just use your framework!

If you're not using a framework, Capacitor comes with a small development service with HTML5 routing support. To use it, run:

npx cap serve

Going Live

When you're ready to publish your Progressive Web App and share it with the world, just upload the contents of your web directory (for example, the www/ or build/ folder).

That will contain everything you need to run your app!