1 // 在項目根目錄下，安裝 capacitor
2 npm install @capacitor/core
3 npm install @capacitor/cli --save-dev
4  
5 // 安裝成功後，通過 capacitor 腳手架，確認 應用名稱、應用包名 
6 npx cap init

1 // 使用 “應用名、應用包名” 安裝和初始化 capacitor
2 ionic integrations enable capacitor
3  
4 // 安裝 ionic 必須的 capacitor 插件
5 npm install @capacitor/app
6 npm install @capacitor/haptics
7 npm install @capacitor/keyboard
8 npm install @capacitor/status-bar

1 import { CapacitorConfig } from '@capacitor/cli';
2 
3 const config: CapacitorConfig = {
4   appId: 'com.company.appname',
5   appName: 'My Capacitor App',
6   webDir: 'www',
7 };
8 
9 export default config;

1 export interface CapacitorConfig {
  2   /**
  3    * The unique identifier of your packaged app.
  4    *
  5    * This is also known as the Bundle ID in iOS and the Application ID in
  6    * Android. It must be in reverse domain name notation, generally
  7    * representing a domain name that you or your company owns.
  8    *
  9    * @since 1.0.0
 10    */
 11   appId?: string;
 12 
 13   /**
 14    * The human-friendly name of your app.
 15    *
 16    * This should be what you'd see in the App Store, but can be changed after
 17    * within each native platform after it is generated.
 18    *
 19    * @since 1.0.0
 20    */
 21   appName?: string;
 22 
 23   /**
 24    * The directory of your compiled web assets.
 25    *
 26    * This directory should contain the final `index.html` of your app.
 27    *
 28    * @since 1.0.0
 29    */
 30   webDir?: string;
 31 
 32   /**
 33    * Whether to copy the Capacitor runtime bundle or not.
 34    *
 35    * If your app is not using a bundler, set this to `true`, then Capacitor
 36    * will create a `capacitor.js` file that you'll need to add as a script in
 37    * your `index.html` file.
 38    *
 39    * @since 1.0.0
 40    * @default false
 41    */
 42   bundledWebRuntime?: boolean;
 43 
 44   /**
 45    * The build configuration (as defined by the native app) under which Capacitor
 46    * will send statements to the log system. This applies to log statements in
 47    * native code as well as statements redirected from JavaScript (`console.debug`,
 48    * `console.error`, etc.). Enabling logging will let statements render in the
 49    * Xcode and Android Studio windows but can leak information on device if enabled
 50    * in released builds.
 51    *
 52    * 'none' = logs are never produced
 53    * 'debug' = logs are produced in debug builds but not production builds
 54    * 'production' = logs are always produced
 55    *
 56    * @since 3.0.0
 57    * @default debug
 58    */
 59   loggingBehavior?: 'none' | 'debug' | 'production';
 60 
 61   /**
 62    * User agent of Capacitor Web View.
 63    *
 64    * @since 1.4.0
 65    */
 66   overrideUserAgent?: string;
 67 
 68   /**
 69    * String to append to the original user agent of Capacitor Web View.
 70    *
 71    * This is disregarded if `overrideUserAgent` is used.
 72    *
 73    * @since 1.4.0
 74    */
 75   appendUserAgent?: string;
 76 
 77   /**
 78    * Background color of the Capacitor Web View.
 79    *
 80    * @since 1.1.0
 81    */
 82   backgroundColor?: string;
 83 
 84   android?: {
 85     /**
 86      * Specify a custom path to the native Android project.
 87      *
 88      * @since 3.0.0
 89      * @default android
 90      */
 91     path?: string;
 92 
 93     /**
 94      * User agent of Capacitor Web View on Android.
 95      *
 96      * Overrides global `overrideUserAgent` option.
 97      *
 98      * @since 1.4.0
 99      */
100     overrideUserAgent?: string;
101 
102     /**
103      * String to append to the original user agent of Capacitor Web View for Android.
104      *
105      * Overrides global `appendUserAgent` option.
106      *
107      * This is disregarded if `overrideUserAgent` is used.
108      *
109      * @since 1.4.0
110      */
111     appendUserAgent?: string;
112 
113     /**
114      * Background color of the Capacitor Web View for Android.
115      *
116      * Overrides global `backgroundColor` option.
117      *
118      * @since 1.1.0
119      */
120     backgroundColor?: string;
121 
122     /**
123      * Enable mixed content in the Capacitor Web View for Android.
124      *
125      * [Mixed
126      * content](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content)
127      * is disabled by default for security. During development, you may need to
128      * enable it to allow the Web View to load files from different schemes.
129      *
130      * **This is not intended for use in production.**
131      *
132      * @since 1.0.0
133      * @default false
134      */
135     allowMixedContent?: boolean;
136 
137     /**
138      * This enables a simpler keyboard which may have some limitations.
139      *
140      * This will capture JS keys using an alternative
141      * [`InputConnection`](https://developer.android.com/reference/android/view/inputmethod/InputConnection).
142      *
143      * @since 1.0.0
144      * @default false
145      */
146     captureInput?: boolean;
147 
148     /**
149      * Always enable debuggable web content.
150      *
151      * This is automatically enabled during development.
152      *
153      * @since 1.0.0
154      * @default false
155      */
156     webContentsDebuggingEnabled?: boolean;
157 
158     /**
159      * The build configuration under which Capacitor will generate logs.
160      *
161      * Overrides global `loggingBehavior` option.
162      *
163      * @since 3.0.0
164      * @default debug
165      */
166     loggingBehavior?: 'none' | 'debug' | 'production';
167 
168     /**
169      * Allowlist of plugins to include during `npx cap sync` for Android.
170      *
171      * Overrides global `includePlugins` option.
172      *
173      * @since 3.0.0
174      */
175     includePlugins?: string[];
176 
177     /**
178      * Android flavor to use.
179      *
180      * If the app has flavors declared in the `build.gradle`
181      * configure the flavor you want to run with `npx cap run` command.
182      *
183      * @since 3.1.0
184      */
185     flavor?: string;
186   };
187 
188   ios?: {
189     /**
190      * Specify a custom path to the native iOS project.
191      *
192      * @since 3.0.0
193      * @default ios
194      */
195     path?: string;
196 
197     /**
198      * iOS build scheme to use.
199      *
200      * Usually this matches your app's target in Xcode. You can use the
201      * following command to list schemes:
202      *
203      * `xcodebuild -workspace ios/App/App.xcworkspace -list`
204      *
205      * @since 3.0.0
206      * @default App
207      */
208     scheme?: string;
209 
210     /**
211      * User agent of Capacitor Web View on iOS.
212      *
213      * Overrides global `overrideUserAgent` option.
214      *
215      * @since 1.4.0
216      */
217     overrideUserAgent?: string;
218 
219     /**
220      * String to append to the original user agent of Capacitor Web View for iOS.
221      *
222      * Overrides global `appendUserAgent` option.
223      *
224      * This is disregarded if `overrideUserAgent` is used.
225      *
226      * @since 1.4.0
227      */
228     appendUserAgent?: string;
229 
230     /**
231      * Background color of the Capacitor Web View for iOS.
232      *
233      * Overrides global `backgroundColor` option.
234      *
235      * @since 1.1.0
236      */
237     backgroundColor?: string;
238 
239     /**
240      * Configure the scroll view's content inset adjustment behavior.
241      *
242      * This will set the
243      * [`contentInsetAdjustmentBehavior`](https://developer.apple.com/documentation/uikit/uiscrollview/2902261-contentinsetadjustmentbehavior)
244      * property on the Web View's
245      * [`UIScrollView`](https://developer.apple.com/documentation/uikit/uiscrollview).
246      *
247      * @since 2.0.0
248      * @default never
249      */
250     contentInset?: 'automatic' | 'scrollableAxes' | 'never' | 'always';
251 
252     /**
253      * Configure whether the scroll view is scrollable.
254      *
255      * This will set the
256      * [`isScrollEnabled`](https://developer.apple.com/documentation/uikit/uiscrollview/1619395-isscrollenabled)
257      * property on the Web View's
258      * [`UIScrollView`](https://developer.apple.com/documentation/uikit/uiscrollview).
259      *
260      * @since 1.0.0
261      */
262     scrollEnabled?: boolean;
263 
264     /**
265      * Configure custom linker flags for compiling Cordova plugins.
266      *
267      * @since 1.0.0
268      * @default []
269      */
270     cordovaLinkerFlags?: string[];
271 
272     /**
273      * Allow destination previews when pressing on links.
274      *
275      * This will set the
276      * [`allowsLinkPreview`](https://developer.apple.com/documentation/webkit/wkwebview/1415000-allowslinkpreview)
277      * property on the Web View, instead of using the default value.
278      *
279      * @since 2.0.0
280      */
281     allowsLinkPreview?: boolean;
282 
283     /**
284      * The build configuration under which Capacitor will generate logs.
285      *
286      * Overrides global `loggingBehavior` option.
287      *
288      * @since 3.0.0
289      * @default debug
290      */
291     loggingBehavior?: 'none' | 'debug' | 'production';
292 
293     /**
294      * Allowlist of plugins to include during `npx cap sync` for iOS.
295      *
296      * Overrides global `includePlugins` option.
297      *
298      * @since 3.0.0
299      */
300     includePlugins?: string[];
301 
302     /**
303      * Sets WKWebView configuration for limitsNavigationsToAppBoundDomains.
304      *
305      * If the Info.plist file includes `WKAppBoundDomains` key, it's recommended to
306      * set this option to true, otherwise some features won't work.
307      * But as side effect, it blocks navigation outside the domains in the
308      * `WKAppBoundDomains` list.
309      * `localhost` (or the value configured as `server.hostname`) also needs to be
310      * added to the `WKAppBoundDomains` list.
311      *
312      * @since 3.1.0
313      * @default false
314      */
315     limitsNavigationsToAppBoundDomains?: boolean;
316   };
317 
318   server?: {
319     /**
320      * Configure the local hostname of the device.
321      *
322      * It is recommended to keep this as `localhost` as it allows the use of
323      * Web APIs that would otherwise require a [secure
324      * context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts)
325      * such as
326      * [`navigator.geolocation`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/geolocation)
327      * and
328      * [`MediaDevices.getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia).
329      *
330      * @since 1.0.0
331      * @default localhost
332      */
333     hostname?: string;
334 
335     /**
336      * Configure the local scheme on iOS.
337      *
338      * [Can't be set to schemes that the WKWebView already handles, such as http or https](https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/2875766-seturlschemehandler)
339      * This can be useful when migrating from
340      * [`cordova-plugin-ionic-webview`](https://github.com/ionic-team/cordova-plugin-ionic-webview),
341      * where the default scheme on iOS is `ionic`.
342      *
343      * @since 1.2.0
344      * @default capacitor
345      */
346     iosScheme?: string;
347 
348     /**
349      * Configure the local scheme on Android.
350      *
351      * @since 1.2.0
352      * @default http
353      */
354     androidScheme?: string;
355 
356     /**
357      * Load an external URL in the Web View.
358      *
359      * This is intended for use with live-reload servers.
360      *
361      * **This is not intended for use in production.**
362      *
363      * @since 1.0.0
364      */
365     url?: string;
366 
367     /**
368      * Allow cleartext traffic in the Web View.
369      *
370      * On Android, all cleartext traffic is disabled by default as of API 28.
371      *
372      * This is intended for use with live-reload servers where unencrypted HTTP
373      * traffic is often used.
374      *
375      * **This is not intended for use in production.**
376      *
377      * @since 1.5.0
378      * @default false
379      */
380     cleartext?: boolean;
381 
382     /**
383      * Set additional URLs the Web View can navigate to.
384      *
385      * By default, all external URLs are opened in the external browser (not
386      * the Web View).
387      *
388      * **This is not intended for use in production.**
389      *
390      * @since 1.0.0
391      * @default []
392      */
393     allowNavigation?: string[];
394   };
395 
396   cordova?: {
397     /**
398      * Populates <access> tags in the config.xml with the origin set to
399      * the values entered here.
400      * If not provided, a single <access origin="*" /> tag gets included.
401      * It only has effect on a few Cordova plugins that respect the whitelist.
402      *
403      * @since 3.3.0
404      */
405     accessOrigins?: string[];
406 
407     /**
408      * Configure Cordova preferences.
409      *
410      * @since 1.3.0
411      */
412     preferences?: { [key: string]: string | undefined };
413 
414     /**
415      * List of Cordova plugins that need to be static but are not
416      * already in the static plugin list.
417      *
418      * @since 3.3.0
419      */
420     staticPlugins?: string[];
421   };
422 
423   /**
424    * Configure plugins.
425    *
426    * This is an object with configuration values specified by plugin class
427    * name.
428    *
429    * @since 1.0.0
430    */
431   plugins?: PluginsConfig;
432 
433   /**
434    * Allowlist of plugins to include during `npx cap sync`.
435    *
436    * This should be an array of strings representing the npm package name of
437    * plugins to include when running `npx cap sync`. If unset, Capacitor will
438    * inspect `package.json` for a list of potential plugins.
439    *
440    * @since 3.0.0
441    */
442   includePlugins?: string[];
443 }
444 
445 export interface PluginsConfig {
446   /**
447    * Plugin configuration by class name.
448    *
449    * @since 1.0.0
450    */
451   [key: string]:
452     | {
453         [key: string]: any;
454       }
455     | undefined;
456 }