Chris Love

Last Updated - Wed Jan 20 2021

At WWDC 2020 Apple announced a new feature for iPhones, App Clips for iOS 14.

What you need right when you need it!

Sounds awesome!

But are they really an innovation?

No, not really.

Are they useful?

The concept yes, but the execution no.

Is there a better, available on all platforms way to accomplish the same thing?

Yes the web has had this feature since QR and barcode scanning was added to phones several years back, including iPhones.

Another reason why progressive web applications are superior to native applications.

Many are comparing the new app clips to progressive web apps, but clips are more analogous to a single web page.

The problems mobile apps have are high install friction and of course the space they occupy on your phone.

Most consumers only use a small handful of apps. Typically 10 or fewer. Most of their app screen time is within a single application. The most popular brands are Facebook's social media platforms, YouTube and other video services.

When a consumer is searching for a local business or wants to make a contactless purchase in a store they do not want to fuss with downloading an app. They want to make the purchase as quickly as possible.

We also know roughly 3% of app usage is retail apps. The main reason, there is so much effort required to download an app to do the exact same thing you can do in the website.

App clips are designed to facilitate this instant engagement experience.

A problem they will help address is the increasing demand for touchless or contactless experiences.

As concerns over transmitting virus and bacteria are at an all time high, consumers are seeking experiences to reduce potential shared touching opportunities.

Cash payments are common transaction being replaced with digital payment options. But it extends beyond this.

If you want to visit a local sit down restaurant menus are going digital. But to view the establishment's menu you must download an app? Not many will fuss with the exercise.

The concept of an app clip reduce the app install friction, but are limited to just the Apple ecosystem.

This is a great idea, but has been available in the web for years. After discussing App Clip details I will review a simple implementation in a progressive web application.

What Are Apple App Clips for iOS 14?

App clips are a light weight way for a business to create a direct hook into a call to action.

Most of the examples in the announcement video focus on driving fast in person purchases. This concept is good news for contactless payments and customer experiences.

The way clips work is an iPhone user sees an Apple App Clip code, QR or NFC. They can scan the code with their phone and it will download the clip and they can perform a quick call to action.

The App Clip is a small portion of your app and does not require the App Store process to accomplish a goal.

For most this is purchasing a product, either in person or even online.

When the code is download a small panel is displayed at the bottom of the screen. From there the consumer can perform the action, such as completing a purchase.

Clips do not need to be limited to purchases. You could also use them to drive communications. For example sharing directly to a social network with your message, or communicating to your staff.

In a restaraunt diners could send requests to the host for refills or order updates.

The process requires a portion of your app, binary code to be downloaded and executed before the experience works. A clip can be up to 10MB in size.

Why The Concept of an App Clip is Good

The concept is great. We need a fast, easy to use mechanism for customers and visitors to quickly access information and processes. The rise of touchless and contactless customer experiences will drive the adoption of clips and clip like technology.

Anything that reduces friction in the customer and even employee journey should be welcome by everyone.

Always make it easy to interact with your brand and clips do this.

Traditionally the mobile app experience is very frustrating. A user must find the app. Then installe the app. Then register and or sign in with an existing account. They may also have to wade through a series of permission prompts etc.

Each step introduces more anxiety and reduces chance your application install is complete.

Once downloaded, around 1 in 10 app downloads are used more than once. And beyond that 90% of app time is isolated to a user's favorite app. The favorite app is typically their favorite social media, YouTube and other video providers, not your app.

When placing an order (think food) or making an instore purchase no one wants to really fuss with the app install process. They want to just place the order and leave.

So app clips eliminate a common point of frustration.

How Deep Linking Into Your Website Accomplishes the Same Thing

Apple touts App clips as a great way to discover apps. This is important to highlight because App Stores are horrible for discovery.

As a brand you are restricted in the messaging and touch points to surface your app.

On the web you have no restrictions you can add as many pages and as much content as you want to attract customers.

Discovery has always been the web's superpower over the binary blobs called apps.

