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.
March is here, and a new set of versions comes with it. We've got several updates to share, mainly about PHP 8 compatibility. This means that it's time to update! Let's take a look at what we're rolling out today.
Read more https://www.extly.com/blog/22-latest-news/793-march-updates.html
In case you missed the news, Apple shipped iOS/iPadOS 16.4 beta 1 the other day, which includes a ton of new features. Most notably, there are new features and improvements to WebKit/Safari. This includes improvements for Web Components, new Web APIs like the Wake Lock API, and the most notable… Web Push for iOS/iPadOS . Let’s take a closer look at these features and get a sense of what they mean for Safari and the greater web community
Anyone who knows me knows that I am not that big of a fan of push notifications. Any time an app asks for push notifications, I often reject them as I find them too noisy, but I’m well aware that many apps have a valid use case for them. From the WebKit announcement, the Web Push API is based on the W3C standard and uses the same services as native apps. This means that your notifications will be handled the same way as any app downloaded from the app store. It is worth noting that push notifications will only be allowed if the app is added to the user’s home screen.
Given Apple’s negative stance on providing a better add-to-home-screen experience, there will likely be some friction with this. Users will have to be taught how to add an app to the home screen from iOS, instead of getting a nicer prompt that is provided via Android/Chrome. All that being said, this is definitely a step in the right direction. To learn more about Web Push on iOS/Safari, check out the release blog and the Meet Web Push blog post from WebKit.
As Web Components have evolved and become more commonplace, web developers and browser developers noticed places where they could be improved. Enter Declarative Shadow DOM and Form-Associated Custom Elements. These APIs take care of two big issues with Web Components: the need for JavaScript and components not being accessible. Let’s look at Declarative Shadow DOM first.
Declarative Shadow DOM introduces a new way to author the internals of a web component. For a refresher, Shadow DOM is an API that allows web component authors to encapsulate parts of the component and remove them from the main DOM tree. Anything rendered in the Shadow DOM gets its own shadow tree and is isolated from any CSS or JavaScript that an app developer might include.
However, Shadow DOM requires JavaScript and in many places cannot be parsed. This can lead to content not showing or, in places where Server Side Rendering (SSR) is being used, a flash of nothing before the JavaScript kicks in. Declarative Shadow DOM solves this by moving the content into the web component itself. For example, here’s the old way of using Shadow DOM:
class CompA extends HTMLElement {
shadowRoot;
constructor() {
super();
this.shadowRoot = this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>';
}
}
customElements.define('comp-a', CompA);
<comp-a></comp-a>
Now, this can be rewritten using Declarative Shadow DOM:
class CompB extends HTMLElement {
constructor() {
super();
}
}
customElements.define('comp-b', CompB);
<comp-b>
<template shadowrootmode="open">
<h1>Hello Declarative Shadow DOM</h1>
</template>
</comp-b>
While this can seem like a small change, by moving the content to the template, we can still render our content even if JavaScript is not enabled.
Forms Association solves another major problem:
Web Components have a hard time working with forms. To solve this
we can make use of ElementInternals
which will allow
us to set various attributes on the host element. From the WebKit
blog, they show the example of:
class SomeButtonElement extends HTMLElement {
#internals;
#shadowRoot;
constructor() {
super();
this.#internals = this.attachInternals();
this.#internals.ariaRole = 'button';
this.#shadowRoot = this.attachShadow({ mode: 'closed' });
this.#shadowRoot.innerHTML = '<slot></slot>';
}
}
customElements.define('some-button', SomeButtonElement);
Compared to an older example like so:
class SomeButtonElement extends HTMLElement {
#shadowRoot;
constructor() {
super();
this.#shadowRoot = this.attachShadow({ mode: 'closed' });
this.#shadowRoot.innerHTML = '<slot></slot>';
this.setAttribute('role', 'button');
}
}
customElements.define('some-button', SomeButtonElement);
While the two may look similar, the version using
ElementInternals
has a few benefits.
1. Setting ariaRole
via
ElementInternals
will allow for users to override the
ariaRole
where setAttribute
will not.
2. No other built-in element calls setAttribute
directly on itself.
There are more features provided by
ElementInternals
, but I’ll direct you to the WebKit blog to see more.
We at Ionic see this as a welcomed improvement to Safari. In the codebase for the framework, there’s a lot of Safari specific code needed to account for things like Forms Association that will now be able to be removed. With Declarative Shadow DOM, the SSR story for Ionic apps becomes even better, too. And with Web Push, Progressive Web Apps… I mean, “home screen web apps” on iOS will start to feel like their Native counterparts (for better or for worse ). All jokes aside, it’s great to see the WebKit team be able to ship these features and keep Safari competitive with other browsers out there.
The post Safari… Catches Up? appeared first on Ionic Blog.
Read more https://ionic.io/blog/safari-catches-up
When you think about creating a native mobile app, you likely think of the years and years of training, coding, and trial and error that goes into it. While yes, it can take years to fully refine native development skills, a fully-functional native app may be more in-reach than you think.
What if we told you that you could build a native app without needing to learn a new framework, a new tool, or a new coding language? As long as you have web expertise, Capacitor makes it easier than ever to get a native app up and running.
With a minimal learning curve, you can use the skills you already have to get an app up and running quickly. As companies strive to do more with less, this proves invaluable. And don’t take our word for it – read on for how one developer with no native experience built a brand new app and got it into the app store in just two weeks.
In 2022, Stack Overflow surveyed over 70,000 developers around the world to learn which coding languages they use the most and it was clear that the web continues to reign supreme. JavaScript continued to be the most popular language for the 10th year in a row, with a whopping 65% of respondents using it. Close behind were HTML/CSS, which were among developers’ most favored technologies as well.
While many developers already know and love web technologies, they may not realize that they already have a leg up when it comes to native app development. Utilizing web technologies, developers can create beautiful, performant apps that tap into a device’s native features. Capacitor enables web developers to reuse their code to create mobile apps from their existing web applications. Developers can reuse the UI they’ve built for the web in a native app, all without ever having to learn a native development language.
In today’s fast-paced development landscape, it’s all about doing more with less. Development teams are tasked with cranking out apps, updates, and fixes quicker than ever. That often means developers are working on multiple projects across various platforms. Software engineering leaders are also looking at ways to save money and avoid hiring additional native mobile developers for a premium mobile customer experience.
With Capacitor, a single web development team can massively increase their productivity and output. The same premium mobile experience typically found in traditional native applications is easily managed through Capacitor’s integrations with native platform services and APIs. By encapsulating the web application and exposing these features and functions, team’s can quickly create beautifully curated, performant native iOS and Android applications. From this same codebase, teams can maintain their web app experience, spin up a desktop app, and deploy a Progressive Web App to extend their reach beyond the mobile app stores.
Capacitor also enables teams to work faster than ever, especially when paired with Appflow, Ionic’s CI/CD solution. Appflow enables developers to publish directly to the app stores, bypass app store approval when sending users live updates, compile native app binaries in the cloud, and automate the app delivery pipeline.
Marc Louvion had no idea how native apps worked. 14 days later, he submitted his first app to the App Store.
Habits Garden gamifies the creation of good habits by showing users’ habit progress as a garden. As users complete tasks, their garden grows and flourishes, as do the positive habits they’re creating. Now, with over 6,000 users, Habits Garden is helping people overcome procrastination and achieve their goals in a fun, interactive way.
So how did Marc create this app without any native development knowledge? With Capacitor. Initially written on the web, Marc was able to use Capacitor to create a beautiful mobile app while reusing about 98% of his existing code. A few minor tweaks and Habit Garden was optimized for mobile.
Marc was also able to integrate payments and a status bar feature, both native components, into the app without any native development experience. Marc noted how “almost no native [knowledge is] needed with Capacitor” and when asked if he planned to learn native development, he stated that there was now no need, thanks to Capacitor.
“Capacitor makes mobile app development as easy as building web apps” said Louvion.
“I don’t see a reason not to use Capacitor: if you’re a solopreneur, you’ll save tons of time. If you’re an established startup, your users won’t see the difference with native.”
15 days after the project began, Habits Garden was live in the app stores. You can find Habits Garden in the iOS and Google Play store as well as on the web now.
While Capacitor is an open-source powerhouse on its own, it’s made even better by the premium plugins that seamlessly integrate with it. From upping your app’s security to securely processing payments, there’s nothing you can’t do with Ionic’s Enterprise SDK.
Enterprise SDK has everything you need to build enterprise-grade cross-platform mobile apps for iOS, Android, and the web. It includes advanced security features, such as biometric identification, single sign-on, and secure storage. It also has premier integration support with leading 3rd-party services, such as Microsoft Intune, Couchbase Lite, and more, so you can tailor your app down to the finest detail. Enterprise SDK also includes professional support and advisory services to help development teams reach their goals more efficiently.
Ready to create a beautiful, performant app? Start a trial today.
If your team is looking to move faster, safeguard users, and build with confidence knowing you have expert help available every step of the way, Ionic’s Enterprise SDK is for you. It’s free to get started with a 14-day trial!
The post You Already Have What You Need to Build a Native Mobile App appeared first on Ionic Blog.
Read more https://ionic.io/blog/you-already-have-what-you-need-to-build-a-native-mobile-app
This is a guest post from Simon Grimm, Ionic Developer Expert and educator at the Ionic Academy, an online school with 70+ video courses focused entirely on building awesome mobile apps with Ionic!
You just built your first Ionic App and want to show it to the world, but you have no idea how to submit it to the Store? Then you have come to the right place.
In this guide, you will learn all the steps required to go from an Ionic app to a released Android app. You don’t need to have any previous experience with building native mobile apps to follow along. All you need is basic knowledge of how to build modern web applications!
Capacitor is a native runtime that gives modern web application access to native APIs such as Camera, File System, Notifications, Network, GPS, and more using JavaScript. In a nutshell, Ionic is for building UIs, and Capacitor makes it possible to build and run your app on a native device. It comes with a very slim API, so a lot of the build and deploy process we cover is actually just using the native iOS and Android tools!
To later build our app, we rely on the tools that native developers use as well.
This means installing Android Studio to download and manage your Android SDK.
Once you reach the last step of submitting an app, you also need to be enrolled in the Google developer program, which is a one-time fee of $25.
For simplicity, I will explain all steps based on a sample Ionic React app. Most likely you arrived at this guide with an app yourself, so let’s get started with the configuration of our project!
Your project already comes with a capacitor.config.ts in which you can define some general settings.
First, you should make sure that you replace the default appId with an actual bundle ID that matches your company/app name. This is a unique identifier that we will later use for Android, so change it to something specific to your company or project.
To build your Ionic app with Capacitor, we need to create a native project for Android.
Make sure you also run the build command before, because Capacitor will sync your web build to the native platform folder – which is essentially the magic of Capacitor.
Later on, you will simply update your code and sync the changes again, for now, get started by running:
# Build your app and add the Android platform
ionic build
ionic cap add android
At this point, you can open your native projects and deploy the app to a device or simulator:
ionic cap open android
Alright, let’s continue with another important piece of the deployment puzzle.
Every app needs a cool icon and splash screen, which is the first screen users see when starting your app later. For this task, we can use the Capacitor assets plugin, and to get started you should add an icon to a new assets folder at the root of your project:
assets/
├── icon.png
└── splash.png
Make sure you are using the right dimensions for those files:
• assets/icon.(png|jpg) must be at least 1024×1024px
• assets/splash.(png|jpg) must be at least 2732×2732px
Now we can install the Capacitor assets plugin and run the generate command in our project:
npm install @capacitor/assets
npx capacitor-assets generate
This will generate the icon and splash in different dimensions, and if you get a success message, you can see that the images were updated in your native projects:
Now let’s get that app released!
To publish your app on the Play Store, you need to sign your native app with a digital signature. In case you missed it, you also need a Google Play Developer account to upload and submit your app.
There are actually multiple ways to build your Android app, but let’s start with the easiest.
First, let’s build our app from the command line to make sure we have the latest web assets in your native project:
ionic cap build android --prod
ionic cap open android
Now, we can select the Build menu and click on Generate Signed Bundle/APK
This will open a new window in which we select Android
App Bundle. Click next, and you will get a dialog to
choose or create a key store.
The key store is the way you can verify with Android/Google that
you are the owner/developer of the app. If this is your first time
going through this (or it’s a new app) you can simply click on
Create new… to create a new key store file.
After filling in the data and clicking Ok, that information should be automatically used in the last open dialog to create our signed bundle:
If the build is successful, you should pretty soon find a file under android/app/release/app-release.aab in your project.
Alternatively, if you prefer to work through the CLI, or have a CI/CD pipeline, you can sign your app with the command line tools provided by Android. For this, we can now add a new file at android/keystore.properties and insert our key store credentials:
storePassword=yourstorepassword
keyPassword=yourkeypassword
keyAlias=yourkeyalias
storeFile=./../../release-keystore
Now we need to load this file inside the
android/app/build.gradle, load the values into a
signingConfigs
object, and add this to the
release
build type like this:
apply plugin: 'com.android.application'
def keystorePropertiesFile = rootProject.file("keystore.properties")
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
android {
compileSdkVersion rootProject.ext.compileSdkVersion
defaultConfig {
applicationId "com.devdactic.filesapp"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
aaptOptions {
ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
}
}
signingConfigs {
release {
keyAlias keystoreProperties['keyAlias']
keyPassword keystoreProperties['keyPassword']
storeFile file(keystoreProperties['storeFile'])
storePassword keystoreProperties['storePassword']
}
}
buildTypes {
release {
signingConfig signingConfigs.release
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
As a result, you can now perform a build directly from your terminal by navigating into the android folder and directly calling the Gradle build tools to create a release bundle:
cd ./android
./gradlew bundleRelease
If the build is successful, you can find the resulting bundle at android/app/build/outputs/bundle/release/app-release.aab in your project.
Now, regardless of which approach you took, you should have an AAB file that can build uploaded to the Play Store. Let’s visit the Google Play Store Developer Console and create a new app.
Fill out the form about general app information and click Create app to add a new app to your Play console!
You will now arrive at the dashboard of your project, from where you can scroll down to the Set-up your app section and expand all required tasks that you need to finish before releasing your app:
We will not go through all the forms, simply check all tasks and fill in the required information about your app!
After you are done you can head over to Production from where we click on Create new release.
Note: We haven’t touched testing in here, but you could instead upload your build to the open/closed testing track of Google Play and start rolling out to specific testers before creating your production release!
Now the most important step happens as we drop our aab bundle into the upload area!
Google will automatically detect the version of our file, target SDK level, and other information.
If you did all the previous steps in the right order, the bundle should be accepted, and you can click on Review release.
At this point, you might see some warnings, but they are not blocking your release.
Before you click on Start roll-out to Production, keep in mind that this action will release your app to the Google Play Store (after they review it). If everything looks good to you, hit that button and wait for a review, which might take 1-5 days depending on how busy Google is!
Congratulations – after some waiting, your app will be available for everyone to download through the Play Store.
Let’s jump forward in time a few weeks (honestly, sometimes it’s just a minute until the next release) when you want to update your app. This process is the same in many aspects, but a lot faster because you don’t have to fill out all the general information of your app again.
To update your Android app, you also need to generate a new signed bundle, but before you create the bundle, it’s time to update your app version.
For Android, this can be done inside the android/app/build.gradle of your Ionic project.
Within the defaultConfig block, you can increment the: – versionCode in order for the Play Store to recognize that there is a new version for users.
Sync your web assets with the Android project, save the new Gradle settings and then create a new signed bundle through Android Studio or the command line and upload it within your developer console as a new version!
Although Capacitor will never magically overwrite your native projects, there is a handy package called Trapeze which allows applying changes to your projects based on a YAML file.
Especially if you run your builds on a server, Trapeze can automate the task of updating native project settings with a single command based on your configuration. You can also check out my video if you want to see Trapeze in action if you are curious and want to know more.
Now wouldn’t it be nice if you didn’t have to worry about builds, signing, upload, or even app store review times anymore? Well, all of that is actually possible with Appflow, a paid cloud platform for teams building any kind of mobile applications – yes, Appflow can build Cordova, Capacitor, and even React Native and traditional iOS and Android apps!
Appflow can manage your signing keys, connect to your repository and automatically build your native iOS or Android app after pushing to a specific branch. By defining different pipelines, you can set up powerful automations, like automatically uploading a new build to Google or Apple after it’s been built in the cloud.
On top of that, you get access to a feature called live updates:
With live updates, you can actually skip the app store review process because apps connected with Appflow can load their web sources from a remote server.
There’s also an in-depth look at Appflow inside the Ionic Academy, so if you want to learn how to use it or build even better Ionic React apps, become a member and get immediate access to 70+ video courses, app templates and our private community of Ionic developers.
While it can seem like a complex process, building, signing, and releasing your app is actually a lot more approachable than you might think. While this guide only covered Android, keep an eye out for the next guide which will go over this same process, but for iOS!
The post Building And Releasing Your Capacitor Android App appeared first on Ionic Blog.
Read more https://ionic.io/blog/building-and-releasing-your-capacitor-android-app
A new year brings support for new mobile app frameworks in Appflow, the mobile DevOps solution from Ionic. Now, developers can build traditional native iOS and Android apps in Appflow, expanding on existing support for Capacitor, Cordova, and React Native.
This release continues Appflow’s mission to make mobile DevOps easy for all developers, regardless of framework or DevOps experience.
Appflow started as the solution for cross-platform developers using Capacitor and Cordova to easily build native mobile apps in the cloud, ship to app stores, and automate workflows.
With last year’s release of React Native support and now traditional native iOS and Android, more teams than ever can leverage Appflow to build mobile CI/CD pipelines. Developers can orchestrate entire workflows within Appflow’s dashboard, or use Appflow’s CLI to integrate builds, deployments, and live updates into existing CI/CD workflows.
Support for additional mobile development frameworks is particularly impactful for enterprise organizations. In an October webinar, the Appflow team highlighted specific complexities of developing mobile apps at the enterprise level. For these larger organizations coordinating deployments across teams using multiple frameworks, a tool like Appflow provides a single platform for all teams, removing knowledge silos and the need to manage multiple tools.
Traditional native support includes Android (typically Kotlin or Java) and iOS (typically Swift or Objective-C) mobile apps. Unlike hybrid or cross-platform apps built with Capacitor or React Native, these apps are designed specifically for a single native platform.
To start building and shipping a traditional native iOS or Android app, use the same easy implementation process Appflow provides for other mobile architectures.
Import your app by connecting to the project repository on your Git provider and selecting iOS (Beta) or Android (Beta) during app setup.
Once your app is connected, configure signing certificates, deployment destinations, and any custom environments as needed. Select a commit to start the build, selecting the build stack, type, and optional configurations.
Configure variables or secret keys in the Appflow dashboard, or leverage support for iOS Schemes and Android Variants. Set up automated workflows based on a branch trigger, or use the Ionic Cloud CLI to integrate with an existing CI/CD pipeline.
The Appflow experience is nearly identical regardless of the mobile architecture. However, Web Previews and Live Updates are currently only available for Capacitor or Cordova apps. Our documentation outlines which features are available using mobile architecture badges. The Appflow team will continue to expand supported mobile architectures and new features.
Existing Appflow customers can get started today by importing a traditional native iOS or Android app. Appflow plan administrators can invite new team members as needed using the instructions here.
To try out builds, deployments, and automations for your mobile applications, start a free trial of Appflow here.
The post Appflow adds support for traditional native iOS and Android apps appeared first on Ionic Blog.
Read more https://ionic.io/blog/appflow-traditional-native-ios-android