Category: Apple Developer News

August 31, 2020

You can now watch the Special Event Keynote, Platforms State of the Union, and over 200 sessions from this year’s Apple Worldwide Developers Conference with Japanese and Simplified Chinese subtitles. Available on the web, iPhone, iPad, Mac, and Apple TV.

View WWDC20 videos

Safari Web Extensions can add custom functionality to Safari 14 beta using the same WebExtensions API used in other browsers, such as Chrome, Firefox, and Edge. And with a new conversion tool in Xcode 12 beta, you can quickly bring your existing extensions to Safari and make them available on the Mac App Store this fall.

Learn more about the WebExtensions API

When designing games, Philipp Stollenmayer has a confession to make. “I’m easily bored,” he says. “And I just don’t want the player to be bored when I am.”

The German developer’s aversion to monotony has fueled a prolific number of creative and off-kilter titles over the years, including Sometimes You Die, Sticky Terms, and Bacon — The Game. 2019’s Song of Bloom goes further still. The Apple Design Award-winning puzzle game is enigmatic and ever-shifting, with a series of layered and intertwined levels that invite people to tap, shake, draw, and explore their device.

“It’s an abstract game [that develops] into something more understandable with time,” says Stollenmayer. “The more you get in the story, the more you discover and the more the interaction changes.”

This concept is a core part of his philosophy around game design: create an instantly graspable idea, then keep thinking, pushing, and inviting players go further. There’s no true ‘goal’ beyond the exploration of the narrative and the puzzles — in Stollenmayer’s words, the game is “user experience in its truest form.”

Song of Bloom grew from one of Stollenmayer’s vacation experiments. Having taken a looping video of waves on the beach while in Italy, he decided to try and add a new aspect to it with device rotation: when the video flipped, the water would fall out of frame. From there, “it just became a process of triggering new ideas and new experiments,” he says.

Unlike Stollenmayer’s other games, nothing is constant in Song of Bloom. “Not the elements, not the interaction, and not even remotely the style,” he says. One puzzle might look like a rough sketch, while others include hyper-realistic popcorn kernels. His favorite puzzle of the series? A stop-motion risograph-inspired milk carton.

There is always this doubt in the back of the mind if what you are seeing is real. This contributes a lot to the mood I am trying to convey.

Philipp Stollenmayer

Every image in Song of Bloom is computer-generated, the result of experimenting with code — sometimes with unintended results. “As a designer who isn’t the greatest programmer, my code usually creates visual errors,” says Stollenmayer. “On the way, I would let myself [be inspired] by my own faults.”

That included manipulating items to make them look more like how they might in a real-world setting. For example, one puzzle, which requires someone to virtually knit an item, includes the sort of stray holes and tiny offshoots that you might expect from a newer knitter. “Making digital versions without these faults is much easier,” Stollenmayer says. “But copying the faults creates moments where you ask yourself: Could this be real?”

He drew inspiration from immersive installations and puzzle games alike, including multimedia artists Laure Prouvost and Franz West and games like Blackbox, Device6, and Prune. “I look at a lot of art to get a sense for color, composition — but also how to control and transform surroundings,” he says.

I am interested in the between, where it all comes together, because in our world, nothing exists without context.

Philipp Stollenmayer

Each visual, haptic, motion, and verbal cue within the game is designed to get the player to explore that space and interact with its imagery. Because the puzzles are often highly abstracted, Stollenmayer used haptics to help guide people through the game — using them to signify mood in higher- or lower-stakes scenes or aid someone in evaluating potential solves. “Like in the real world, the player expects a reaction from every action,” Stollenmayer says.

One of his earliest concepts for transitioning between puzzles in Song of Bloom was that of someone blinking their eyes: Solve the puzzle or move to the main screen, and the entire screen blinks in and out.

Stollenmayer experimented with several multitouch gestures around that concept, including a pinch gesture, before settling on a button — a single curved line — in the corner. “I had to get it into the player’s mind,” he says. That meant creating something easily findable and understandable, and not adding gestures that might get triggered by chance during the exploration of a puzzle.

That thin curved line is one of the only pieces of consistent, persistent interface amidst Song of Bloom’s many artistic changes. “Like the home bar on full screen iPhones, it’s just there to remind you that [it] exists, without disturbing the running scene with any content or contrasting style,” Stollenmayer says.

On tap, it allows people to return to the game’s main screen and view the branching tree of puzzles they’ve helped grow. This tree also serves as the game’s sole hint mechanism, letting people use long presses to peek at possible areas to focus on within the game. The more you play around with it, the more the story (and tree) grows and the more hints you discover. Along with original music, it’s this fertile combination of forces that earns the game its name.

