The essential news about content management systems and mobile technology. Powered by Perfect Publisher and XT Search for Algolia.
The News Site publishes posts to the following channels: Facebook, Instagram, Twitter, Telegram, Web Push, Tumblr, and Blogger.
“That’s one small step for [developer], one giant leap for [Capacitor development].”
- Neil Armstrong
- Michael Scott
- The Ionic Team
To date, Capacitor has served as proof of what is truly possible for building mobile apps with web technologies. As we look forward to many more exciting enhancements ahead, one thing remains clear – you can truly build anything with the right set of tools.
So we want to make it easier to find those tools.
We’re excited to announce a monumental stride in the Capacitor journey – an all-new Plugin Registry. With a focus on empowering the community, the registry is a new window to plugin discovery, supplying developers with the tools they need to build world-class applications with Capacitor.
Capacitor is a renowned open-source native runtime that enables web developers to build native apps. It empowers them to craft versatile applications for iOS, Android, and the web, all from one consolidated codebase.
One of the standout features of Capacitor is its ability to tap into the native device functionalities through an extensive library of plugins. These plugins form a vital pillar of the Capacitor ecosystem, enabling developers to incorporate a wide array of native device capabilities directly into their applications, ranging from geolocation services to camera functionality.
As the number of plugins for Capacitor continues to grow, finding the right plugin can be a challenge. Developers often need to spend time digging through Google search results, across various Github repositories and NPM packages to find plugins that fit their needs. That is often followed by time spent analyzing plugin compatibility, reviewing the plugin’s stability, and checking its current support status. This process is time-consuming and, in some cases, a stumbling block for developers, particularly those new to Capacitor.
By introducing a centralized repository of plugins, we aim to streamline plugin discovery, saving time and effort that would be better spent developing the application itself. This registry will also strengthen the ecosystem by ensuring higher quality plugins are easily accessible to all, fostering better community collaboration and knowledge sharing.
The new Plugin Registry is a database with over 1100 plugins that are compatible with Capacitor projects, complete with detailed information about each plugin. The registry is designed with an API-first approach, a strategy that highlights the interoperability of the registry, enabling developers and applications to directly consume the information through the open API. All of the details about each plugin, such as its compatibility and rating, are readily accessible through this API providing a comprehensive and usable data source.
We are excited to showcase the first consumer of this API is none other than the Ionic VS Code extension. The extension’s integration with the Plugin Registry API offers developers an enhanced, seamless, and efficient development experience. By incorporating the plugin registry search directly into the developer’s IDE, we can aid in reducing time spent searching for the right plugins and helping developers focus more on building amazing cross-platform applications.
The registry is available in the latest version of the
extension. To access the registry, press F1
and type
plugins
or click the “3-dot menu” next to
Plugins
in the extension menu.
And then see all the results available to you and install plugins directly from this interface.
Open source software runs in our veins and this plugin registry is no different. This project is open to developers who are interested in contributing and shaping the future of the Capacitor ecosystem. Whether it’s adding new plugins to the registry, enhancing the existing ones, or improving the underlying API, your input can make a significant difference.
Check out the code on Github and let’s make something amazing together.
The post A New Capacitor Plugin Registry for Enhanced Discoverability appeared first on Ionic Blog.
Read more https://ionic.io/blog/a-new-plugin-registry-for-enhanced-discoverability
Hey folks! We’re excited to announce that Stencil v3.3.0 is
available! This release contains support for TypeScript 5, a new
way to run Puppeteer tests, and Node 20 support. Let’s take a
look!
Stencil v3.3.0 bumps up the version of TypeScript we support and bundle into the Stencil compiler from 4.9.5 to 5.0.4. TypeScript 5 was a big milestone for the TypeScript team, bringing some incremental updates as well as a major refactor of how TypeScript is built and bundled. Although upgrading Stencil to support TypeScript 5 was a bit involved, the changes we made to support it should make it easy for us to stay on track going forward and meet our pledge to stay within one minor version of the latest version of TypeScript.
For more on TypeScript and Stencil see our support policy.
Stencil v3.3.0 adds support for Puppeteer v20, the latest release from the Puppeteer team. The latest versions of Puppeteer have introduced support for Chrome’s new “headless mode”. At this time, using Chrome’s new headless mode is an “opt-in” feature for Stencil users. Upgrading to Stencil v3.3.0 won’t force projects to use the new headless mode until they’re ready to do so.
import { Config } from '@stencil/core';
export const config: Config = {
testing: {
/**
* The following values are accepted:
* - "new" - enables the "new" headless mode, starting with Chrome 112
* - `true` - enables the "old" headless mode, prior to Chrome 112
* - `false` - enables the "headful" mode
*
* Stencil will default to `true` (the old headless mode) if no value is provided.
*/
browserHeadless: 'new',
// ...
},
// ...
};
For projects using the --headless
flag, the value
of “new” can now be provided to opt-in as well:
npx stencil test --e2e --headless=new
For more information on browserHeadless’ configuration, please see the documentation for testing configuration. For more information on the –headless flag, please see the Stencil CLI documentation.
Stencil v3.3.0 expands the range of support Node versions to include version 20. We don’t anticipate that upgrading to node 20 will cause any issues for users, so you should be able to start using node 20 without issues.
For more information about Stencil’s node support check out our support policy.
This release of Stencil includes additional bug fixes and internal upgrades. For a full list of changes, please take a look at the changelog for this release.
The post Announcing Stencil v3.3.0 appeared first on Ionic Blog.
Read more https://ionic.io/blog/announcing-stencil-v3-3-0
Earlier this year, we communicated our plans to phase out the Ionic Worldwide Slack channel in favor of alternate, more-popular channels like the Ionic Discord and the Ionic Forum. The Ionic Worldwide Slack instance is going to be shut down at the end of the day on April 18th.
While we understand that some of you may be sad about this, we want to assure you that this decision is ultimately in the best interest of the community. Rather than having the community split into various channels, we’ll be consolidating our efforts into a single platform – our Discord server.
Our Discord server provides a centralized hub for sharing, discussions, Q&A, and announcements related to Ionic. We believe that focusing on this channel will help streamline communication and create a more cohesive community experience.
To join our Discord server, please follow these steps:
We’re extremely proud of the community we’ve built over the years, and we look forward to connecting with you on Discord.
See you there!
Sincerely,
The Ionic Team
The post Ionic Slack: You Will be Missed appeared first on Ionic Blog.
Read more https://ionic.io/blog/ionic-slack-you-will-be-missed
A common misconception is that Capacitor ONLY works if you have a React, Vue, or Angular app, but did you know that it works for other frameworks as well? I recently began my journey into learning Sveltekit and discovered that Sveltekit apps can use Capacitor as well as be deployed to iOS and Android just like those other frameworks. Let’s take a look at how you can use Svelte with Capacitor and create cross-platform apps like you can with React, Vue, or Angular. A demo of the project can be found on GitHub.
What is Sveltekit? According to the Sveltekit website, it’s a UI framework that allows you to write concise components with HTML, CSS, and JavaScript built on Svelte and Vite. It’s a completely free open-source software that’s growing in popularity. While the Sveltekit team classifies it as a love letter to web development, I’ve recently discovered that it just might be crushing on cross-platform development with how easy it is to get it to work with Capacitor… (Don’t worry Sveltekit, your secret is safe with us).
Getting a Sveltekit project setup is incredibly simple. Just start with creating my-app:
npm create svelte@latest my-app
Select Skeleton Project and select Yes, using TypeScript syntax if you are using TypeScript:
When prompted for additional options, I selected Add ESLint for code linting but select the option that’s best for your project:
Once that is completed, we’ll need to go into the app directory and install all the boilerplate libraries:
cd my-app
npm install
Then open the project in your IDE of choice and run the project from the built-in terminal:
npm run dev -- --open
This should open up the application on https://localhost:5173/:
Once you have your Sveltekit project, we’ll need to get Capacitor running with the default Sveltekit project by installing @capacitor/core, @capacitor/cli, @capacitor/geolocation (we’ll be using geolocation later) and create the config (I’m using the default options so make sure you adjust these to work for your project as they’ll likely vary when/if you get to mobile deployments):
npm install @capacitor/core @capacitor/cli @capacitor/geolocation
npx cap init
Once installed, we’ll need to build the web app to compile everything:
npm run build
With the build completed, let’s test add a native Capacitor call to our Sveltekit project by updating src/routes/+page.svelte file:
<script>
import { Geolocation } from '@capacitor/geolocation';
let loc = null;
async function getCurrentPosition(){
const res = await Geolocation.getCurrentPosition()
loc = res
}
</script>
<div>
<h1>Geolocation</h1>
<p>Your location is:</p>
<p>Latitude: {loc?.coords.latitude}</p>
<p>Longitude: {loc?.coords.longitude}</p>
<button on:click={getCurrentPosition}>
Get Current Location
</button>
</div>
<style>
div {
padding-top: 50px;
}
</style>
With the landing page updated, navigate back to https://localhost:5173/ and we should see the generic Geolocation page. If you click on Get Current Location in the browser, you should be prompted to share your location and you’ll get your current coordinates if you agree to share your location:
If you are just looking to integrate Sveltekit and Capacitor then you are done! However, if you want to take your Sveltekit projects to mobile then continue reading.
In order to get Sveltekit on mobile, we’ll need to make some changes to our project. First thing is to update our capacitor.config.ts file webDir config option to “build”. Why do we do this? When we alter our Sveltekit project, we’ll be turning it into a static application and it will build our application to a folder called build:
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'my-app',
webDir: 'build',
bundledWebRuntime: false
};
export default config;
Now that we’ve updated our Capacitor settings, let’s change out Sveltekit project to a static application by downloading the proper static adapter package:
npm i -D @sveltejs/adapter-static
After the package is installed, we’ll need to alter svelte.config.js file from the auto-adapter to static:
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter({
// default options are shown. On some platforms
// these options are set automatically — see below
pages: 'build',
assets: 'build',
fallback: null,
precompress: false,
strict: true
})
}
};
export default config;
With the svelte.config.js updated, we’ll need to add a prerender option by creating a +layout.js page to src/routes and just add the following export to +layout.js:
export const prerender = true;
After adding and updating the +layout.js page, we’ll need to add our mobile platforms, re-build our project to create the build folder, and sync our web app to Capacitor to get our mobile dependencies updated:
npm install @capacitor/android
npm install @capacitor/ios
npx cap add android
npx cap add ios
npm run build
npx cap sync
The next part is dependent on if you’ll be running Android, iOS, or both but you’ll need to configure the permissions to allow Geolocation to run on your device. For more information on native device permission, please visit the @capacitor/geolocation documentation. For Android, you’ll update the AndroidManifest.xml file at android/app/src/main/AndroidManifest.xml in your IDE and for iOS you’ll update the info.plist file once you open the project in XCode.
Open your Sveltekit project in iOS/Android:
npx cap open ios
npx cap open android
Run your emulator and your Sveltekit app will be running on mobile!:
While setting up Sveltekit with Capacitor may be different than React, Vue, or Angular it is entirely possible to make your Sveltekit project cross-platform. All it takes is a little configuration and a few minutes of your time to make your project work on the web or mobile. If you have any questions about getting your Sveltekit project set up with Capacitor feel free to ask the Ionic team at our official Discord server!
The post Cross-Platform Sveltekit & Capacitor Application: Yes It’s Possible! appeared first on Ionic Blog.
Read more https://ionic.io/blog/cross-platform-sveltekit-capacitor-application-yes-its-possible
In April 2022, Microsoft App Center deprecated Cordova support, a true sign of the waning popularity of the framework. Despite its decreasing popularity, and a shortening list of tools to support the development of apps with the SDK, it’s estimated that around 180 companies (including many fortune 500 companies) still use Cordova in their tech stack. With months of no updates, many are finding themselves looking for an alternative platform.
Enter Capacitor. Ionic’s open-source powerhouse is the perfect replacement for those looking to migrate from Cordova. Improved developer experience, consistency, and tons of support are just some of the highlights of Capacitor. But how can you tell that it’s time to make the switch?
Cordova iterates slowly and requires a set of plugins that exist solely to augment the build system. If a plugin author wanted to write Cordova plugins using Swift and Android X libraries, they’re out of luck because Cordova doesn’t support them out of the box. To solve this, “compatibility plugins” need to be created and used in addition to the functional plugins which require newer native compatibility. This means valuable development resources going toward creating these plugins or relying on the community.
Cordova also forces you to manipulate native projects through hooks, which can lead to writing a lot of scripts to make modifications. These scripts are often difficult to troubleshoot when changes occur to the native environment.
In contrast, Capacitor leverages native projects as a source artifact. This allows developers to make adjustments to the actual Android and iOS projects to enable capabilities such as Swift or Android X libraries without needing to create or use any compatibility plugins, additional unnecessary hooks, etc. Capacitor also doesn’t require creating native iOS and Android projects from scratch every time, saving development teams time and headaches. Ionic offers a core set of plugins that cover a range of common native API needs, and the community maintains a slew of other plugins to choose from. However, if you can’t find what you need, it’s simple to open the native project directly and implement that functionality or quickly build out your own plugin that can then be used in multiple projects.
Cordova works through an abstraction layer that manages the underlying native platform project and source files for you. This makes it harder to drop down to native code or work with a traditional native mobile development process. This can also result in custom changes being lost.
On the other hand, Capacitor apps are actual native apps, so a key design consideration is that Capacitor embraces native tooling. It enables teams that have a mixture of traditional native mobile and web developers to collaborate on mobile app projects without worrying about losing any changes. Developers can also quickly add custom native code for specific platforms and optionally expose that code to the Web layer, ensuring an app team never gets stuck when implementing new functionality.
If you’re handling sensitive data like personal information or financial data in your Cordova application, security may be a concern. The security posture of your application is ultimately left up to you, or the Cordova community, to maintain and update. This popular secure storage plugin was forked from the original in an effort to keep it updated but has since been left untouched for nearly three years (at the time of writing). There’s also a widely used biometric plugin that has sat idle for more than a year. Without SLAs to lean on, there is simply no guarantee that the plugins that your applications may rely on will remain up to date with the latest iOS and Android security policy changes.
With Capacitor, you have the option of leveraging plugins that were specifically designed for the platform, rather than relying on third party or home-grown solutions. With guaranteed SLAs, Ionic takes ownership of ensuring that Capacitor and Capacitor plugins meet the ever-changing security demands of development ecosystems.
When you build with Capacitor, you can also add on a slew of enterprise-grade features that ensure security is baked in from the outset of your project. Enterprise plugins, such as Auth Connect, provide enhanced security features which makes it easy to integrate with popular auth providers and custom solutions, from Azure AD to Auth0 and more. Meanwhile, Identity Vault allows you to add biometric protections to new or existing apps. Enterprise customers can also leverage Secure Storage, a powerful local database that makes it easy to encrypt, store, access, and manage data across all platforms.
If you’re already using our security solutions as part of a Cordova project, don’t worry – they work seamlessly with Capacitor, so migrating is a breeze.
Cordova projects tend to lack a fundamental piece of functionality: version control. When building with Cordova, your native projects are build artifacts that are generated with each build. As a result, modifications to the native projects need to be handled through obscure markup in an XML file or via code patching by way of Cordova hooks. Both of these methods are potentially fragile.
In addition, when developing with Cordova, it is common for developers to have to remove the native projects and regenerate them on a regular basis. Often a new plugin is added or changes are made to the config.xml file. Sometimes those changes are propagated to the existing native platforms and everything works fine. Other times, the native applications will behave oddly because changes were not propagated properly and developers need to completely remove the platforms as well as the plugin cache and regenerate them. The problem is the time wasted figuring out when they need to do this versus when they have another issue that needs to be addressed.
When building with Capacitor, your platforms are easily version controlled, allowing you to better manage projects if any errors do arise. This means a cleaner final product and less time and resources wasted during development.
Official support for Cordova ended back in 2020 when Adobe shut down PhoneGap. These days, Cordova is driven by volunteers that operate on a group consensus system. The open-source project is not driven by business goals nor do they prioritize the needs of any specific user.
Since Capacitor is a key aspect of Ionic’s mobile infrastructure and the infrastructure of its customers, security and functionality issues are discovered, fixed, and released quickly. There are teams of engineers, product managers, and customer success experts dedicated to customer and project success. Capacitor is currently used by thousands of developers worldwide with a robust community behind it.
Beyond Capacitor’s widespread community support, Ionic offers Enterprise Support and Advisory services for enterprises building mission-critical apps. With guaranteed response SLAs throughout the app lifecycle, our professional support team is on-hand to help you troubleshoot and address issues occuring at the native layer. Enjoy peace of mind knowing that you have a team of mobile experts with you every step of the way as you build out your next project.
While migration may seem intimidating, it’s not as difficult as you think. Capacitor has backwards compatible support for a large swath of existing Cordova plugins. Following migration, you can enjoy a smoother build process, improved developer experience, and better end product.
In short, you’ll first add Capacitor to your projects and modify them appropriately. Then, you’ll migrate your plugins, set permissions, and update your preferences. Lastly, you’ll set the scheme and remove Cordova from the project.
We wrote up a handy migration guide to walk you through the process, step by step.
If you still have questions, reach out to us for Support and Advisory services and we can provide bespoke suggestions for your app needs.
The post Signs It’s Time to Migrate Your Cordova App appeared first on Ionic Blog.
Read more https://ionic.io/blog/signs-its-time-to-migrate-your-cordova-app