iOS 14 Ships Tomorrow 09/16/2020 - But App Clips Dev is Broken?

So Apple just announced that iOS 14 ships tomorrow 9/16/2020.

However, there are many threads on here showing how App Clip development is broken and there is no way to test the end to end experience.

App Clip Development and Testing seems to have been broken since iOS 14 Beta 5

What is going?

Replies

Hi bumbleparrot,

Can I ask you to give me more details on what's broken, and what your expectations are regarding the end-to-end developer experience?

Thanks!
How about not showing on the app Clip card that we’re not in the right region or country.

Supposedly we now have the GM version of iOS 14 so shouldn’t App Clips now start working on iPhones with IOS 14 GM.

I’m using an iPhone 11 Pro Max and trying to use NFC.

The card shows but always white with the warning about country or region.

shouldn’t it all now start working like it would for consumers tomorrow?
Hi creatingrev,

Can you link to a screenshot of the region warning, so I can see what you mean? Is this your own app's app clip you are testing? Are you using Local Experience or TestFlight for your tests? If TestFlight, what's the App Store ID of your app? And please also let me know what region and language your device is set to.

If you don't feel comfortable sharing this information here, please submit a feedback report with the information and let me know the feedback number.

Thanks!
ZK
Hi @DTS Engineer.

There are 2 major issues with theApp Clip Development Experience.
  1. The activation and display (invocation) of the App Clip Card

  2. End-to-End Testing Experience for the App Clip itself.

There are issues with the two as of right now.

Activation and Display of the App Clip Card
  • In iOS 14 Beta 5, there was finally a method to make the App Clip Card show. That method was to goto the developer settings in iOS and setup the "Local Experiences". After you set this up, it still required you to use Safari to navigate to a webpage that had the Smart Banner setup. From there the Smart Banner would appear at the top of the Safari browser and clicking it would make the App Clip Card that was defined in Local Experiences display. This stopped working after iOS 14 Beta 5

  • After it stopped working, I have not found any other way to get the App Clip Card to show. I've tried QR Codes, going to an enabled URL in Safari, and Sending the URL via iMessage.

End-to-End Testing Experience
  • Even when I could get the App Clip to show back in iOS 14 Beta 5, there was no way to click the Call to Action button to get into the App Clip itself. You were only able to test that the App Clip card would display. The button was grayed out and not clickable.

  • This leaves us with no way to test the end to end experience like a user would get in production.

  • We would have to test the invocation of the card and what it displays as one experience.

  • We would have to then test the entry into the App Clip as a separate experience (via Test Flight).

As developers we want to be able to experience the full end to end flow as if we were the user. Thats the only way we know that all the pieces of the experience is working together as expected.

With iOS 14 going live tomorrow. Will app clips start working?
Here’s the screenshot you requested linked below

hope that helps :)


dropbox.com/s/7sbxbyzufg1xp51/2020-09-15%2017.41.03.png?dl=0

Hi creatingrev,

Are you able to invoke the App Clip Card via NFC in iOS 14 Beta 8?

Thanks!

Hi bumbleparrot,

I tested this with the Fruta sample project, and was able to get it working. Note that the sample project has been updated, and now requires the GM Xcode 12 and iOS 14.
Here is the process:
  1. Configure the Fruta sample project according to the instructions in the README.

  2. Build and run the App Clip scheme on your test device once, so the App Clip is deployed to the device.

  3. On your test device in the the Developer app, define a Local Experience:

    • URL Prefix: https://fruta.example.com. In theory, this can be any URL that makes sense for your app.

    • Bundle ID: The App Clip target's bundle ID.

    • Title: Something that makes sense, i.e. "Order a smoothie."

    • Subtitle: "It's yummy!"

    • Action: Open

    • Don't forget to save the Local Experience.

  4. Create a regular QR code or NFC tag with the same URL: https://fruta.example.com.

  5. Add the QR Code Reader button to Control Center on your test device.

  6. Use the QR Code Reader to read the QR code, or touch the NFC tag. I do not have one, so I can't test NFC tags.

The card should show up after step 6, where you should be able to tap on "Open" and bring the App Clip to the front.

Give that a shot and let me know if there are still issues.

Thanks,
ZK
Hi creatingrev,

Thanks for the screenshot. I have some more questions:
  • How are you invoking the App Clip? Local Experience? TestFlight?

  • What is the URL?

  • If TestFlight, is it possible that in App Store Connect the App Clip is restricted to a region, and your device is set to a different region?

Thanks,
ZK
Hi ZK (DTS Engineer)!

Thanks for these instructions.

I can report that it worked on iOS 14 Beta 8

There are two things different from the instructions you provided vs what I was doing.

QR Code Scanning App
  1. Use the QR code scanning app via Control center.

  2. The camera app in iOS 14 Beat 8 no longer reacts to a QR code. It no longer prompts to open a URL. (The camera app still prompts to open Safari when it sees a QR code in iOS 13).