With so many different art styles and creative influences, it’s amazing how effortlessly they all blend together in Song of Bloom. The story is important, of course, but for Philipp design is really about how it feels. Call Song of Bloom what you will — a game of personal discovery, a provocative tale of art and clues — for Philipp Stollenmayer, the goal is simply to play; to make people feel at once captivated and liberated all in the same hour-long session.

In Song of Bloom, you just play for the sake of playing. And this is what I was trying to achieve — to help the player get lost in his own interpretation.

Philipp Stollenmayer

Learn more about Song of Bloom

Learn more about Song of Bloom on the App Store

Download Song of Bloom

Art can reflect emotions we can’t process in spoken word alone: Paintings capture these feelings in color and scale, films reflect our world back to us through new light, and music puts melody to the words we don’t know how to — or cannot — say.

The road of relationships is particularly well-traveled where art is concerned. Sayonara Wild Hearts, however, uses the approachability of the topic and transforms it into an exploration on lost love, finding independence, and moving on. Ever-shifting gameplay and an electrifying beat capture the stages of reflecting on a broken relationship, illuminated by a psychedelic canvas of bright rainbow colors and geometric shapes.

“This is a game that is very much about the music,” says Simon Flesser, who along with his co-founder Gordon Gardebäck makes up the game company Simogo. While the two have often created playlists of brainstorm music and scoring for their games, the conceit for Sayonara was unique: What if you could take the ubiquity of the breakup album and make it interactive through the best tropes of 80s and 90s arcade games?

“We wanted everything in the game to echo that sense of approachability,” Flesser says. “[And] we naturally fell into the idea of wanting to make something that felt like the arcade games we great up with and played when we were young.” Games like Star Fox provided inspiration for the team, as did the musical integration through titles like Rez. “We [also] often try to find inspiration in things we don’t necessarily like, but see the potential in,” Flesser says. “We looked at games that use video a lot… where those game fail in interactivity, they really succeed in spectacle. So we wanted to try and capture that feeling, while not losing the feeling of being in constant control of the game.”

To capture the musical foundation for the game, Simogo began with a large playlist of music that represented the essence of the project. “It started very differently, with a much more sinister tone,” Flesser tells us. The game’s prototype reflected this darker style — until, one day, an overly energetic pop song from the playlist came into rotation during a playtest.

“It just clicked,” Flesser says. “I literally said [to the team], ‘This is it.’” They began writing original pop songs around this new tone the very next day. And as the new songs came into focus, the prototype’s color scheme began to shift as well. “[The songs] were in hues of purple and pink and blue,” Flesser says. “It painted the game for us, the music.”

Go with what your heart tells you and what your gut tells you… Because I think that’s the only way that you will get something that feels like it has something to say or that it’s an honest piece of work… once you start thinking too much about what you’re making and what you’re trying to say with it, then there’s some kind of intangible magic lost because the project needs to tell you what it is instead of you telling the project what it is.

Simon Flesser, Simogo

Simogo continued playing with recognizable themes and objects as the team refined characters for Sayonara. “[Characters] are all based on cards from the Major Arcana deck,” Flesser says. The tarot cards also influenced some of the broader conceptual designs and bigger items like the vehicles driven by various game characters.

Within the tarot card frame, Sayonara’s distinctive colors and geometric shapes create contrast between characters and the background, providing crisp views as people play through the game’s chapters with taps and swipes. “We needed to work with very simple shapes and distinctive colors because it’s just swooshing by… you can’t have much detail,” says Flesser. “We worked a lot with the contrast between dangerous stuff, positive stuff, characters, vehicles.” Each of these items was both differently colored and shaped to provide the maximum best possible contrast.

Because the game moves so fast, it was imperative to create controls both easy to follow and intuitive to use. As such, the team intentionally kept the controls platform agnostic. This also helps the game live equally at home on a touchscreen, third-party game controller, or Apple TV remote. “We opted for a more swiped base input for gameplay so that the player avatar moves when the player actually moves their finger,” Flesser says.

Swipe controls continued to evolve as the team tested prototypes, with the game’s constant camera movements and zooms being a particular challenge. “We definitely learned a lot about feedback in 3D space versus 2D space,” Flesser says. “The same type of movement will feel radically different depending on how far away the camera is [and] how much the camera moves versus how much it rotates around its own axis or around the player avatar axis.”

To smooth the experience, Simogo adjusted swipe responsivity and feedback to the camera’s active perspective and zoom level, while keeping the character in the same relative space.

