Details

Category: Developer News

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!

TypeScript 5 Support

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.

Puppeteer v20 Support

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.

Node 20 Support

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.

And More!

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

Details

Category: Developer News

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:

1. If you don’t have a Discord account, you’ll need to create one first.
2. Go to https://ionic.link/discord
3. Accept the invite to join our server.

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

Details

Category: Developer News

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.

Sveltekit

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/:

Capacitor

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.

Sveltekit On Mobile

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!:

Final Thoughts

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

Details

Category: Developer News

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? 

Are you frustrated with compatibility plugins?

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.

Do you wish your teams could work together seamlessly?

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.

Are your security plugins outdated?

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. 

Are you tired of having to add/remove platforms when errors occur? 

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. 

Do you wish you had some support?

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. 

Are you worried it’s too hard to migrate? (It’s not)

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