Details

Category: Developer News

In today’s mobile-first world, businesses need a robust mobile app strategy to reach and engage with their target audience. While native apps have traditionally been the go-to solution, progressive web applications (PWAs) have emerged as a compelling alternative, and may have you considering a PWA-first strategy.

PWAs offer a wealth of benefits, including increased reach, reduced development costs, and an improved user experience. However, PWAs are limited in their ability to access native device features and the end user experience can be significantly impacted when changes to the platforms they run on are introduced by Apple and Google.

So, given the limitations of PWAs, why should you consider including one in your mobile app strategy? To answer this question, let’s take a deeper look at the benefits that PWAs provide as well as their limitations.

Benefits of Building a PWA

Progressive Web Applications are an important tool for businesses looking to reach a wider audience with their mobile app. They offer a number of advantages over traditional native apps, including:

• Increased Reach: PWAs can be accessed from any device with a web browser, which means you can reach a broader audience than you could with a native app. Unlike native apps, which require users to download and install the app from an app store, PWAs can be accessed by simply visiting a URL in a web browser. This makes it easier for users to discover and try your app, and it eliminates the friction of having to download and install yet another app.
• Reduced Development Costs: PWAs are built using web technologies (HTML, CSS, and JavaScript), which means they can be developed faster and cheaper than native apps. A single codebase can be used to create a web app, a PWA, and even a native app (using tools like Ionic Capacitor, which we’ll discuss later). This can save businesses a significant amount of time and money in the development process while leveraging the team and skills they already have in-house.
• Improved User Experience: Users can enjoy a similar experience with a PWA as they would with a native app. They provide many of the same features as native apps, such as push notifications, offline functionality, and home screen icons. Additionally, PWAs can leverage the capabilities of the web browser to provide features that are not possible with native apps, such as the ability to work across different devices and platforms.
• Improved Discoverability: PWAs can be indexed by search engines, which means users can discover your app through organic search and you get maximum benefit from your SEO efforts. This is a major advantage over native apps, which can be difficult for users to find unless they know exactly what they are looking for.
• Reduced App Store Friction: Get your app in front of users faster than ever. Because they’re not part of any app store, PWAs bypass the app store approval process, which can be a time-consuming and frustrating experience for developers. 
• Offline Functionality: PWAs can be designed to work offline, which means that users can still access some of the app’s features even when they don’t have an internet connection. This is a valuable feature for users who may be in areas with spotty internet coverage.
• Faster Load Times: PWAs are typically much faster to load than native apps, especially on devices with slow internet connections. This is because PWAs can leverage the caching capabilities of the web browser to store frequently accessed resources.
• Always Up-to-Date: Users don’t need to worry about constantly downloading/installing updates, as PWAs are always up-to-date because they are delivered through the web browser. 
• Easy to Share: PWAs can be easily shared with others by simply sharing a URL. This makes it easy for users to spread the word about your app to their friends, family, and colleagues.

Disadvantages of Relying on a PWA

While there have been recent developments that are blurring the lines between progressive web applications and native apps, PWAs are still limited in their ability to access some critical device features. Before making the decision to build and launch a PWA as your only mobile app experience, be sure to consider their limitations.

• Limited Native Device Functionality: PWAs have limitations when it comes to accessing certain native device functionality. This includes features like biometric authentication, secure storage, and contacts. These limitations can restrict the functionality of your app, hinder the user experience, or put sensitive data at risk.
• Potential for Performance Issues: PWAs are web-based applications, and their performance can be impacted by factors like internet connection speed. This can lead to slower load times and a less responsive user experience compared to native apps.
• App Store Visibility: If your users are used to finding apps in the app stores, then it may be more difficult for them to discover a PWA. PWAs don’t appear in traditional app stores like the Apple App Store or Google Play Store, so users will need to search for them differently than they’re used to.
• Limited Push Notification Capabilities: On some platforms, PWAs may have limitations with push notifications. While features are constantly evolving, native apps typically offer a more robust and reliable push notification experience.
• Platform Dependence: While PWAs are designed to be device-agnostic, there can be some variations in functionality and user experience depending on the specific device and operating system being used. This can lead to inconsistencies for users across different platforms.

