|
| 1 | +--- |
| 2 | +title: iOS App Extensions |
| 3 | +description: iOS App extensions give users access to the app’s functionality and content throughout iOS. The App extensions provide options for interacting with other applications and enabled the user to access the app’s features without having to open it! |
| 4 | +position: 100 |
| 5 | +slug: ios-app-extensions |
| 6 | +--- |
| 7 | + |
| 8 | +# iOS App Extensions |
| 9 | + |
| 10 | +iOS App extensions give users access to the app’s functionality and content throughout iOS. The App extensions provide options for interacting with other applications and enabled the user to access the app’s features without having to open it! As of the current latest version of XCode there over 25 different App Extensions templates. They cover functionalities like sharing, photo editing, file system access, widgets, custom notifications, actions, custom keyboards and many more. Each extension is part of the app but also work independently of one another. For more details on the different types of iOS App Extensions refer to the official [Apple documentation](https://developer.apple.com/app-extensions/). |
| 11 | + |
| 12 | +## App Extensions in NativeScript |
| 13 | + |
| 14 | +NativeScript CLI 5.3.0 introduced Beta support for the iOS App Extensions. While the extension itself should be created and developed via Xcode (using Objective-C), the produced files can be integrated into existing NativeScript app by using a plugin (that contains the extension) or directly by introducing the extension files in separate folder named as the extension inside `<project-name>/App_Resources/iOS/extensions/`. |
| 15 | + |
| 16 | +For example, assuming we have an extension called [**TestExtension**](https://github.com/NativeScript/nativescript-today-extension-app/blob/master/app/App_Resources/iOS/extensions/TestExtension/Info.plist#L8) then the extension files should be placed in [**<project-name>/App_Resources/iOS/extensions/TestExtension**](https://github.com/NativeScript/nativescript-today-extension-app/tree/master/app/App_Resources/iOS/extensions/TestExtension). |
| 17 | + |
| 18 | +The following sections describe the steps needed to integrate the **created** App Extension into your existing NativeScript application. |
| 19 | + |
| 20 | +### Adding App Extension in Existing Application |
| 21 | + |
| 22 | +Prerequisites |
| 23 | + |
| 24 | +- The created App Extension. |
| 25 | +- Existing NativeScript application. For testing purposes, you can build a base application using the `create` command |
| 26 | + |
| 27 | +``` |
| 28 | +tns create today-extension --tsc |
| 29 | +``` |
| 30 | + |
| 31 | +Steps to include the App Extension |
| 32 | + |
| 33 | + 1. Open `<project-name>/app/App_Resources/iOS/` and create folder named [`extensions`](https://github.com/NativeScript/nativescript-today-extension-app/tree/master/app/App_Resources/iOS/extensions) |
| 34 | + |
| 35 | + 2. In the `extensions` folder create the main folder that contains the extension files. For example, create the [`TestExtension` folder](https://github.com/NativeScript/nativescript-today-extension-app/tree/master/app/App_Resources/iOS/extensions/TestExtension) containing all the extension files. |
| 36 | + |
| 37 | + 3. In the `TestExtension` folder (where the extension files resides), create a [file called `extension.json`](https://github.com/NativeScript/nativescript-today-extension-app/blob/master/app/App_Resources/iOS/extensions/TestExtension/extension.json). This configuration file describes the SDK frameworks used in the extension (via `frameworks` key) and the optional image resources used for extension icon (via `assetcatalogCompilerAppiconName` key). |
| 38 | + |
| 39 | + For example: |
| 40 | +```JSON |
| 41 | +{ |
| 42 | + "frameworks": ["NotificationCenter.framework"], |
| 43 | + "assetcatalogCompilerAppiconName": "AppIconExtension" |
| 44 | +} |
| 45 | +``` |
| 46 | + |
| 47 | +Where: |
| 48 | + |
| 49 | + `frameworks` key - the value is an array of framework names. |
| 50 | + |
| 51 | + `assetcatalogCompilerAppiconName` key - the value is the icon file name located in `.xcassets` catalog with `AppIconExtension.appiconset` inside the extension folder. |
| 52 | + |
| 53 | +4. Rebuild the application and your extension is good to go. |
| 54 | + |
| 55 | +A sample project demonstrating the above can be found [here](https://github.com/NativeScript/nativescript-today-extension-app). |
| 56 | + |
| 57 | +### Adding App Extension in Plugin |
| 58 | + |
| 59 | +The workflow to adding an App Extension to a plugin is the same as the one described above with the difference of where the extension is placed. Create the `extensions` folder (along with all included files) inside `platforms/ios` folder of your plugin. Then follow steps 2-4 from [the previous section](#adding-app-extension-in-existing-application) |
| 60 | + |
| 61 | +A sample plugin demonstrating the above can be found [here](https://github.com/NativeScript/nativescript-today-extension-plugin). More information for creating NativeScript plugins can be found [here](../plugins/building-plugins.md). |
0 commit comments