Capacitor website
Home Page: https://capacitorjs.com/
License: MIT License
The official Capacitor site, built with Stencil.
Install the latest versions of Node and npm.
Once npm is install, run
npm install
npm run build
npm run start
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.
Obligatory "not sure if this should go here" remark goes here.
Hi,
Would you consider making the blog available via RSS (or Atom)?
This makes consuming your news a lot easier for me, and I guess some other users out there as well.
Thanks for considering!
I am interested in using this for a React project. I am a fan of leveraging hot reloading with a dev server and am trying to figure out how to point to my assets served up in a dev server in development when targeting Android and iOS. AFAIK the only thing I can do is point to files in webDir and nothing else.
There isn't a possibility to set an image preview when using this functionality on iOS. There is always the "T" icon.
I discovered from trial, error, and research that Capacitor will attempt to inject itself into the head element of the HTML page, as discussed in the following places:
I encountered this behavior when migrating a small test app from Cordova to Capacitor.
I had originally proposed an update in ionic-team/capacitor#3024, will recreate it in this repo. Sure beats the manual injection requirement of Cordova.
Start on any given docs page: https://capacitorjs.com/docs/apis/share
The tab says "Share - Capacitor" as it should.
Navigate to a different page, like https://capacitorjs.com/docs/guides/live-reload. Tab title should change to "Live Reload - Capacitor" but instead it remains the same.
Good day. I'm trying to implement a custom action button with a label Mark as read but following through the docs and a bit of research failed me to implement it. I found the registerActionTypes() method on the docs but I don't have any idea how to use it. I also found actionTypeId but then again, I don't know how to use it.
I hope it will be added in the documentation. Thanks!
There are visible merge conflicts in this file, I noticed it in a recent PR when it showed up in a diff, but they were there prior to my PR as well.
capacitor-site/dist/hydrate/index.js
Line 8798 in e2fc19f
I don't know what issues this causes.
Currently, each Capacitor API page uses plain text labels to designate platform support, such as: “pwa iOS android electron".
Suggestion to make it more visible and obvious to developers looking to implement the API would be to use image icons instead. On hover, display the platform name as a tooltip.
We shouldn't document import { Plugins } from '@capacitor/core', instead we should document importing from the plugin directly.
Capacitor Camera Documentation has link that result in "Page Not Found". This is in the Example Guides section.
In example, changing the app ID shouldn't be done in the AndroidManifest.xml
https://capacitorjs.com/docs/android/configuration#changing-app-id
The app ID is generated from applicationId field in App's build.gradle, so changes in AndroidManifest.xml result in value being restored after gradle sync.
https://capacitorjs.com/docs/apis/modals#type-162647
I set up an alert and confirm prompt, and the titles, if i put whatever, always showing "ALERT" or "CONFIRM" text! It doesn't use the string i'm putting there, it should be fixed
With the background task documentation:
"
// In this function We might finish an upload, let a network request
// finish, persist some data, or perform some other task
"
How? In that example, the function is only executed when the app's state changes and the task is executed on the 'beforeExit' event. So how would you get a handle on let's say an observable http request in angular, and ensure execution continues until that's complete? Now matter how I seem to write it, it either doesn't run or the app doesn't continue in the background. (I'm trying to finish a http synchronisation operation in the background). I'm trying it on ios.
Would it be possible to incorporate an angular example with a http request that's been executed by a button that needs to complete?
From the landing page, click on the features in the top bar: https://capacitorjs.com/#features
Notice it doesn't move down at all. Ben would like it to link here:
However, this might be kind of confusing imo since there is no actual word "Features" anywhere.
In "Using Capacitor with Ionic" page https://capacitorjs.com/docs/getting-started/with-ionic, the latest link in the page:
Want to start using Capacitor in an Ionic app immediately? Check out this guide.
links to https://capacitorjs.com/docs/guides/ionic-framework-app --> "Page not found"
Browser: Vivaldi (Chromium-based)
The right-side quick nav for in-document navigation is not scrolling to the correct position in the document. Clicking on the links does in fact update the URL, but the document will be scrolled to the top, rather than scrolling to correct section.
Directly navigating to a section works correctly (see this example link: https://capacitorjs.com/docs/guides/push-notifications-firebase#prerequisites ) but if you attempt to use the right-nav for any other links, it immediately jumps to the top.
Add the ability to close the docs menu when clicking on the content instead of only clicking the X on mobile.
Hey!
I used to make ionic app (since v2) using cordova/phonegap but I recently decided to move to capacitor with ionic 4. I need to implement a custom plugin so I followed the step described in the doc:
https://capacitor.ionicframework.com/docs/plugins/android#export-to-capacitor
I'm stuck with the plugin export. How do I make the plugin accessible from the main application. I mean I referenced my custom plugin the MainActivity.java but it cannot be found indeed. I need some extra step that help me to understand how to link the plugin to the app project.
I know this question could be related to native development but I think there are many people in my case (from a Ionic/Cordova background) who will have to learn how to make their own plugins using capacitor. I think just one sentence or two with the proper key words can be very helpfull.
Could you please give me some instruction to help to figure out how to do it?
Regards,
FF
Similar to the plugin/API docs, CLI docs should be split out to its own section.
When visiting https://capacitorjs.com/docs and choose Guides -> Splash Screens and Icons from the sidebar it gives a white page. The other pages seem to work well.
status bar on ios is not working properly, observing exactly opposite results in terms of colors
when setStyle is light its turning dark and vice versa.
Video demo, code
Since Bionic seems to be dead and hasn't been updated, it would be nice to see documentation and maybe even a simple js script that enables a few things on Blazor.
I've been able to get Blazor running in capacitor for android, electron, pwa (and I think ios but that's more difficult to test) by hacking away at Android files. It would be nice if this was formalized into complete documentation.
The biggest issue that I've had is the authentication functionality in Blazor Wasm. It of course works one web, but I can't come up with any process that allows the authentication system to work properly. I can get it to redirect back to a custom URL but I can't get it to reliably then pass through to blazor for handling. If this functionality was enablable, there would a signficant win and we'd be close to a complete blazor solution with minimal extra code to do.
Here's some of what I've found:
Android settings in capacitor.config.json needs an option where you can specify either that it's a blazor app, or that underscores need to be allowed in assets (I assume just making this the default might break some stuff but I don't know how, so if making it the default works, that would be a good thing)
Blazor itself needs a publish to folder profile setup in visual studio or vs code that publishes to a folder than capacitor is using. IN that you need to add the following under the property group:
<BlazorEnableCompression>false</BlazorEnableCompression>
<BlazorWebAssemblyEnableLinking>false</BlazorWebAssemblyEnableLinking>
Blazor should be updated (and I have yet to figure out how) to call npx cap sync automatically on publish.
And then blazor needs some sort of stub functionality (perhaps a nuget package for Capacitor.Blazor?) that adds the javascript and hooks on load/url that properly passes the response from your OpenIdConnect IdP back into Blazor from the custom schema handler.
If this was done, we would have a basically working blazor environment.
The only other thing that I think needs to be worked on is getting the electron side to do refreshes properly.
I haven't tested iOS heavily but presumably the same OpenIdConnect/Authentication issue exists there and needs to be handled properly.
Presumably this would be broken into separate issues based on each of the points above, but I wanted to capture the full request here.
Blazor
Android
Electron
In example, Geolocation plugin has
getCurrentPosition(options?: GeolocationOptions): <GeolocationPosition>
both GeolocationOptions and GeolocationPosition appear as links, but they just scroll up because there is no information about them in the page.
When you open a link like https://capacitor.ionicframework.com/docs/basics/opening-native-projects the page is opened with the page highlighted in the navigation, but then the page "redisplays" and when that happened the page does not get highlighted in the navigation on the left. Only after navigating to a new page you get the highlight for the active page again.
(FF67 on Win10)
Can be reproduced on Safari on desktop in responsive design mode, or on an iPhone.
The init command will be removed in Capacitor 3 (see ionic-team/capacitor#3440) and we need to document strategies for integrating it with existing apps.
This is something Ben mentioned, get with him to decide on a new design
The method docs and such are very thin
Seems between large and medium viewport widths the content area does not shrink, causing the right column to be cut off (Firefox):
This one needs discussion since there are some people against doing this.
Some example script tags are not properly escaped and therefore invisible to the user (and are actually loaded).
npx cap doctor output:
npm --version output:
node --version output:
pod --version output (iOS issues only):
Looking at the docs for Android plugins and I see a call for success and resolve but I'm not sure if they are interchangeable or if they serve different purposes.
https://capacitor.ionicframework.com/docs/plugins/android
Just a documentation update, I'd be willing to do a PR on it but I'm not sure what to say.
In the docs, the documentation on the push-notification page isn't correct. It shows contents of the share. I tried to reload the page with the push notification url and it worked though. But using the back and next buttons don't show the actual content
Most plugin docs have an Example section, and every one of them is different.
async methodName, which is not proper javascript https://capacitor.ionicframework.com/docs/apis/filesystem#exampleThe docs should be consistent in the code samples
I believe a section to the documentation for Capacitor JS should be added to explain how to get setup with the Electron platform as I can't seem to find anything listed here: https://capacitorjs.com/docs/web
Electron
I think a new section should be added
Navigating doc links, can't open a new tab by CMD+Clicking one of the side nav items
The site fades in from a translucent black whenever navigating from home to docs or vice versa.
import { Plugins } from '@capacitor/core';
const { LocalNotifications } = Plugins;
const createNotification = async () => {
const notifs = await LocalNotifications.schedule({
notifications: [
{
title: "Title",
body: "Body",
id: 8,
schedule: {
at: new Date(Date.now() + 1000 * 5)
},
sound: null,
attachments: null,
actionTypeId: "",
extra: null
}
]
});
//console.log('scheduled data', mySchedule);
console.log('scheduled notifications', notifs);
}
This is not scheduling any notification in iOS. I have not tried in other device. But in iOS it is not working.
This page is unreadable on my iPhone:
https://capacitorjs.com/docs/apis/camera
I can't even "pinch" it small enough to be readable.
Also, on my web browser, when I went to click "submit an edit", I was taken to a 404 page:
Hello,
Trying to show through PWA on Android/iOS and cannot see anything, neither on web
Thank you
The following data needs to be pulled in from GitHub on build. We can follow how we did this on the framework site. Right now this is hardcoded.
every docs page have a "submit and edit" button that points to capacitor repository, which no longer have the site in it, should be updated to point to the new location
The scrollbar has a gap between the menu edge and it:
Click entries in Table of Contents, the anchor links don't work
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.