The Best of Both Worlds: Build a Hybrid App with Ionic Capacitor

So, what’s the best approach? The answer, for many companies, is to build a hybrid app using the tools provided by Ionic. Using Capacitor, Ionic Framework, and a suite of commercial plugins, your developers can build a PWA, providing a native-like experience, and deliver it as an enterprise-grade native app all from a single code base.

By expanding your mobile app strategy to include a web app, PWA, and native app, you get all the benefits of a PWA (increased reach, reduced development costs, and better discoverability) as well as the benefits of a native app (security, access to all native device features, and an app store presence) with minimal effort from your development teams.

Get Started

Our team can provide expert guidance and assistance from project scope to launch and beyond. Ready to get started? Reach out to one of our team members to schedule a demo.

To learn more, download the complete “The Architect’s Guide to Progressive Web Apps” ebook.

The post PWAs: A Powerful Part of your Mobile App Strategy, But Not a Standalone Solution appeared first on Ionic Blog.

Read more https://ionic.io/blog/pwas-not-a-standalone-solution

Details

Category: Developer News

Today, we’re excited to announce the release of Ionic 8! This stable release comes after several betas and release candidates with improvements suggested by the Ionic community. Thanks to your contributions and the hard work of our team, we’re thrilled to launch Ionic 8.

What’s new? Enhancements to theming, accessibility, revised iOS designs, a new Picker experience, and a new password toggle component. For complete details and demos, please see the Ionic 8 beta announcement.

Let’s get into what’s new.

Web Accessibility Out-of-the-box

To help developers build accessible apps, Ionic UI components follow the Web Content Accessibility Guidelines (WCAG) pertaining to mobile applications. Two major accessibility features are included with Ionic 8.

AA Color Contrast

To improve color contrast, we’ve shipped a revised color palette. When used with a proper contrast color, each color token (primary, secondary, success, etc.) now meets AA contrast levels as defined by the WCAG. This increases readability in your Ionic application, as users can more easily distinguish the foreground from the background. To showcase these new colors, we’ve updated the Color Generator.

AAA High Contrast Palette

The revised color palette ensures AA level compliance for color contrast. For scenarios requiring even higher levels of color contrast, we are pleased to introduce the new high contrast light and dark palettes! With these palettes, each color token now meets AAA contrast levels for text when used with a proper contrast color.

We are also introducing a new set of step color tokens to support the high-contrast palette better. These step colors allow developers to control text colors independently of background colors.

Check out the new High Contrast Documentation and the Stepped Color Documentation for more information.

Built-in Light and Dark Palettes

Ionic 8 now ships both the light and dark palettes built into the project. For added convenience, the light palette is automatically imported via the core.css file. Importing the dark theme is as simple as importing a single CSS file:

import '@ionic/react/css/palette/dark.system.css';

In Ionic 7 and earlier, developers added light and dark palettes by manually copying and pasting design tokens into their applications. However, as Ionic evolved, we discovered that this solution was difficult for developers to maintain and challenging for us to scale.

The above stylesheet will apply the dark palette based on the system settings for a user’s preferred color scheme. With this approach, developers will always receive the latest and greatest light and dark palettes whenever they update Ionic. Additionally, developers can continue to customize our palettes! Learn how to apply the dark palette stylesheet.

Updated iOS 17 Design Specs

iOS 17 design specifications have evolved since iOS 17 was first released, so we’ve updated Ionic components to match them. Most of these changes are fairly subtle, but one notable feature is the ability to disable Action Sheet buttons. Previously, all buttons in an Action Sheet were always enabled. We’ve also added this behavior to the Material Design variant of the Action Sheet so users can have a consistent experience across platforms.

New Picker Experience

The new Datetime component, introduced in Ionic 6, included a new inline Picker. After a successful pilot period, this new experience is now available to all developers. Check out the Picker documentation for examples of all the great things you can do with this component.

Spotted: A New Component?

We added a new component to Ionic 8 during the beta period! The ion-input-password-toggle component allows users to toggle text visibility in a password input.

Learn how to add it to your app.

Easy Migration Process

