Skip to content

Commit 6d8d453

Browse files
NickIlievNickIliev
authored
docs: article about integrating WatchOS app in NativeScript project (NativeScript#1655)
* docs: WatchOS apps article * article improvments * docs: article improvments * add Beta disclaimer * article revision & improvments * final touches
1 parent 16d4e82 commit 6d8d453

File tree

2 files changed

+85
-19
lines changed

2 files changed

+85
-19
lines changed

‎docs/tooling/ios-app-extensions.md

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: iOS App Extensions
33
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
4+
position: 80
55
slug: ios-app-extensions
66
---
77

@@ -11,9 +11,9 @@ iOS App extensions give users access to the app’s functionality and content th
1111

1212
## App Extensions in NativeScript
1313

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/`.
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/_**.
1515

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).
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)_**.
1717

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

@@ -30,32 +30,30 @@ tns create today-extension --tsc
3030

3131
Steps to include the App Extension
3232

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)
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)_**
3434

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.
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.
3636

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).
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).
3838

39-
For example:
40-
```JSON
41-
{
42-
"frameworks": ["NotificationCenter.framework"],
43-
"assetcatalogCompilerAppiconName": "AppIconExtension"
44-
}
45-
```
46-
47-
Where:
39+
For example:
40+
```JSON
41+
{
42+
"frameworks": ["NotificationCenter.framework"],
43+
"assetcatalogCompilerAppiconName": "AppIconExtension"
44+
}
45+
```
46+
**_`frameworks`_** key - the value is an array of framework names.
4847

49-
`frameworks` key - the value is an array of framework names.
48+
**_`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).
5049

51-
`assetcatalogCompilerAppiconName` key - the value is the icon file name located in `.xcassets` catalog with `AppIconExtension.appiconset` inside the extension folder.
5250

53-
4. Rebuild the application and your extension is good to go.
51+
4. Rebuild the application and your extension is good to go.
5452

5553
A sample project demonstrating the above can be found [here](https://github.com/NativeScript/nativescript-today-extension-app).
5654

5755
### Adding App Extension in Plugin
5856

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)
57+
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)
6058

6159
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).

‎docs/tooling/ios-watch-apps.md

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
title: iOS WatchOS Applications
3+
description: Use NativeScript to build your WatchOS apps that will bring users timely information and provide them with a way to interact on the go.
4+
position: 90
5+
slug: ios-watch-apps
6+
---
7+
8+
# iOS WatchOS Applications
9+
10+
With version 5.4 the NativeScript CLI introduces a Beta support for integrating a [WatchOS](https://developer.apple.com/watchos/) application in your iOS mobile app created with NativeScript.
11+
12+
## Prerequisites
13+
14+
- **NativeScript CLI version 5.4** and above.
15+
- NativeScript project.
16+
- **Xcode 10** and above.
17+
- Paired devices or simulators (**iPhone** and **iWatch** with **WatchOS 4.x/5.x** and above).
18+
> **Note:** WatchOS 4.x won't work with the default Watch App created with Xcode. The user will have to manually set **_`WATCHOS_DEPLOYMENT_TARGET`_** in the configuration json (see below for details).
19+
20+
- WatchOS app created with **Objective-C** (Swift code [is **not** supported yet](https://github.com/NativeScript/nativescript-cli/issues/4541#issuecomment-491202270)).
21+
22+
23+
## WatchOS application in NativeScript.
24+
25+
To integrate your existing WatchOS application into your NativeScript project, execute the following steps:
26+
27+
1. Create **_Single View App_** from Xcode.
28+
29+
2. Add watch app target through **_File > New > Target > WatchKit App_**.
30+
31+
3. Add a name to your watch app, for example, **_MyFirstWatchApp_**. In the same screen verify that **Objective-C** is selected as your language.
32+
33+
> **Note** You can skip steps 1-3 if your Watch app is already created.
34+
35+
4. Copy the generated **_MyFirstWatchApp_** and **_MyFirstWatchAppExtension_** to **_.../apps/MyApp/app/App_Resources/iOS/watchapp/MyFirstWatchApp_** and **_.../apps/MyApp/app/App_Resources/iOS/watchextension/MyFirstWatchAppExtension_** respectively.
36+
37+
5. Inside the **_Info.plist_** of the Watch App replace the value of **_`WKCompanionAppBundleIdentifier`_** with **_`$(WK_APP_BUNDLE_IDENTIFIER)`_**.
38+
39+
6. Inside the **_Info.plist_** of the Watch Extension replace the
40+
of **_`WKAppBundleIdentifier`_** with **_`$(WK_APP_BUNDLE_IDENTIFIER)`_**.
41+
42+
7. You can populate the **_Assets.xcassets_** of the Watch App and add the name of the **_`appiconset`_** to the **_.../apps/MyApp/app/App_Resources/iOS/watchapp/MyFirstWatchApp/watchapp.json_**:
43+
44+
```JSON
45+
{
46+
"assetcatalogCompilerAppiconName": "AppIcon"
47+
}
48+
```
49+
50+
8. You can modify the **_`WATCHOS_DEPLOYMENT_TARGET`_** of the Watch App by adding the value inside the **_watchapp.json _** file like this:
51+
52+
```JSON
53+
{
54+
"assetcatalogCompilerAppiconName": "AppIcon",
55+
"targetBuildConfigurationProperties": {
56+
"WATCHOS_DEPLOYMENT_TARGET": 4.1
57+
}
58+
}
59+
```
60+
9. Build & Run the NativeScript application.
61+
62+
```Shell
63+
tns run ios
64+
```
65+
66+
10. The application will be deployed and started on your iOS device/simulator. Make sure that the test iPhone is already paired with the testing iWatch. Once the iOS app starts, the Watch app will be automatically deployed on the testing iWatch device.
67+
68+
> **Note:** As of May 2019 the feature is still in _BETA_. Please report all issues, bugs and features related to the WatchOS functionality in [the tracking issue](https://github.com/NativeScript/nativescript-cli/issues/4541#issue-433686622).

0 commit comments

Comments
 (0)