欧洲杯官网投注

Ionic Docs Docs

Native

Search docs/
Search docs/
Ionic Docs Docs
  • Structure
  • Responsive Grid
  • Global StylesheetsCSS Utilities
  • Basics
  • Platform Styles
  • CSS VariablesColorsThemesDark ModeAdvancedColor Generator
  • Overview
  • Build Your First App
    LifecycleNavigation/RoutingConfigPlatformTestingStoragePerformanceProgressive Web Apps
  • Overview
  • Quickstart
  • Build Your First App
    LifecycleNavigation/RoutingConfigPlatform UtilsProgressive Web AppsTesting
  • Overview
  • Build Your First App
  • LifecycleNavigation/Routing
  • Animations
  • Gestures
  • iOS App Store
  • Android Play StoreProgressive Web App (PWA)Electron Desktop App
  • Security
  • Debugging
  • Build ErrorsRuntime ErrorsNative ErrorsCORS Errors
  • Fundamentals
  • Cross PlatformWeb ViewWhat are PWAs?
  • How to Contribute
  • Code of Conduct
  • Glossary
  • VersioningRelease NotesGitHub Changelog
  • Support Policy
  • Browser Support
  • Migration
  • Books
  • CoursesGuidesPostsToolsVideos

    iOS Development

    Contents

    This guide covers how to run and debug Ionic apps on iOS simulators and devices usingCapacitor or Cordova. iOS apps can only be developed on macOS with Xcode installed.

    欧洲杯官网投注There are two workflows for running Ionic apps on iOS:

    The Xcode approach is generally more stable, but the Ionic CLI approach offerslive-reload欧洲杯官网投注 functionality.

    Xcode Setup

    is the IDE for creating native iOS apps. It includes the iOS SDK and Xcode command-line tools. Xcode can bedownloaded for free欧洲杯官网投注 with an Apple account or it can be installed through the App Store.

    Once Xcode is installed, make sure the command-line tools are selected for use:

    $ xcode-select --install

    Setting up a Development Team

    All iOS apps must be code signed, even for development. Luckily, Xcode makes this easy with automatic code signing. The only prerequisite is an Apple ID.

    Open Xcode and navigate to Xcode »Preferences » Accounts. Add an Apple ID if none are listed. Once logged in, a Personal Team will appear in the team list of the Apple ID.

    Xcode Accounts

    Creating an iOS Simulator

    The iOS simulator emulates iOS devices on Macs. The following documentation is a quick way to get the iOS simulator set up. For more information, seeApple's documentation.

    Open Xcode and navigate to Window »Devices and Simulators. Create aniPhone 11 simulator if one does not already exist.

    iOS Simulators

    Cordova Setup

    欧洲杯官网投注Additional setup is required for Cordova to support programmatic builds. This section is not necessary for Capacitor.

    ios-sim & ios-deploy

    The ios-sim and ios-deploy are utilities that deploy apps to the iOS simulator and iOS devices during development. They can be installed globally withnpm.

    $ npm install -g ios-sim$ brew install ios-deploy

    Project Setup

    欧洲杯官网投注Before apps can be deployed to iOS simulators and devices, the native project must be configured.

    1. Generate the native project, if it does not already exist.

      For Capacitor, run the following:

       $ ionic capacitor add ios

      欧洲杯官网投注 For Cordova, run the following:

       $ ionic cordova prepare ios
    2. Set the Package ID.

      For Capacitor, open the capacitor.config.json file and modify theappId property.

      For Cordova, open the config.xml file and modify theid attribute of the root element,<widget>. See for more information.

    3. Open the project inXcode.

      欧洲杯官网投注 For Capacitor, run the following to open the app in Xcode:

       $ ionic capacitor open ios

      For Cordova, open Xcode. UseFile »Open and locate the app. Open the app'splatforms/ios欧洲杯官网投注 directory.

    4. InProject navigator, select the project root to open the project editor. Under theIdentity section, verify that the Package ID that was set matches the Bundle Identifier.

      Xcode Identity Setup

    5. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled.欧洲杯官网投注 Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing.

      Xcode Signing Setup

    Running with Xcode

    In this workflow, Xcode can automatically fix common compilation and signing issues that can occur.

    1. Develop the Ionic app and sync it to the native project.

      欧洲杯官网投注 With each meaningful change, Ionic apps must be built into web assets before the change can appear on iOS simulators and devices. The web assets then must be copied into the native project. Luckily, this process is made easy with a single Ionic CLI command.

      欧洲杯官网投注 For Capacitor, run the following:

       $ ionic capacitor copy ios

      欧洲杯官网投注 For Cordova, run the following:

       $ ionic cordova prepare ios
    2. In Xcode, select a target simulator or device and click the play button.

      Xcode Play Button Area

    Running with the Ionic CLI

    The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. It can also spin up a development server, like the one used inionic serve, to provide live-reload functionality.

    With live-reload, changes made to the app's source files trigger a rebuild of web assets and the changes are reflected on the simulator or device without having to deploy again.

    Warning: For iOS devices, the device and the computer need to be on the same Wi-Fi network. An external URL for the dev server is also required so the device can connect to it. Use--external (or --host=0.0.0.0) to bind to external addresses.

    Live-reload with Capacitor

    欧洲杯官网投注Capacitor does not yet have a way to build native projects. It relies on Xcode to build and deploy app binaries. However, the Ionic CLI can boot up a live-reload server and configure Capacitor to use it with a single command.

    Run the following, then select a target simulator or device and click the play button in Xcode:

    $ ionic capacitor run ios -l --external

    Live-reload with Cordova

    Cordova can build and deploy native projects programmatically.

    To boot up a live-reload server, build, and deploy the app, run the following:

    $ ionic cordova run ios -l --external

    Debugging iOS Apps

    Once an app is running on an iOS device or simulator, it can be debugged in Safari.

    Using Safari Web Inspector

    Safari has Web Inspector support for iOS simulators and devices. Open theDevelop menu and select the simulator or device, then select the Ionic App to open Web Inspector.

    If the Develop menu is hidden, enable it in Safari » Preferences »Advanced » Show Develop menu in menu bar.

    If the app isn't listed, the Web Inspector may need to be enabled on the device inSettings »Safari » Advanced »Web Inspector.

    Safari Web Inspector

    Viewing Native Logs

    If running with Xcode, native logs can be found in in the XcodeConsole.

    If the Console is hidden, enable it in View » Debug Area »Activate Console.

    Xcode Console

    Previous
    Scaffolding
    Next
    Developing for Android