To market an app you have to use a website. And that website serves as your discovery mechanism.

With a PWA when someone visits one of those unique discovery points your app is installed. No store required. It just works.

Streamlining Authentication and Payment in a PWA

The Apple announcement talked about not having to enter a credit card or logging in due to Apple integrated services. On the web we have similar abilities.

Today browsers allow you to store credit card info locally to auto fill forms. They also support the web payments API, which streamlines the experience as well as adds a layer of security.

As for authentication, again you can use single sign-on and even biometric authentication. Even in App clips you have to identify at some point. The Apple identity service is providing the same claims or personal information supplied by all other OAuth identity services.

Drawbacks to iOS App Clips

If you watch the announcement you feel pretty excited about app clips. What a great way to interact without fussing with an app install.

But there are drawbacks for both the business and the customer or guest.

Cost
Development Change: Probably forcing more application code bases to abandon things like React Native, Iconic, etc.
App Clip Code is Proprietary
Closed Audience
Too Large

Costs

Native app development is just more expensive than the web. No way around it.

This is just another aspect, unique to Apple your app developer team will have to master. That of course will take time and money.

Development Change

Today you design your application as a monolithic organsim. Now you need to structure it to provide silos for clips.

This means you may need to restructure your application from the ground up. Since I don't know iOS application development I can't speak to the details. I do know how applicaitons are normally structured. Global scopes and dependencies tend to be all or nothing, which means the bulk of an application will be included.

I suspect you will have limitations as to what you can do and not do in an app clips. And most likely you will be restrained to native iOS (XCode) for the time being.

My guess is third party langauges and frameworks may not work. This seems to be a sentiment echoed by others. Time will tell. This may leave React Native, Xamarin, Iconic and other popular platforms out in the cold.

Since most iOS apps are hundreds of megabytes I can imagine these working within your normal application context. They will have to run on top of some sort of shared plumbing to limit clip size.

App Clip Code is Proprietary

The App Clip code does not use a standard QR or barcode. This means the codes are unique to Apple products.

This means you have to use their service to generate the printed code, again limiting your scope.

QR and barcodes are based on public standards. They have been in use my entire lifetime and work well.

I am not opposed to a new digital code format, just saying it is not a public standard and that means it will be difficult to adopt in the broad sense.

Apple is at least allowing you to use a QR code or even NFC. Unfortunately iPhone Safari does not support the NFC API yet.

Closed Audience

Speaking of closed world. This feature is only available to Apple iPhone owners. This excludes Android and Windows users. Yes Windows!

You have to think beyond a single phone and consider everyone. Even in the US Android has equal share with iPhones.

Microsoft Surface devices are also used by folks on the go, office, coffee shop, etc.

Just like FaceTime you can only use this feature for Apple users, not everyone.

Too Large

You have a 10MB limit to the size of your app clip. 10MB is not a fast load, even over LTE. It can also be expensive for the customer on a metered connection.

If I create a progressive web app that requires 10MB to accomplish a quick task just kill me. A properly developed PWA for the common use cases Apple highlighted should require about 50-100kb of code (HTML, CSS, JavaScript), plus art work (images).

For mobile images should be sized correctly, so probaby not more than a megabyte in most instances.

You have 1 second to engage, 3 in a worst case scenario. No way that happens with more than a few hundred kb.

By pointing a customer directly to the call to action or purchase they not only have direct access to your landing page, they have your entire app.

No more fuss to download. App clips will require additional downloads for a user to really use your app.

Implementing the App Clip Concept in a PWA

Deep links into the web are nothing new. That is what makes the web so great, direct links to specific content.

When combined with a QR code for quick access on mobile the experience is a web version of App Clips. I am going to call them PWA Clips

The overall experience is similar to how App Clips have been presented.

Scan a QR code
It will open a web page (URL)
The user can perform the desire action, such is purchasing a product, ordering their meal, reserving a seat, etc.

On an iPhone this is accomplished in the following steps:

