Category: Apple Developer News

App Clip Codes are customizable Apple-designed markers built to launch your App Clip. When someone scans your App Clip Code, it will bring up your App Clip or, if the person already has your app installed, will directly launch into a specific part of your app. Each code has a distinct design: It’s immediately recognizable, unique to each App Clip, and provides people with a secure and reliable way to trigger your experience. Codes can even incorporate an NFC tag, allowing people to open an App Clip by simply holding their iPhone nearby without needing to scan it through the Camera app.

You can easily make App Clip Codes and customize them to match your company’s brand or internal designs. Here’s how you can create new codes and pick the right code for the experience you want to provide to your customers.

Plan for your App Clip experience

To create new App Clip Codes, use the App Clip Code Generator. When you make a new code, you can choose its colors, assign a custom URL that resolves for your app, and decide whether to create a code that supports NFC (Near Field Communication).

Single vs multiple App Clip Codes
If you’ve created a single App Clip for your app, you can make a single App Clip Code so that everyone who scans the code gets the same information. For example, if you own a restaurant, placing the same App Clip Code at every table can bring up an App Clip with your digital menu and payment options. Every instance of the single code delivers the same experience.

You can also duplicate the same App Clip Code for use on items like hardware packaging: For instance, if you have a product that requires an in-app setup experience, you can add the same App Clip Code to your packaging to bring your customers directly to the setup experience or interactive instruction manual. As with the restaurant example, you’re always bringing customers to the same experience within your app, so you only need to create a single unique App Clip Code and duplicate it across your material.

If you offer multiple App Clips or advanced App Clip experiences, you can create unique codes for each experience. For example, if you have an app for your restaurant and want to offer an App Clip for ordering takeout on your advertising as well as a different App Clip for people ordering at your restaurant’s outdoor tables, you can create discrete App Clip Codes for each that invoke different parts of the app.

Should you use NFC?
People can interact with App Clip Codes in two ways: Scan Only or NFC. Scanned codes work when someone uses the Barcode reader or the Camera app on iPhone or iPad to view the code, which then delivers a customized URL they can tap on that brings them into the app. In contrast, NFC-integrated codes let people simply hold their device near an App Clip Code to invoke the App Clip.

While you have the flexibility to choose either type to best suit your needs, we recommend using an NFC-integrated App Clip Code whenever someone can easily physically access your App Clip Code. Examples include:

• On a restaurant tabletop
• Near point-of-sale hardware systems
• In a storefront window
• On easily-accessible signage
• On a gift card, coupon, or other offer

If you integrate an NFC tag with your App Clip code, be sure to use a Type 5 NFC tag at least 35mm in diameter (or equivalent) to ensure the best experience.

Learn more about designing for NFC

If your code is displayed digitally or in an area where NFC doesn’t make sense, use the Scan Only version. Examples include:

• On distant posters or street advertising
• On signage behind a counter or otherwise out of reach
• In digital materials such as an email or social media images

Customize the look of your App Clip Code
To make your App Clip Code stand out, you can customize the foreground and background color and create something consistent with your app or company’s brand. App Store Connect provides both default App Clip Code colors and an option for selecting your own colors. Note that if you choose the latter option, Apple will automatically generate the third color in the App Clip Code to ensure sufficient contrast for an accurate scanning experience.

Create your App Clip Code

Once you’re ready to make your own App Clip Codes, you can get started in App Store Connect or through Apple’s command line tools. App Clip Codes are easy to create, letting you get your App Clip experiences up and running and helping people quickly access the right parts of your app at the right moment.

Resources

Learn more about designing App Clip Codes

Explore App Clips

Help people experience the right parts of your app at the exact moment they need them. We’ll explain how to design and build an App Clip — a small part of your app that focuses on a specific task — and make it easily discoverable. Learn how to focus your App Clip on short and fast…

Configure and link your App Clips

App Clips are small parts of an app that offer a streamlined, direct experience and help people get what they need at the right time. Learn how you can invoke an App Clip through real-world experiences like App Clip Codes, NFC, and QR codes, or have them appear digitally through apps like Maps or…

