Skip to content

aheze/MyAppClipWebsite

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 

Repository files navigation

AppClipQuickStart

Instructions on how to make an app clip. This will eventually get cleaned up and transformed into an article.

  1. Add a new target

File -> New -> Target

  1. Choose "App Clip," then hit Next

Screen Shot 2021-04-03 at 3 18 51 PM

  1. Fill in the name of your app clip (I did "MyCoolAppClip")

Screen Shot 2021-04-03 at 3 19 50 PM

  1. Press Activate

Screen Shot 2021-04-03 at 3 20 22 PM

  1. Your project navigator should look like this:

Screen Shot 2021-04-03 at 3 21 23 PM

  1. Now add, edit, and make the App Clip just like you would for a normal Xcode project. For example, I added this inside MyCoolAppClip -> ContentView.swift:
struct ContentView: View {
    var body: some View {
        Text("Hello, world! This is an app clip")
            .padding()
    }
}

Screen Shot 2021-04-03 at 3 22 57 PM

  1. Once you're done. it's time to configure the URLs. First, go to Project Settings -> Targets -> MyCoolAppClip -> Signing and Capabilities -> + Capability.

Screen Shot 2021-04-03 at 3 23 50 PM

  1. In the popup, select "Associated Domains".

Screen Shot 2021-04-03 at 3 26 01 PM

  1. Add your domain inside the text field, in the form of appclips:<DOMAIN_NAME> Mines is appclips:getfind.app.

I'm not sure if you can do this without a custom domain. You might need to buy one first, then link it to GitHub Pages. However, you can try putting appclips:aheze.github.io/MyAppClipWebsite here (replace with your website that you will create in Step 11). Not 100% sure that will work though...

Screen Shot 2021-04-03 at 3 26 48 PM

  1. That's all you need on the app side. Now, it's time to configure the web page where the app clip will be launched from. You'll need a place to host an apple-app-site-association file.
  2. I like GitHub Pages, because it's free. I've already set up everything in this repo, so click Use this template at the top of this pace. Enter a name for your repo (I did MyAppClipWebsite).
Use this template Make sure to check "Include all branches"
Screen Shot 2021-04-03 at 3 33 11 PM Screen Shot 2021-04-03 at 3 33 30 PM
  1. Enable GitHub Pages in the Settings tab of the newly-made repo. Select branch GitHubPages and / (root) folder.

Screen Shot 2021-04-03 at 3 42 44 PM

  1. Select the "GitHubPages" branch, then check out the apple-app-site-association file.
---
layout: none
permalink: .well-known/apple-app-site-association
---

{
    "appclips": {
        "apps": [
            "YA533DMD5J.aheze.AppClipQuickStart.Clip
        ]
    }
}
  1. Replace YA533DMD5J with your own Team ID. You can find this at:
https://developer.apple.com/account/#/membership/

Screen Shot 2021-04-03 at 3 39 07 PM

  1. Also, replace aheze.AppClipQuickStart.Clip with your app clip's Bundle ID. You can find this inside Xcode, at Project Settings -> Targets -> MyCoolAppClip -> Signing and Capabilities -> Bundle Identifier.

Screen Shot 2021-04-03 at 3 41 08 PM

  1. Wait a little bit, then try going to https://aheze.github.io/MyAppClipWebsite/.well-known/apple-app-site-association (replace MyAppClipWebsite with the name of your newly-generated repo). Your browser should download that file, which should look something like this:

Screen Shot 2021-04-03 at 3 46 40 PM

  1. That's all you need. Now, once you upload your app to App Store Connect, you should be able to configure your app clip.

Screen Shot 2021-04-03 at 3 47 43 PM

  1. Once your app has been approved, try going to https://aheze.github.io/MyAppClipWebsite/. You should see the app clip!

That should be it. You can find a live example at getfind.app.

If you have any questions, here's my contact info:

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages