Using WP API, we can create various applications with our WordPress data.

For example, we can create a native application with WordPress.
We can easy to publish the application’s news or our store/service updates by WordPress, and the user uses the application natively.

Ionic is one of the frameworks to create a cross-platform mobile application. We can easy to create Android/iOS/Mac/Windows/etc.. application just a single JavaScript SPA.

Demo site

We’ve created a demo site using Ionic and WordPress

The source code is hosted in GitHub.

getshifter/ionic-react-wordpress

Launch example application

If you try to launch the example site using your own WordPress site.

You can create a new project by the following command.

$ git clone git@github.com:getshifter/ionic-react-wordpress.git
$ cd ionic-react-wordpress 
$ npm install
$ npm start

Use own WordPress

The general configuration file is src/config.ts. You can update properties for your WordPress site.

class Config {
    get postURLPrefix() {
        return 'news'
    }
    get pageURLPrefix() {
        return ''
    }
    get wordpressURL() {
        return'https://central.wordcamp.org/wp-json'
    }
    get wpClient() {
        return new wp({
            endpoint: this.wordpressURL
        })
    }
}

Run in your local

Gatsby provides a local server to customize your website in your local.

$ npm run start

Build and deploy

We can build the application for production by the following code.

$ npm run build

And the production application is placed in build directory.

We can upload these files on the build directory to any server like a Netlify / AWS Amplify / Firebase hosting.

Create a Cross-Platform application

We can create a Cross-Platform application using by Capacitor.

In this blog posts, we’ll try to create macOS application in our local.

Create and build a macOS application

Try to run these command in your macOS terminal.

$ yarn run build && npx cap copy
$ npx cap open electron

And we can build the application by these commands.

$ yarn run build && npx cap copy
$ cd electron
$ npx electron-packager . sample --platform=darwin --arch=x64
$ open ./sample-darwin-x64

Pros and cons for Ionic(&Capacitor)

Pros

• We can easy to create a Cross-Platform application using a SPA source code.
• Easy to get an optimized view for their device (Using Ionic)
• Easy to access their device APIs(Using Capacitor)
• Almost useful components are included in Ionic-core.
• Can use HTML5 features

Cons

• Needs prerendering or SSR for SEO / OGP / etc..
• Initial rendering speed is a little bit slower than SSG-created-site
• Not Native application

Conclusion

Using WP API and several SPA frameworks like Ionic and Capacitor, we can create an application for multi-platform (web/iOS/Android/macOS/Windows/etc..)

This means we’re able to publish our content in several ways/options to our customers. Not only web but the native application, eBooks, VUI, etc…

So, we can try to provide a new digital experience for our customers.