Together, this kind of care and design work in harmony to make Sayonara Wild Hearts a standout game on Apple platforms. Flesser had this to say about the game’s journey to Apple Design Award-winner:

We always just want to make something that you enjoy yourself. And if you do something you enjoy yourself, then chances are that there might be one or two other people that will enjoy it as well.

Sayonara Wild Hearts

Download Sayonara Wild Hearts

Learn more about Sayonara Wild Hearts on the App Store

Many websites and apps offer additional login security in the form of SMS-delivered codes. On iPhone, Security Code AutoFill makes it easy for people to quickly supply these codes by offering them in the QuickType bar. On a Mac running macOS Big Sur, Mac Catalyst and AppKit apps can take advantage of this feature as well.

Additionally, starting with iOS 14 and macOS Big Sur, we’re adding an extra layer of security to SMS-delivered codes by allowing you to associate codes with a specific web domain.

How domain-bound codes work

When you use a domain-bound code, AutoFill will suggest the code if — and only if — the domain is a match for the website or one of your app’s associated domains. For example, if you receive an SMS message that ends with @example.com #123456, AutoFill will offer to fill that code when they interact with example.com, any of its subdomains, or an app associated with example.com. If instead you receive an SMS message that ends with @example.net #123456, AutoFill will not offer the code on example.com or in example.com’s associated app. This makes it harder for an attacker to trick someone into entering one-time codes into a phishing site.

While iOS and macOS will also display regular SMS-delivered codes in addition to domain-bound codes, we encourage everyone employing this authentication method to adopt this standard to provide a more secure experience for people on your website or app. If a message contains no domain information, it will continue to be offered in all relevant fields through AutoFill.

How to set up SMS domain-bound codes

You can take advantage of domain-bound codes on both websites and apps with associated domains.

Set up domain-bound codes for your website
In most cases, AutoFill should work automatically on Safari for iOS and macOS Big Sur, and requires no additional information from you. In cases where it does not, you can add the autocomplete=one-time-code attribute to your web page’s text field. This cues Safari to offer applicable codes in that field.

Set up domain-bound codes for your app
You can support domain-bound codes by providing an associated domain for your app. If you support Universal Links for your domain, or if AutoFill is currently suggesting saved passwords for your domain in your app’s login screens, your app is already associated with your domain.

Learn more about supporting associated domains

Note: If you’re running into issues when testing your app’s login flows, you may need to provide an additional hint about which fields in your app are one-time code fields. For iOS and Mac Catalyst apps, set the field’s textContentType property to UITextContentType.oneTimeCode. For AppKit apps on macOS, NSTextField has a contentType property that you should set to NSTextContentTypeOneTimeCode.

---

How to format SMS domain-bound codes

Once your app or website is set up to receive domain-bound codes, you’ll need to provide a simple addition to the SMS messages you send through your backend service to include both the domain and code. Here’s what the text you’ll send looks like:

123456 is your Example code. @example.com #123456

Everything above the last line of the message is freeform. You’re free to customize this part however you like, but it should be something that makes sense to people receiving the code.

The last line of this message gives AutoFill on iPhone, iPad, or Mac the information it needs to bind the domain and code together and suggest the code for the appropriate website or app.

In order for domain-bound codes to work properly, you must include this information in the last line of the message, and it must contain the domain and code in the correct order.

@example.com

This is the first part of that last line, and contains the domain of the app or website where you want the code to fill in. Make sure to put a single space after your domain before you begin the segment with your one-time code.

#123456 (represents the code 123456)

The second part of the last line begins with # and contains the string with your app or website’s one-time code.

Improve your SMS-delivered codes

Domain-bound codes are straightforward for developers to implement, easy for people using your apps and websites to understand, and add more security to the SMS-delivered codes. You can also learn more about domain-bound codes and the development of the message format in the W3C’s Web Platform Incubator Community Group.

Resources

Learn more about domain-bound codes

Allowing Apps and Websites to Link to Your Content

Five years ago, István Csanády hung a piece of paper on the wall of his nascent company’s all-too-small office. Scrawled upon it: “Easy should be easy. Hard must not be impossible.”

Though this phrase was written on sheet paper, it might have well been etched into stone. It became the founding principle for Csanády’s app, Shapr3D — a reinvention of computer-assisted design (CAD) systems, created exclusively with Multi-Touch and Apple Pencil in mind.

While inspirational phrases have spawned many a weightless office poster (and a smattering of snarky variations), this one was weighted in truth by the frustrating real-world digital design experiences of Csanády’s family. “We have eight or nine architects in three generations in the family,” he says.