It wouldn’t be Ionic without an easy migration process. We know how disruptive breaking changes can be, so we have kept them to a minimum in Ionic 8. In fact, many of the breaking changes do not require any code updates by developers.

Upgrade to Ionic 8 Now

Developers can follow the Ionic 8 Migration Guide to update their existing Ionic 7 apps. 

Looking to start with a brand new Ionic 8 app? Try our app creation wizard!

Please report any issues you encounter on our GitHub repo.

Ionic 8 is another huge step forward for Ionic applications with great enhancements to theming, accessibility, revised iOS designs, and the new Picker experience. We’d like to thank the community for their continued support of this project and feedback during the beta process. Stay tuned for more great improvements in 2024!

The post Ionic 8 is here! appeared first on Ionic Blog.

Read more https://ionic.io/blog/ionic-8-is-here

Details

Category: Developer News

We’re excited to announce Capacitor 6, the latest upgrade to our native runtime for web apps. This release brings experimental Swift Package Manager support, aligns with Apple’s new privacy requirements, and introduces improvements across the board, ensuring your projects are future-proof and more efficient. With Capacitor 6, we continue our commitment to simplifying cross-platform app development, making it easier for developers to deliver outstanding web-based apps with native performance.

What’s New?

Capacitor 6 brings with it a slew of updates designed to ensure your projects are in lockstep with the latest platform requirements. All of the iOS and Android dependencies have been updated to support Android 14 and iOS 17, ensuring your applications can leverage the newest features and security improvements these platforms offer.

As we announced in our Capacitor 5 updates last year, we are completing the transition to the default value of androidScheme to https. This change is a platform requirement for apps to properly use the Autofill feature on Android. If you have an existing project and are not explicitly setting the androidScheme in your Capacitor configuration file, you should set it to http to avoid any data loss in your application after upgrading.

Upgrading to Capacitor 6 is a breeze, whether you’re a fan of visual interfaces or you prefer the command line, we’ve got you covered:

• With just a click of a button, the Ionic VSCode extension will upgrade your project to Capacitor 6. This takes the guesswork out of upgrading, streamlining the process so you can focus on what matters most—building amazing apps.
• For those who live in the terminal, the migrate command is your best friend. Simply install the latest CLI and run npx cap migrate within your project, and watch as your project is upgraded to Capacitor 6.
• Prefer a more manual approach? The upgrade guide in our docs has you covered there too.

Swift Package Manager

Capacitor 6 introduces experimental support for Swift Package Manager (SPM), bringing a new way to manage dependencies for iOS projects. Starting today, both the core platform and all core plugins are SPM-ready.

While we are working to add SPM support, we’re not leaving out Cocoapods just yet. We plan to support both, with a long-term view of transitioning fully to SPM. This won’t happen overnight, and we’ll guide you through every step when the time comes. This version is our first step, and community feedback and collaboration will help drive this forward. In the coming months, we’ll be working with plugin authors to ensure that the plugins in the community can work with both Cocoapods as well as with SPM.

We’re excited about SPM but recommend keeping it out of production for now. This is new territory, and we want to ensure everything runs smoothly before giving it the green light for production use. More details on how to use SPM in your iOS projects will be coming soon.

Apple Privacy Manifest

In recent months, Apple has announced their latest privacy requirements for applications submitted to the App Store. Capacitor was on the list of frameworks identified to be required to provide additional signatures when used. We’ve rolled out updates across Capacitor 4, 5, and to the newly released Capacitor 6 to align with Apple’s latest privacy mandates. Ensuring compliance for your applications is as straightforward as updating to the latest version of Capacitor.

Additionally, apps that use APIs specified by Apple are now required to submit a privacy manifest detailing the APIs in use along with reason codes explaining the need to use a given API. For most Capacitor applications, these APIs are not used by the application directly, rather by plugins implemented in the project that you as the app author may not understand the reason for. To best support developers, we’ve updated our plugins to explain what APIs are used that require reason codes and what codes should be used for a given plugin.

Starting May 1, 2024, you will be required to include these signatures and privacy reasons when submitting a new or updated app to the App Store.