1. Open the Camera app from the Home screen, Control Center, or Lock screen.

2. Select the rear facing camera. Hold your device so that the QR code appears in the viewfinder in the Camera app. Your device recognizes the QR code and shows a notification.

3. Tap the notification to open the *link* associated with the QR code in Safari.

On Google Pixel phones (Android), you can use the camera app. Just make sure you have enabled Lens. Once Lens is enabled you can select 'more' in the bottom right corner.

This displays an application icon sheet with various tasks. Select 'Lens' and then point the camera at the QR Code.

Just like the iPhone you can then tap the code, it will be highlighted with the value displayed. Tapping the code will open the target URL in the default browser.

Other Android may have different options to read QR codes so be sure to check for your device. Some phones, like the latest Samsung's will just recognize QR codes without enabling the feature.

For a business you need to generate the codes. This is where having a PWA platform to automatically generate the codes for your products and landing pages is helpful.

I am adding this feature to several of my core offerings. I will update as soon as one is ready to test drive.

Do you really want to fuss with printing out all those QR codes?

It depends. I can see how this could be very frustrating and possibly expensive. But if you are already printing price cards for retail products or signage in your business it might pay to add a single QR code for desired actions.

If nothing else you can take them directly to your website, which of course is your application.

Does it have to be a QR Code?

Maybe not, but I don't know that we are 100% there.

To move beyond a QR code we need a robust object recognition engine, which is available in Microsoft Azure. However, it still needs to be trained to your product line as well as mapping to target URLs.

A nice idea for a future service, but outside my scope 😀.

Maybe a year or two down the road.

Replace the App Clip Sheet with an Add to Homescreen Prompt

When I saw the App Clip prompt I immediately thought it was the same thing as the add to homescreen prompt for PWAs.

The difference is the clip prompt is displayed as a pre-step to opening the web page. Where a QR to open a page in your PWA opens the page directly.

However after the desire action is completed you can prompt the user to add your PWA to the homescreen. In fact you can use the App Clip sheet layout as a template for that prompt.

I created a simple implementation of this in my giant samples project. The result looks like this:

The goal with the add to homescreen is to nudge the relationship to the next level by having your icon visible with the other apps on their device. It also means the next time they engage it will open in full screen mode, just like an app.

How you do this is up to you. In Chrome and Edge there is a native permission like prompt the user has to use to install on Windows and Android. Most browsers, including Safari, allow adding PWAs to the homescreen, but you will need to guide the user through the process.

I have an add to homescreen helper library available as well as a tool to help you scaffold the initial PWA assets (manifest, service worker and icons).

Once your PWA is installed on a device, Edge and Chrome also support shortcuts. This is a context menu of direct links to common pages and targets in your app. Sort of like an App Clip, but without a code to trigger.

Your Next Steps

If you want a faster to market and more cost effective business solution chose a progressive web app.

If you want to deal with Apple's in app payment tax, AppStore requirements and higher development and maintenance costs then build an app.

App clips solve a common mobile app issue and that is the install experience for a one off or quick task.

It is also a way Apple is trying to muffle common app criticism and that is the problem getting consumers to download apps.

Remember, this is an Apple only feature and relies on proprietary standards. Using this feature restricts your reach, where the web reaches everyone with open standards.

Be honest, it takes a lot of relationship building for a consumer to download your app. No one wants to download an app for that quick purchase or to send a message to your business.

The web is built for the fast interactions. Plus with a PWA your entire app is installed without an app store. That quick purchase can quickly lead to a long term relationship. The user can be prompted to continue their relationship with you by installing or adding your PWA to their homescreen, just like an app.

This of course makes future interactions easier.

I think app clips only highlight the power of the web and its lower cost entry point as a wise choice for businesses.

Its time you add the concept of an app clip to your business engagement practices. But do so for every potential customer, not just a subset of your audience.

Progressive web apps allow you to engage with everyone, everywhere on every device and for lower ownership costs.