As a child, he remembers his mother grousing over the arduous multi-month process of getting new CAD software, which often involved enrolling in a costly school to understand how the program worked. “Instead, eventually, she [would just hire] a couple of CAD draftsmen.”

As both a 3D modeling enthusiast and a budding software engineer, Csanády was instantly drawn to the problem. “A great product is characterized by a minimal tool time,” Csanády says. “Nobody really wants to [take time to] learn to use their software.“

He founded his first CAD startup in 2010 after a brief stint as an iPhone developer. While this first venture was unsuccessful, Csanády kept thinking. He took long bike rides. He pondered the problem in the late hours of the night. And he began creating the first prototypes of a touch-based 3D modeling system for iPad.

“I got obsessed,” he confesses. In 2014, out of pure faith in the endeavor, Csanády quit his job as a senior software engineer and got to work. While iPad Pro and Pencil had at the time yet to be introduced, he started exploring what a touch-and-stylus interface might look like.

“The best interactions are always the ones that have physical analogies,” Csanády says. He drew inspiration from tactile tools, creating digital controls for each modeling operation that mimicked their real-world counterparts. And when iPad Pro and Apple Pencil launched, Csanády and team quickly brought the drawing tool into their planning.

“What makes the Apple Pencil and its stylus interaction super powerful is that both are metaphors for the real world,” he says. “And because they are metaphors for the physical world around us, we just don’t have to educate [someone] about the function of these input devices… That radically shortens the learning curve.”

Csanády and his newly-growing team used Multi-Touch and Apple Pencil to build a solid foundation for Shapr3D. Perfecting it, however, was a years-long affair. “There are no shortcuts,” he says. “We did hundreds of prototypes.”

The team interviewed professional 3D modelers and architects, running case studies and inviting them to use — and sometimes break — their software. “You need to see them fail a thousand times,” he says. “And based on those failures, we can tweak tiny little things, and step-by-step get to the right solution.”

Csanády has more than a few lessons he and his team have learned when it comes to designing a professional multitouch interface. “Explicit is always better than implicit,” he says. As an example, he references Shapr3D’s push-pull interface, which displays arrow-handles on items that people can ‘grab’ to move something around the screen. “Until a couple of years ago, we didn’t show those arrows,” he says. “That was one of the greatest learnings of all time… if we explicitly show these handles, that increases the success rate by two orders of magnitude.”

Four years after launch, Shapr3D maintains this obsessive focus on building the perfect tool for its professionals. “What works for Shapr3D works because we have a very specific audience in a very specific context,” Csanády says. “The product works for our audience because we designed it with them in mind.”

The Shapr3D team has grown significantly since its early days in that cramped office. Csanády employs a staff of 55 in Budapest, all of whom are working tirelessly to keep iterating and improving upon the app to make it an even better tool for professionals. They’ve added exhaustive tutorials, contextual and adaptive controls, keyboard shortcuts, and continue to adjust the workflow to be an even smoother process for everyone who uses the app. ”It’s about always raising the bar and always being a little unhappy,” he says. “You can always do 10 percent better… Never be satisfied with what you have built.”

In addition to field studies, the team incorporates analytics, usage data, and App Store reviews into its long-term product planning. They continuously evaluate opportunities, identify the gaps where the company is now, and look at where they want to be in the future. It’s a complex multidimensional puzzle, but Csanády’s vision is clear — and just a little bit ambitious. “We want to become a verb, like Xerox.”

---

Learn more about Shapr3D

Read about Shapr3D on the App Store

Download Shapr3D on the App Store

Whether your app needs to provide a full web browsing experience, display richly-styled content, or incorporate external websites without taking people out of your app, you can make the experience smooth and seamless by choosing the right API.

You can display web content inside of your app with both the WKWebView and SFSafariViewController APIs. But which is the best for your app’s needs?

WKWebView is part of the WebKit framework: It allows you to embed web content into your app as a seamless part of your app’s UI. You can present a full or partial view of web content directly in your app by loading a view that leverages existing HTML, CSS, and JavaScript content or create your own if your layout and styling requirements are better satisfied by using web technologies.

---

Note: If your app uses the deprecated UIWebView API to display web content, you will need to update your code as soon as possible for improved security, performance, and reliability. Learn more:

Updating Apps that Use Web Views

---

SFSafariViewController is part of the SafariServices framework, and lets your users browse a web page, or a website right inside your app. With it, people can enjoy the same web browsing experience they get in Safari — including features like Password Autofill, Reader, and Secure Browsing — without ever having to leave your app.