When you create a Safari Web Extension, you can help people get common online tasks done more quickly and efficiently — all while using the same extension model and APIs found in extensions for Google Chrome, Mozilla Firefox, and Microsoft Edge browsers.

If you have an existing web extension you’d like to prepare for distribution in the Mac App Store, it’s easy to to get started with the converter tool in Xcode 12. Here’s how to go about it.

Meet Safari Web Extensions

When you create a Safari Web Extension, you can help people get common online tasks done more quickly and efficiently. We’ll show you how to build a new Safari Web Extension and host it on the App Store, as well as how to use the safari-web-extension-converter tool to migrate existing extensions…

Learn more about Safari App Extensions

Convert an extension

Before getting started, make sure you’ve installed the latest versions of Xcode 12, Command Line Tools, and Safari 14. When ready, you can then run the following command in the Terminal app:

xcrun safari-web-extension-converter /path/to/my/extension/

The converter tool will search for your extension’s manifest at ./path/to/my/extension/manifest.json and generate a default configuration for your Xcode project. If the configuration appears correct, type yes at the prompt and press the Return key. If not, type no and you can enter the converter tool’s interactive mode to customize the configuration.

---

Note: Verify your keys
During the conversion process, safari-web-extension-converter will look through your manifest for any keys that aren’t supported by your installed version of Safari. If Xcode finds any issues, the app will display a warning message. If you receive this, consider whether the affected keys are critical for your extension to function. You may still be able to leave these keys in place and have everything run smoothly, but be sure to test your extension to confirm.

---

Adjust a converted extension in Xcode

Safari Web Extensions require a container app so that you can easily distribute your extension on the Mac App Store. As part of the conversion process, Xcode automatically creates and opens a container app project that contains your extension files. From here, you can test your extension, make any necessary code changes, update your extension’s icon, and upload your container app for distribution through the Mac App Store.

Test, test, and test again
While inside your Xcode project, you can build and run your extension by either pressing Command-R or the Play button in the upper left portion of the screen.

Your container app has a button to open Safari Extensions preferences. Select this button to open Safari and enable your extension in the browser.

Note: If this is your first time testing an extension through Xcode, you’ll need to enable support for unsigned extensions in Safari. To do so, follow these steps:

1. Open Safari.
2. Select Safari > Preferences.
3. Navigate to the Advanced tab.
4. Check the ”Show Develop menu in menu bar” checkbox.
5. Navigate to the Develop menu and select ”Allow Unsigned Extensions.” You may have to enter your admin password to make changes.

Make any code changes
By default, your Xcode project references your extension’s existing content as well as native Swift or Objective-C code to create the container app. After testing, you can make any needed changes to this project; any alterations you make will automatically show up as part of your Safari Web Extension the next time you build your Xcode project.

Update your icon
Xcode will use any extension icons listed in your manifest as your app icon, which will also display on your Mac App Store listing. Because Safari Web Extension icons are typically smaller, however, you may want to update to a higher-resolution version of this image for the best look.

To change your icons, select the Assets.xcassets folder in the Xcode sidebar, then drag the new icons into the appropriately-sized image wells.

Add any additional files to your Xcode project
If you need to add additional resources or code files to your extension after conversion — for example, images used by your user interface or other dependencies missed during conversion — you will also need to manually include these files in your Xcode project.

To do so, select any additional files in Finder and drag them into the Resources folder within your Xcode project, located in the left sidebar. Uncheck ’Copy items if needed’ in the file dialog to make sure these files automatically associate with your app.

Distribute your extension

When you’re ready to share your extension, sign in with your Apple Developer account to App Store Connect and upload the container app to for distribution. Remember to review the App Store guidelines before submitting to the Mac App Store; Apple reviews all extensions and extension updates to verify they work reliably.

Learn more about submitting extensions to the Mac App Store

