How to Build a Share Extension in iOS Using Swift 4.0

In our earlier post, we explained how to build a Share Extension using Swift 3.0. In this post, we will be describing the process by using Swift 4.0.

The main aim behind building a share extension is enabling an app to save a URL as rich content and to configure some options. Building a share extension in iOS with Swift programming language is pretty easy and simplifies some essential tasks. It enables displaying an icon on the common share sheet associated with the main mobile app while handling the content sharing as requested by a user. This helps a user in switching easily from one app to another.

Laying the Groundwork

You can either choose to open a new project to start adding share extension from scratch or open an existing one you want to add the extension. Next, click through File – New – Target. Select the iOS tab, click on Share Extension and then Next. You can then rename it accordingly. Now, activate the option of running the app on a browser like Safari or any other you have selected, to enable a smoother and responsive app design. This will allow you to test your extension. You can then test whatever you have done till now by running the project on Safari or any other option you have selected.

As you open Safari, click on the icon displaying “Share”. The extension name you have created earlier should appear on the list. If its not there, click on the More button to enable it. As you click on the icon, you will be presented with the default implementation associated with SLComposeServiceViewController.

Fetching the URL

Once the extension is enabled, the share sheet is able to retrieve all the information automatically for streamlining the sharing process in mobile app development. It receives the page title and then sets that information as the body text. However, you would need more information than what is provided in the sheet. Hence, here you might want to run a JavaScript file for parsing the document and attain some more information. So, go to your extensions folder in Xcode and select a New File. Under it, on the Other tab, you will find Empty and then tap Next to rename the file “GetURL.js”
The extension file Info.plist needs editing with a key from the dictionary named NSExtensionAttributes available in NSExtension. Select the key named NSExtensionJavascriptProcessingFile with the created value “GetURL” (without the extension .js). Next, make an addition of another row from dictionary NSExtensionActivationRule containing the key NSExtensionActivationSupportsWebURLWithMaxCount.

Copy and paste the image you have selected to share into GetURL.js. Now, the OS will be looking for an object with the name ExtensionProcessingJS that will be performing at the runtime. For more in-depth details, you can refer to the Apple documentation guide.
The above JavaScript file will be now scraping the data from it. For retrieving that data, run the code block in ShareViewController.swift. Import kUTTypePropertyList under the function, viewDidLoad. Now, when you run the extension, the URL will be printed on the console.

Customizing and Adding Configuration Cells

You can customize the design by adding Configuration Items at the bottom of the share sheet. This is done to save the configuration on dedicated existing Decks. Also, you can make it run a JavaScript code that will help you in fetching the URL from browser while sending it to the server.

When you created share extension, there is a boilerplate that includes a tool with which you can supply configuration Items, as an option. Inserting the snippet will give you SLComposeSheetConfigurationItem. Configuration Items will require a basic model, that you will have to create. So, create a simple model named Deck.swift that you will need in the further stages for passing the data across view controllers.

Creating a TableView

To display the extension in a tabular view, you will need to configure it in a way that when you tap on the cell, it switches to that view. So now, create a new file from UIViewController and name it as ShareSelectViewController.swift. For adding it to the view, create a property for tableview for storing dummy data. Then, add it within viewDidLoad. Finally, create an instance of ShareSelectViewController for the newly built configuration Item inside tapHandler. Running an app after every update is essential for mobile app testing. Hence, running the app will enable you to see the table view of dummy data as you tap on the configuration cell.

But the cell is still named as Deck Title. You will need to update it by creating a property for storing the selected deck. By selecting the default one, update it inside configurationItems(). Now, when you run the app it would be updated.

Updating the Selected Deck

While tapping the new deck, you would want to create a dismissal process to go back to ShareViewController. To update it in the UI, add a simple protocol for delegating the property. At the end, conform the recently created protocol with ShareViewController and make sure the delegation is set to self in ShareSelectViewController. Go back to the main app screen. Lastly, run the app once more to see the updated deck along with the reloaded configuration Items. Now you would be able to change decks at the bottom. As you would change, it would automatically update and display the deck you have selected.

Sending Information to the Server

Everything is done, and now you only have to send the information that you have collected. You would either want to send it to the dedicated server or enable the app to make use of it. As an iOS app development company, we can recommend to do this under another method included in that same boilerplate that came while creating share extension. You can then use NSURLSession for posting information to the server. Then, create an app group for replacing the dummy data with configured information. You can then use NSUserDefaults for storing and retrieving the data that was earlier scraped with the main app. To change the icon, you can refer to this post by Stack Overflow. And for changing the name, change Display Name in the settings menu for extension.

Further, you can refer this post for all the examples.
For sample code in Github, refer to this project.