These two APIs can provide a lot of the heavy lifting for web technologies in your app, though there are a few instances where we recommend alternative frameworks. For example, when presenting a web-based login screen for your app, use ASWebAuthenticationSession to provide people with the most secure experience.

When should I use WKWebView?

If you need to customize or control the display of web content — or interact with the content itself — WKWebView will be most flexible in helping you build the implementation that suits your needs. (If your app is designed to be used offline, make sure any WKWebView content has appropriate fallbacks and alerts.)

Additionally, consider WKWebView if you need to display HTML or CSS content inline or as part of rest of your app’s user interface.

In short, WKWebView is an incredibly powerful technology that works in tandem with iOS and macOS frameworks. That said, WKWebView is not designed to outright replace system technologies and frameworks. For example, you should avoid using it in place of device-optimized UIKit classes like UITableView, UIImage, and UIButton, as you lose out on core system behaviors and provide a subpar experience for people who use your app.

When should I use SFSafariViewController?

When you want display websites inside your app without sending people to Safari, the best tool is SFSafariViewController. By using this API, you can effectively embed the Safari interface — and many of its key features and privacy protections — into your app.

SFSafariViewController is best used when you need to display interactive web experiences on websites you don’t own, or showcase parts of your web content that are generally outside the scope of your app.

---

Resources

WKWebView

SFSafariViewController

Customized Loading in WKWebView

WKWebView allows you to seamlessly integrate web content into your app. Learn how new features in WKWebView allow you to manage cookies, filter unwanted content, and give you more control over loading web content.

What’s New in Safari View Controller

Safari View Controller brings Safari’s features into your app for browsing the web and logging in with 3rd party services. Learn how to use new APIs to customize Safari View Controller’s UI to fit your app’s style.

Your Apple Watch apps can help people achieve their personal fitness goals, monitor their health, get actionable information straight to their wrist, and so much more. And with watchOS 6.2, you can further expand your customers’ experiences by offering in-app purchases and subscription flows directly on Apple Watch.

These interactions use the same StoreKit APIs available for iOS app development, allowing you to quickly implement them in your watchOS apps, and they can be added to both independent watchOS apps (which can function fully independently of an iOS app) and dependent watchOS apps (which need an iOS companion app to function).

Let’s take a look at why and when you might want to offer purchases within your app, as well as some best practices around implementing a great flow for your customers.

When to offer in-app purchases and subscriptions

In-app purchases and subscriptions can make your Apple Watch apps even better by offering both additional content and purchasing flexibility.

If you have an independent app, people can already download it directly through the Watch App Store, and in-app purchases and subscriptions build upon that independence. Apps dependent on the companion iOS app can benefit, too, as these give people more power to purchase additional content without having to reach for their iPhone.

When deciding whether to bring an in-app purchase or subscription flow to your app, consider what you’re offering. Does this purchase or subscription unlock anything specific to Apple Watch? Fitness apps, for instance, might supply additional workouts, or let your customers subscribe to a monthly program.

Once you’ve decided to add an in-app purchase or subscription, give some thought to when your app should display it. These prompts are most helpful when they provide a next step for your customers to unlock further functionality within your app.

Best practices for a great in-app purchase and subscription experience

Effective purchase flows on Apple Watch are concise and clear. Your messaging must be easily scannable, and your options must be easy to compare with each other on a small screen. Keeping things short and sweet will help ensure that people can evaluate the choices, make a decision quickly, and carry on with the task at hand.

Make your choices clear
When offering one-time purchases and subscriptions alongside each other, ensure that every option is defined clearly. Adding written overviews can help people differentiate between the two and make an informed choice.

We recommend including the following information in your overview:

• What this purchase enables on your Apple Watch app
• Whether it’s a one-time purchase or recurring subscription

Restore the past
Whenever you offer subscription or in-app purchase content, provide a way for people to restore their subscriptions or purchases. The same goes for Apple Watch: Make sure your app presents a button below the option to purchase that can check for previously purchased content and restore it.

Don’t forget the fine print
While reading your subscription’s terms and conditions on Apple Watch may not sound like the most fun way for someone to spend their time, it’s important that your customers know exactly what they’re getting when they purchase something within your app. Every time you include a purchase screen on Apple Watch, you must include an option to read terms and conditions.

Review the App Store guidelines
There are specific requirements you need to include in your Watch app before you make in-app purchases and subscriptions available to your customers; check the App Store’s Guidelines and Resources for more information.

---

Resources

Watch “Creating Independent watchOS apps”

Learn more about auto-renewable subscriptions

Learn more about in-app purchases