Understanding the intricacies of Apple’s requirements can be daunting. To that end, we’ve added a comprehensive guide to our documentation. This resource is designed to walk you through preparing your privacy manifests for the App Store, ensuring a smooth submission process.

Thank you!

We’re thrilled to roll out Capacitor 6 and can’t wait for you to try it. A huge thank you to our community for your ongoing support and feedback. Your involvement is what makes Capacitor continually better.

The post Announcing Capacitor 6.0 appeared first on Ionic Blog.

Read more https://ionic.io/blog/announcing-capacitor-6-0

Details

Category: Developer News

If you’re a developer building Stencil-based component libraries used by potentially dozens of apps, you must ensure that your Stencil components work the way you expect. To help verify that components work correctly, Stencil offers both unit testing and end-to-end testing capabilities. Over the past few months, the Stencil team has been working to expand the testing tools we support. First up is WebdriverIO, a browser and mobile automation test framework for Node.js that allows you to run component and end-to-end tests across all browsers.

We’re big fans of WebdriverIO because of its cross-browser support, real user interaction (i.e., close to native user-triggered interactions), web platform support, and the ability to run tests in the same environments your users use.

Here’s a brief tour of using WebdriverIO to test your Stencil components.

Unit Testing

WebdriverIO makes it easy to unit test components and app utility functions in the browser. WebdriverIO provides a helper package for rendering a component into a DOM tree, which resembles how your component is used in an actual application.

Given the following component:

// /src/components/my-component/my-component.tsx
import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  /**
   * The first name
   */
  @Prop() first: string;

private getName(): string {
    return (
      <span>{this.first}</span>
    );
  }

  render() {
    return <div>Hello, World! I'm {this.getName()}</div>;
  }
}

We use the `render` method to render the component in the browser and then verify it’s outputting the correct text:

// /src/components/my-component/my-component.test.tsx
import { h } from '@stencil/core';
import { $, expect } from '@wdio/globals';
import { render } from '@wdio/browser-runner/stencil';

import { MyComponent } from './my-component.js';

describe('my-component', () => {
  it('renders the component correctly', async () => {
    render({
      components: [MyComponent],
      template: () => <my-component first="Liam" />
    });

    const component = $('my-component');
    await expect(component).toHaveText(`Hello, World! I'm Liam`);
  });
});

More details on unit testing can be found here.

Mocking

WebdriverIO supports file-based module mocking and mocking of entire dependencies of your project. To create a mock, either create a file with the name of the module you would like to mock in the `__mocks__` directory or mock the file directly as part of your test:

import { mock, fn } from '@wdio/browser-runner';
import { format } from './utils/utils.ts';

// mock files within the project
mock('./utils/utils.ts', () => ({
    format: fn().mockReturnValue(42);
}));
// mock whole modules and replace functionality with what is defined in `./__mocks__/leftpad.ts`
mock('leftpad');

console.log(format()); // returns `42`

More details on mocking with WebdriverIO can be found in the Stencil docs.

Visual Testing

WebdriverIO supports visual testing capabilities (image comparisons on screens, elements, or a whole page) out of the box. To use it, you save a baseline image for a screen/element/full page locally and check it into your project. When other team members run the visual tests, the baseline image is compared against the newly generated image. If it fails, WebdriverIO points out the visual differences by setting the color of the misaligned text/region to a different color to make it clear where the differences are. If the visual changes are correct, you update the baseline image.

A sample visual test looks like this:

// src/components/my-component/my-component.test.tsx
it('looks visually perfect', async () => {
  render({
    components: [MyComponent],
    template: () => <my-component first="looking" last="'visually perfect' 

" /> }); const component = $('my-component'); await expect(component).toMatchElementSnapshot('MyComponent'); });

Complete details about visual testing can be found in the Stencil docs.

Improve your Stencil components today

WebdriverIO is a robust testing tool for automating your web and mobile applications. To get started using unit testing, mocking, or visual testing, follow the setup process or check out WebdriverIO’s Stencil documentation. In no time, you’ll have built a scalable, robust, and stable test suite.

The post Testing Stencil Components with Ease using WebdriverIO appeared first on Ionic Blog.

Read more https://ionic.io/blog/testing-stencil-components-with-ease-using-webdriverio