An App Clip is a small part of your app which provides specific information that best suits a given task or situation. An App Clip Code activates your App Clip, helping people access relevant information wherever they happen to be — whether they’re picking up takeout from a restaurant, reading an article online, or passing by an advertisement in their neighborhood.

To make your App Clip Code, you’ll need to create a URL that directly connects to your content. And because codes can only hold a finite number of characters, you’ll need to design your URL efficiently. Here’s what you need to know to make and store a URL for your App Clip Code.

How App Clip Code URLs work

App Clip Codes support URLs in the following format:

https://[host][/<optional path>][?<optional query>][#<optional fragment>]

URLs must use the https scheme, all lowercase.

The host segment can only contain lowercase ASCII characters ‘a’ to ‘z’, ‘.’ and ‘-’ characters. Host is the only part of the authority component of the URL that is supported.

The rest of the URL can have zero or more path components, zero or more query components, and, optionally, a fragment component. These components can contain the following ASCII characters: a to z, A to Z, 0 to 9, and /#?=%-._,+;:&.

Learn more about creating App Clip Codes

How to store URLs efficiently in your App Clip Codes

When creating a URL, you can optimize its string length to fit within the App Clip Code’s character limit in a number of different ways.

Make it short and sweet
Above all, aim for your URLs to be as short and concise as possible. URLs with fewer characters, path, and query components have a better chance to fit into an App Clip Code.

We recommend using a short host name with as few subdomains as possible, as well as removing the www subdomain whenever possible. You’ll also want to omit a trailing ‘/’ character from the end of the URL if possible. For instance, https://www.example.com/ can be changed to https://example.com.

If you do plan to use a subdomain, consider using appclip to define App Clip-specific URLs for App Clip Codes. This special subdomain is compressed efficiently and it allows URLs to have short path and query components by eliminating the possibility of a conflict with an unrelated functionality of your website.

While adding this subdomain is optional, if you do opt to use it, it must appear as the first subdomain of the URL’s host, like so: https://appclip.example.com.

Optimize for compression
Consider using the minimum number of characters needed to uniquely identify a resource in your URLs, as long UUIDs will lower the effectiveness of the compression.

In addition, replace long query string argument names and values with short names and values to aid in compression. For example, you can turn argument names into shorter names and values into an enum, like so: https://example.com/?status=view could be restructured as https://example.com/?p=0.

Using decimal numbers as query parameter values may also lead to better compression of the URL.

Choose your words carefully
App Clip Codes offer more effective URL encoding for certain words in the URL path component, like account, app, download, shop, upload, visit, and more. Consider using these whenever possible to improve your encoding and compression. You can view the full list of words within Apple’s documentation.

Learn more about encoding a URL in an App Clip Code

In addition, a URL that contains zero or one path component from the list of special words and contains zero or more query components with ordered argument names p, p1, p2, and the like has a higher likelihood of fitting in an App Clip Code. Some examples:

https://appclip.example.com/shop
https://appclip.example.com/shop?p=123
https://appclip.example.com/?p=123
https://appclip.example.com/?p=123&p1=4632

Resources

Learn more about creating App Clip Codes in App Store Connect

Learn how to generate App Clip Codes

Explore App Clips

Help people experience the right parts of your app at the exact moment they need them. We’ll explain how to design and build an App Clip — a small part of your app that focuses on a specific task — and make it easily discoverable. Learn how to focus your App Clip on short and fast…

Configure and link your App Clips

App Clips are small parts of an app that offer a streamlined, direct experience and help people get what they need at the right time. Learn how you can invoke an App Clip through real-world experiences like App Clip Codes, NFC, and QR codes, or have them appear digitally through apps like Maps or…

The App Store will soon help users understand an app’s privacy practices before they download the app on any Apple platform. On each app’s product page, users can learn about some of the data types the app may collect, and whether that data is linked to them or used to track them. If you haven’t already, enter your app’s privacy information in App Store Connect.

This information will be required to submit new apps and app updates to the App Store starting December 8, 2020. Existing apps will remain available for download.

Learn more about the details you’ll need to provide

Learn how to provide app privacy information in App Store Connect