iOS App Extensions

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.

App Extensions in NativeScript

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 /App_Resources/iOS/extensions/.

For example, assuming we have an extension called TestExtension then the extension files should be placed in /App_Resources/iOS/extensions/TestExtension.

The following sections describe the steps needed to integrate the created App Extension into your existing NativeScript application.

Adding App Extension in Existing Application

Prerequisites

• The created App Extension.
• Existing NativeScript application. For testing purposes, you can build a base application using the create command

tns create today-extension --tsc

Steps to include the App Extension

1. Open /app/App_Resources/iOS/ and create folder named extensions

2. In the extensions folder create the main folder that contains the extension files. For example, create the TestExtension folder containing all the extension files.

3. In the TestExtension folder (where the extension files resides), create a file called 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).

   For example:

   {
       "frameworks": ["NotificationCenter.framework"],
       "assetcatalogCompilerAppiconName": "AppIconExtension"
   }
   

   frameworks key - the value is an array of framework names.

   assetcatalogCompilerAppiconName key - the value is the name of the .appiconset you want to use from the .xcassets catalog inside the extension folder -(AppIconExtension.appiconset in the example above).

4. Rebuild the application and your extension is good to go.

A sample project demonstrating the above can be found here.

Adding App Extension in Plugin

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

A sample plugin demonstrating the above can be found here. More information for creating NativeScript plugins can be found here.