Install the App Clip via Xcode Before trying to test the App Clip Card
  1. Installing the app clip via Xcode first will allow the App Clip Card's Call to Action button to take you into the App Clip.

  2. When the Safari Smart App Banner worked in iOS 14 Beta 5, clicking it would show the App Clip Card.

  3. If you had the App Clip installed (via TestFlight), the Safari Smart App Banner would take you directly to the App Clip, bypassing the Card. This is why I didn't install the App Clip via Xcode. I was able to reproduce this behavior by uninstalling the App Clip and going to saferhood.org in Safari.

Safari Smart App Banner still doesn't work
  1. Going to a website with Safari Smart App Banner enabled still doesn't work.

  2. My site association file is here: saferhood.org/.well-known/apple-app-site-association

  3. And I have the Meta tag as <meta name="apple-itunes-app" content="app-clip-bundle-id=com.bumbleparrot.saferhood.Clip, app-id=1498248101, affiliate-data=myAffiliateData, app-argument=myAppArgument" "="">

The apple-app-site-association file is like so:
{
"appclips": {
"apps": ["URLVBAN9B7.com.bumbleparrot.saferhood.Clip"]
}
}

I'm going to upgrade to NON BETA iOS 14 and retry the Safari Smart App Banner

Is the QR Code and NFC tag currently the only way to invoke the App Card?

Thanks!
Bumbleparrot
I’m invoking via NFC.
I’m not using local expertise because we’re all out of that aren’t we note that iOS 14 is out.

As for the URL
it’s vbukit.com/tnd/

and the region set is everywhere

shouldn’t we be out of the test environment?

Isn’t it time now that we’re all public?





I also had not been able to see an app clip "in action," so I read ZK's instructions very carefully and figured out two things I had done wrong. Hopefully this will help others. Note that those instructions also worked for my app in Test Flight.

Step 3 - Enter the bundle ID, not the app ID, in Settings / Developer / Local Experiences. The bundle ID does not start with the team ID; it usually starts with "com".

Step 5 - Enable the optional QR Code Reader in Control Center and use it to read your QR Code. DO NOT use the Camera app with its built-in QR Code Reader. For some reason, the Camera app does not invoke the app clip card. Is this a bug? I haven't checked to see if it works in the iOS 14 GM Camera app.

Edit - Looks like @bumbleparrot provided the same information and more at the same time!
Hi bumbleparrot, creatingrev,

I am happy bumbleparrot that you are making progress! We have documentation on testing the launch experience. There are three ways.
  • Direct from Xcode by running the App Clip target.

  • Local Experience. This is still an important testing scenario for apps under development, that have not yet been uploaded to App Store Connect. (cc. creatingrev)

  • TestFlight.

To answer your questions: the documentation I linked to above does not mention launching the App Clip from a Smart App Banner, so that's most likely not an option in the GM. Also, on the App Clip page, there is a note in footnote 14 that the Camera App will add support for reading App Clip Codes in a future update. Until then, use the QR Code Reader in Control Center.

Thanks,
ZK
Hi,

Tldr; After trying again and again, this is shortly what I've found: If there's already an app clip installed before(via Test Flight, for example) scanning Qr code(from control center) works well for Local Experience. Otherwise, it does not work, open button disables itself first, and then gives region error. If there's not local experience(or its cache deleted) at all, it gives region/country error too.

ZK, could you please confirm that there was no app clip installed while trying Qr Code method?

====

We're receiving the same error with @creatingrev, but we're trying to invoke the clip via Qr code for Local Experience. Our app clip works fine via Test Flight.

At first, using a phone that already had a working app clip, local experience worked well with Qr code. Then, to test, I deleted the app clip from settings and scanned Qr code again, popup showed nicely but "Open" button was inactive. It was unclickable and it's color was different(light blue).

After that, I deleted the cache & local experience and registered local experience again. This caused us to receive the error of @creatingrev when we scan the Qr code.

Regardless of the country(actually we do not have any restriction but tried in different phones from different countries/regions), it starts to load the "open" popup and then suddenly halts and shows "This app clip is not currently available in your country or region".

Our main aim is to use Smart App Banner, which is also not available now. Here's the meta form example:

Code Block html
<meta data-react-helmet="true" name="apple-itunes-app" content="app-id=123456789, affiliate-data=2002I6Tq, app-clip-bundle-id=com.Company.AppName.Clip">
(I assume the content order is not important here as long as it's true, just to make sure, eh?)

We applied steps of DTS Engineer for local experiences correctly.
bumbleparrot

I wanted to apologize.

In my zeal of supporting your question, I accidentally partially hijacked it.

I truly did not mean to do so, but with all the excitement of getting App Clips out there finally, I accidentally did.

Therefore I am truly sorry for that and I owe you one.

I look forward to both our App Clips getting into iTunes and consumers hands very shortly.

Again I humbly apologize.


@creatingrev it is all good! We are in this together!

I think some good information came out of this post and I hope it helps others!