Home Page: https://capacitorjs.com/docs
License: Apache License 2.0
The official Capacitor documentation, built with Docusaurus. Based on the Ionic Docs
Install the latest versions of Node and npm.
Once npm is installed, run
npm install
npm run build
npm run serve
The site will launch in development mode.
Thanks for your interest in contributing! Read up on our guidelines for contributing.
Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Docs say that on Android 7+ chrome is used, but on Android 10+ Google switched to the System WebView again.
Also saying "chrome is used" is inaccurate as it's not really Chrome, but a WebView provided by Google chrome and that has caused confusion in some users, so we should specify.
to @capacitor team, I'd like to know what do you suggest if I am using private repo?
Our team is planning to use capacitor but I we have few issues facing with gradle dependencies.
Appreciate if you can give some suggestions. Thank you
URL
The URL at which the content is missing or inaccurate
What is missing or inaccurate about the content on this page?
There is no content displaying underneath the heading "Why am I getting CocoaPods errors on my Apple Silicon Device" within the Getting Started guide. I am expecting a section answering this question and for it to not be blank.
URL
The URL at which the content is missing or inaccurate
https://capacitorjs.com/docs/guides/splash-screens-and-icons
What is missing or inaccurate about the content on this page?
I was having trouble getting the Android app icon to update properly in an ionic-capacitor app and was following the instructions above.
Then I found these issues:
Which leads me to believe that this source file for the above doc page is outdated and should actually instruct the user to use capacitor-assets rather than cordova-res, correct?
If I'm correct in this assessment, I'll make the needed PR.
Describe the bug
Hello,
An error appears when I try to set the plugin @capacitor/motion.
To reproduce
Steps to reproduce the behavior:
www and ìos`npm install @capacitor/motion npx cap syncapp.component.tsngOnInit(), add the method to request the permission `await DeviceMotionEvent.requestPermission();``requestPermission): Property 'requestPermission' does not exist on type '{ new (type: string, eventInitDict?: DeviceMotionEventInit): DeviceMotionEvent; prototype: DeviceMotionEvent; }'Screenshot
Expected behavior
Don't have any error when I try to setup the plugin following the instructions.
Browser and OS (please complete the following information)
Thank you for your help,
Loïc
URL
https://capacitorjs.com/docs/updating/5-0#disable-jetifier
What is missing or inaccurate about the content on this page?
The upgrade guide tells you to disable Jetifier imperatively. This is wrong, because disabling Jetifier for projects that use old Cordova plugins results in multiple errors while building the app in Android Studio. At least, the guide should suggest to make a check before disabling Jetifier.
Hi,
I'm struggling to create a plugin with ios. Despite the documentation https://capacitorjs.com/docs/plugins/ios, I cannot run a plugin that present a new viewController. I tried with storyboard (inside the plugin), with xib files, but I cannot reach the goal.
I opened a stackoverflow https://stackoverflow.com/questions/64693531/new-view-in-ios-with-capacitor-plugin
I think it would be great to improve the doc, with an example with a xib and storboard file. Because not all capacitor developpers know very well the ios native development (this is my case)
Or if usage of storyboard or xib is not possible in a plugin, then mention it in documentation
Describe the bug
No problems building the app in Android studio, build error shows up running --livereload in VScode
To reproduce
Steps to reproduce the behavior:
Expected behavior
I expect to build and run the app also via VScode using "ionic cap run android --l" command
Screenshots
VScode terminal output:
Android studio build successfully:
Android studio configs:
Browser and OS (please complete the following information)
Additional context
Thank you for any help, I'm looking for a solution for days trying to change JDK (1.7 and 1.8) and gradle versions (7.6.1 and 8.0) but the result is always the same.
P.S. I was following this video course, the steps are the same except the installation of the software (not shown in the video) https://www.youtube.com/watch?v=K7ghUiXLef8
Most apps I build with Capacitor have a landing page + the app itself.
When I ship the app, I wish it would directly load the app.html or dashboard.html instead of the index.html (the landing page, usually)
For now, I do some routing in useEffect as a fix. But the user sees the landing page for a few ms.
It would be dope to be able to choose which HTML file the app opens.
Thanks!
See conversation here: ionic-team/capacitor#5192
https://capacitorjs.com/docs/guides/push-notifications-firebase
What's about Firebase push notifications and PWA ?
URL
https://capacitorjs.com/docs/guides/autofill-credentials#configuration-for-android
What is missing or inaccurate about the content on this page?
While the Android configuration is correct, and was enough, the feature is not working*, and should be marked as is.
Describe the bug
The Update kotlin_version title in Updating plugins to 5.0 page is shown in markdown format.
To reproduce
Steps to reproduce the behavior:
### Update kotlin_version title is shown in markdown formatExpected behavior
The ### Update kotlin_version should be shown as a HTML title (should be same as the Update to Java 17 title above).
Screenshots
Browser and OS (please complete the following information)
Additional context
Somehow, only this title is not being converted to HTML and is shown in markdown format.
When I tried to implement my own plugin I just copied and paste all code from example
https://capacitorjs.com/docs/android/custom-code
But seems this call.resolve(ret) does not work, and I could not get any data in my js file. Did I miss something?
Hello
In the workflow section of the v2 doc, the npx cap doctor command was briefly presented :
https://github.com/ionic-team/capacitor-site/blob/main/pages/docs/v2/basics/workflow.md
This is not the case anymore in the v3 version of the same document:
https://github.com/ionic-team/capacitor-site/blob/main/pages/docs/v3/basics/workflow.md
Does it mean that the doctor command is now deprecated? Or should we document back this command in v3 docs?
Thanks
The Josh Morony’s wonderful guide (which is really wonderful), sadly accumulated some issues:
💊 Capacitor Doctor 💊
Latest Dependencies:
@capacitor/cli: 5.7.1
@capacitor/core: 5.7.1
@capacitor/android: 5.7.1
@capacitor/ios: 5.7.1
Installed Dependencies:
@capacitor/cli: 6.0.0-rc.0
@capacitor/core: 6.0.0-rc.0
@capacitor/android: 6.0.0-rc.0
@capacitor/ios: 6.0.0-rc.0
[success] iOS looking great! 👌
[success] Android looking great! 👌
npm 10.2.4
node v20.11.1
pod 1.14.3I was trying Capacitor 6 today and just discovered that the local Echo plugin from the tutorial is not working (https://capacitorjs.com/docs/ios/custom-code). If I rollback to Capacitor 5.7.1 it works as usual.
Note: I'm using it directly through window.Capacitor.Plugins.Echo (which is now undefined).
Note 2: Another plugin installed and created with https://github.com/ionic-team/create-capacitor-plugin works fine.
Note 3: On Android is working well.
Plugin invocation should work as described in the docs.
N/A
No response
URL
https://capacitorjs.com/docs/guides/deep-links#create-site-association-file
What is missing or inaccurate about the content on this page?
First, thank you for Capacitor and for great docs! I make this suggestion uncertainly, so please accept in that spirit.
In the apple site association file, the doc uses the syntax for details of associating to each appID a paths property which contains URL's. And, I can find this syntax in an archived document from the Apple Developer Library.
Ex.
{
"applinks": {
"details": [
{
"appID": "TEAMID.BUNDLEID",
"paths": ["*"]
}
]But in what seems to be the latest and greatest docs from Apple, they use a whole different syntax for details, which associates components instead of paths. Components are pattern matchers that seem to logically serve as an alternate to a simple path, but more flexibly and powerfully.
Ex.
{
"applinks": {
"details": [
{
"appIDs": [ "ABCDE12345.com.example.app", "ABCDE12345.com.example.app2" ],
"components": [
{
"#": "no_universal_links",
"exclude": true,
"comment": "Matches any URL with a fragment that equals no_universal_links and instructs the system not to open it as a universal link."
}
]Source(s):
In all of those documents, I see the component syntax consistently repeated, and no evidence that a paths syntax is operative, at least not in recent versions of iOS.
Again, I am totally new to this topic, and am learning it by working through your excellent guide, so it's entirely possible I'm missing something. But... when I use the paths syntax with iOS 14... I can't get it to work. So, I checked the Apple docs, and found what seems like a mis-match in the API... Please share feedback about whether this is a valid point or noob confusion. Thanks!
What is missing or inaccurate about the content on this page?
The React docs state that the association files should be hosted under the public folder (domain.com/public/.well-known). But when done so, the online validators and the operating systems don't pick up the files.
Moving the files to the root (domain.com/.well-known) ensures the files are properly read and only then the deep links start working (verified both on Android and iOS).
Online validators used:
P.S.: A big thank you to the entire Ionic and Capacitor team for making a complex topic like Deep links so easy to understand and implement!
URL
https://capacitorjs.com/docs/cli/commands/build
OR
https://github.com/ionic-team/capacitor-docs/blob/main/docs/cli/commands/build.md
What is missing or inaccurate about the content on this page?
Hi,
I guess there is a missing documentation regarding the creation of a Android 11+ compatible version of an apk. I would like to create a Android apk file which is correctly signed. This can be done with using the apksigner. So i used this command:
npx cap build android --keystorepath keystore.jks --keystorepass keystorepass --keystorealias keystorealias --keystorealiaspass keystorealiaspass --androidreleasetype APK
It will create an apk which can not be installed on Android 11+ because it uses the jarsigner as default instead of the apksigner. Regarding a PR in the capacitor repo here: ionic-team/capacitor#6442 @markemer has mentioned in this comment ionic-team/capacitor#6442 (comment) that one has to use --signing-type apksigner in order to create an android 11+ compatible version.
But this is not documented and it would be helpful to clarify this.
It would be beneficial to provide documentation around how developers can bundle third-party dependencies within their plugins, such as how to add Pods for iOS.
URL
Capacitor Official Plugins HTTP
What is missing or inaccurate about the content on this page?
I only found the issue at Android platform. The API server does not receive JSON data if you try to request it without explicity send header Content-Type application/json.
I have read the Java base code and it actually skips the process of writing data if you try to request data without Content-Type header.
If you want to send data JSON with Android platform, you need to add header Content-Type with application/json like this.
const ret = await CapacitorHttp.post({
...
data: {
message: 'Hello World!'
},
headers: {
"Content-Type": "application/json"
},
...
});For other type of data, if I had time, I would try one by one.
I just realised that in some parts of capacitor 5 documentation there are outdated info
Eg importing plugins like status bar
Instead of import {Camera} from "@capacitor/core"
Its still
import {Camera} from "@capacitor/camera"
Advice if thats correct
Is your feature request related to a problem? Please describe.
I want to share with the community a template I developed myself.
Describe the solution you'd like
Add a section Community Templates/Recipes
Additional context
Page - Recipes
The documentation for CapacitorCookies at https://capacitorjs.com/docs/apis/cookies does not mention the getCookies plugin call.
All
Add the getCookies plugin call to the documentation at https://capacitorjs.com/docs/apis/cookies
URL
The URL at which the content is missing or inaccurate
https://next.capacitorjs.com/docs/plugins/tutorial/android-implementation#register-the-plugin-with-capacitor
What is missing or inaccurate about the content on this page?
registerPlugin should now be called before super.onCreate instead of after
Bachground:
There are some things within the SDKs of Android and iOS and also the capabilities of the Webviews which make it necessary to implement a plugin for one platform und use the web version for the other.
e.g. iOS has a great PDFKit SDK and and the same time a bad pdf implementation in the Webview (yes, pdf.js is not very great as well, some edge cases are not working at all and the performance is bad)
Android is good enough with the build in viewer.
Propose:
Document how to create such plugins.
You have to include the web part in the index.ts
const CustomPlugin = registerPlugin< CustomPlugin >('Custom', {
android: () => import('./web').then(m => new m.CustomWeb()),
web: () => import('./web').then(m => new m.CustomWeb()),
});
And in this case remove android from the capacitor property of the package.json
Here in doc written about saving call
How about getting this saved call?
We should add a debugging guide to the docs much like Ionic has: https://ionicframework.com/docs/troubleshooting/debugging
Method Types page contains incorrect information.
The Void Return section is incorrect, PluginMethod.RETURN_NONE returns nothing, not a promise.
method1(): Promise<void>; should be changed to method1():void; and the texts need to change accordingly to not say it returns a promise, and maybe add an example of returning a void promise.
URL
Configuration Values > Accessing Configuration Values
For iOS, use the getConfigValue() method:
if let style = getConfigValue("style") as? String { // Set the style }
What is missing or inaccurate about the content on this page?
Docs encourage use of getConfigValue method for iOS platform, but it has been deprecated in Capacitor 4.0.0-beta.0 here: ionic-team/capacitor#5495
Documentation should be updated for v4, v5 and v6 to use getConfig() method, I'd say there doesn't have to be a distinction between iOS and Android platforms
For reference I found a commits with migration getConfigValue -> getConfig in
@capacitor/splash-screen repo: https://github.com/ionic-team/capacitor-plugins/pull/962/files@capacitor/push-notifications repo: ionic-team/capacitor-plugins@aa623ebhttps://capacitorjs.com/docs/apis/geolocation
The URL at which the content is missing or inaccurate
What is missing or inaccurate about the content on this page?
It is indicating to add NSLocationAlwaysUsageDescription (Privacy - Location Always Usage Description) to Info.plist but NSLocationAlwaysUsageDescription is deprecated since ios 11 as stated here https://developer.apple.com/documentation/bundleresources/information_property_list/nslocationalwaysusagedescription and at the same Apple page it is suggesting to use NSLocationAlwaysAndWhenInUseUsageDescription. The same suggestion is made at the related cordova location plugin NSLocationAlwaysUsageDescription describes the reason that the app is requesting access to the user's location at all times. Use this key if your app accesses location information in the background and you deploy to a target earlier than iOS 11. For iOS 11 and later, add both NSLocationAlwaysUsageDescription and NSLocationAlwaysAndWhenInUseUsageDescription to your app’s Info.plist file with the same message..
NSLocationAlwaysUsageDescription is deprecated since ios 11 and Capacitor minimum required iOS version is 13.
Am I missing something?
Thanks.
URL
https://capacitorjs.com/docs/v2/plugins/android#export-to-capacitor
What is missing or inaccurate about the content on this page?
It is still using an out-of-date function that no longer works.
this.init() should change to registerPlugin(FirebaseAnalytics.class);
capacitor-community/firebase-analytics#94
https://capacitorjs.com/docs/updating/3-0#switch-to-automatic-android-plugin-loading
If the type has a ?, it's not displayed, so it's not possible to know which params are optional and which ones are mandatory.
Docs should show the ? or some text that specify which one is optional and which one is mandatory.
After reading this thread, seems clear we should add lightweight info under iOS and Android sections detailing how to create an APK and IPA file, for upload & submission to the app stores.
Don't want to recreate too much, just add the basics here: https://capacitorjs.com/docs/ios/deploying-to-app-store.
URL
https://capacitorjs.com/docs/main/deployment/progressive-web-app
There are broken links and images for React & Angular on this docs page.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.