Happy Holidays from WireFrameRate!

For the last six months, we have been busy building the company and our WebFrame and WebFrame Pro apps, which have each been updated with two feature releases as well as bug fixes. We will now be taking some time off for the holidays, but before we do, we would like to announce public beta programs for WebFrame and WebFrame Pro as well as version 1.3.0 (Beta) of each app, which will be available as part of the beta programs.

Beta Program

The Beta Programs for WebFrame and WebFrame Pro are delivered through Apple TestFlight.

To participate in the WebFrame Kiosk public beta, click here: https://testflight.apple.com/join/70I0ipWZ

To participate in the WebFrame Pro Kiosk public beta, click here: https://testflight.apple.com/join/8Sa8Vn4M

WebFrame Version 1.3.0 (Beta)

The primary update for version 1.3.0 (Beta) is the addition of navigation buttons. While swipe gestures are intuitive for frequent tablet users, for kiosk applications there is still a large audience of potential users that may not find swiping back and forth to be intuitive.

The buttons are off by default, but can be enabled through Settings (WebFrame and WebFrame Pro) or through EMM (WebFrame Pro). They can also be configured to minimize on scroll and to auto-hide when not available (e.g. when you can navigate forward or backward.

If you are managing WebFrame Pro from an AppConfig-complaint EMM product, you can use the following keys to configure navigation button settings:

	<key>com.wireframerate.webframepro.navigation_buttons_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.navigation_buttons_autohide</key>
	<true/>
	<key>com.wireframerate.webframepro.navigation_buttons_minimize</key>
	<true/>

In addition to the navigation button capabilities, we have added support for multiple authentication types to WebFrame and WebFrame Pro. Most notably, we have added support for HTTP Basic authentication. While we strongly recommend using HTTPS, we recognize that many customers may be using legacy sites or intranet environments where HTTPS is not preferable or possible.

See you in 2019

We will be back in the office in early January with releases to production of both apps. Until then, Happy Holidays from the team at WireFrame Rate.

We are pleased to announce the availability of WebFrame and WebFrame Pro version 1.2.0.

This version adds the capability to customize full screen options on iPhone X, Xs, Xs Max, and Xr. Both WebFrame and WebFrame Pro can be configured locally in iOS Settings. WebFrame Pro can also be managed remotely through AppConfig-compliant management solutions such as JAMF, MobileIron, VMWare AirWatch, etc.

Get WebFrame Kiosk 1.2.0 here:

Get WebFrame Pro Kiosk 1.2.0 Here:

---

Locally Managed Options

Safe Area Frame Color

If you have used either WebFrame or WebFrame Pro on an iPhone model listed above, you may have noticed whitespace at the top of the screen.

Note the whitespace at the top of the screen above the safe area constraints.

That space is the result of Apple’s Safe Area constraints. These constraints ensure that no critical elements (branding, controls, etc.) of an app or webpage are obscured by the FaceID camera array or the rounded corners of the device.

For most use cases, we recommend leaving safe area constraints enabled. However, to improve branding or visual aesthetics of your kiosk implementation, we have added the ability to customize the color of the screen outside of the safe area.

If you are managing WebFrame or WebFrame Pro locally, go to the appropriate item in the iOS Settings app and scroll down to the “Safe Area Color…” setting under User Interface Settings. The value is specified as a six-digit hex color code, for example 000000 for black or ffffff for white, etc.

The most universally-applicable approach is to simply configure a black frame (which is the new default setting) as this will allow the screen above the safe area to blend seamlessly with the FaceID camera array and rounded corners.

WebFrame with black safe area frame.

You may prefer to use a color associated with the brand or the page/app being used as a kiosk. For example, if using the Starbucks progressive web app as a kiosk, you could specify the hex value for the green of Starbucks’ logo (0D6343).

Starbucks PWA framed in Starbucks’ green.

Full Screen Option

Many modern websites have been updated to accommodate safe area without relying on app constraints. Other sites may use full screen imagery or otherwise look best with a true full screen experience. For these configurations, we have added an additional setting, “Full Screen Option”. You can select one of three possible values for Full Screen Option:

1. Safe Area: Default setting. This value will enforce safe area constraints.

2. Full Screen: This value will remove safe area constraints and allow WebFrame or WebFrame Pro to use the full screen of the device. Websites that accommodate safe area will function normally.

3. Full Screen (Modify Page Viewport): This value will remove safe area constraints as well. However, it will also modify the viewport settings of the underlying page to override safe area. This setting is only recommended for advanced, highly-controlled uses.

Full Screen enabled. Notice that page initially loads in safe area but as user scrolls, the page occupies the full screen.

Demonstration of New Features (Locally Managed)

Here is a video demonstration of the new features being configured locally in Settings:

---

Remotely Managed Options

If you are remotely managing WebFrame Pro with an AppConfig-compliant management product, two new keys have been added to the configuration profile:

<dict>
	<key>com.wireframerate.webframepro.safe_area_color</key>
	<string>#000000</string>
	<key>com.wireframerate.webframepro.full_screen_option</key>
	<integer>0</integer>
</dict>

The safe area color option is a string specifying the same six-digit hex color code as with local settings. Please note, though, that it has a hashtag (or pound sign) in front of the number. This is required and ensures that value is correctly handled despite differences in EMM products.

Full screen option is an integer value. Set 0 for safe area constraints, 1 for full screen, and 2 for full screen with viewport override.

For a full list of managed key-value pairs, click here.

Demonstration of New Features (Remotely Managed)

Here is a video overview and demonstration using JAMF Pro to remotely configure the new options for WebFrame Pro:

Following up from our successful launch of WebFrame Kiosk, we are pleased to announce WebFrame Pro Kiosk.

WebFrame Pro includes the same great features as WebFrame: Full screen browser, domain allow list, inactivity timer, configurable user experience, and more. In addition, WebFrame Pro is compatible with the AppConfig standard, which allows it to be remotely deployed and managed by over 20 leading enterprise mobility management (EMM) products including JAMF, VMware Workspace One, MobileIron, SOTI MobiControl, and many more.

WebFrame Pro is live on the App Store, and can also be deployed through Apple’s VPP or DEP programs.

For a demonstration of WebFrame Pro being deployed and configured by Soti MobiControl, please see the following video:

As of this post, WebFrame Pro supports the following configuration options:

• com.wireframerate.webframepro.homepage_url (String): Kiosk homepage as a string. For example: https://www.mydomain.com

• com.wireframerate.webframepro.domain_limiting_enabled (Bool): Limit navigation to a predefined list of allowed domains.

• com.wireframerate.webframepro.domain_allowed_list (String): Comma-delimited string of domain names. For example: domain1.com,domain2.com,domain3.co.uk

• com.wireframerate.webframepro.idle_timeout_enabled (Bool): Enable/disable the idle device timeout.

• com.wireframerate.webframepro.idle_timeout_seconds (Integer): Number of seconds before an idle device reloads the homepage URL.

• com.wireframerate.webframepro.clear_cache_enabled (Bool): Clears browser cache when the idle timer reloads the homepage URL.

• com.wireframerate.webframepro.user_interaction_enabled (Bool): Enable/disable all user interaction.

• com.wireframerate.webframepro.swipe_navigation_enabled (Bool): Enable/disable swipe gestures for browser back/forward.

• com.wireframerate.webframepro.pull_to_refresh (Bool): Enable/disable pull-to-refresh gesture.

New functionality and corresponding settings will be added to WebFrame Pro over time. To stay up-to-date on the configuration key/value pairs, please see: https://www.wireframerate.com/webframe-pro-configuration

WebFrame allows you to turn an iOS device into a single-purpose kiosk displaying full-screen web apps, web pages, multimedia, documents, and more. WebFrame does not include address or navigation bars, so it can be paired with iOS Guided Access Mode to prevent users from accessing other apps or content.

WebFrame is now available in the iOS App Store. For the remainder of 2018, it will be available for over 50% off. Click the link below to purchase.

Video Tutorial

Overview

This guide will provide additional information on WebFrame configuration options and how it can be used in tandem with iOS “Guided Access Mode” to create a locked-down public kiosk with an iPad running iOS 11.0 or later.

Installing WebFrame

WebFrame can be installed from the iOS App Store, through Apple’s Volume Purchase Program (VPP), or through leading MDM products (such as JAMF, VMWare Workspace One, MobileIron, Microsoft Intune, etc.) that support VPP.

If you would like to deploy WebFrame as an internal (Enterprise) app, please contact us for a WebFrame Enterprise quote.

Configuring WebFrame

WebFrame can be configured entirely on-device through the iOS Settings app. Begin by opening the Settings app.

Once in Settings, scroll down on the left pane until you see the settings for the installed apps. Choose ‘WebFrame’ from this list.

WebFrame allows the following configuration options:

Homepage URL

“URL” will be the starting page for WebFrame. The URL must be a valid URL including ‘http://’ or ‘https://’ (‘https://’ is recommended). The URL can also include query string parameters.

For example:

     https://www.domain.com/path/page?param1=value1¶m2=value2

To configure a document (.PDF), include a link to a full path to the file. For example:

     https://www.domain.com/path/document.pdf

To configure a looping YouTube video, use the following link replacing “VIDEO_ID” with the actual ID from the YouTube video. For example:

     https://www.youtube.com/embed/VIDEO_ID?playsinline=1&controls=0&rel=0&loop=1&playlist=VIDEO_ID

For additional information on YouTube URL parameters, please see this page from YouTube. Please note, some parameters (such as ‘autoplay’) do not function or function differently on iOS.

Allowed Domains

“Limit Browsing to Specific Domains” will limit navigation to domains (including subdomains) on the provided list. This will prevent users of a public kiosk from gaining access to broader web access than you would like. For example, if you want to use your own public website as a kiosk, but it contains links to Google or other 3rd party websites, you can limit the kiosk’s navigation to your domain only.

“Allowed Domains” is a comma-delimited string in the format of domain name and top-level domain (.com, .co.uk, .io, etc.). Optionally, you may also include subdomain.

For example:

     domain.com,domain.co.uk,domain.io,domain2.com

Inactivity Timer

“Enable Inactivity Timer” will reset the device to the configured Homepage URL if the device is left unattended for a selected period of time. This will allow the kiosk to be returned to your desired state if a user leaves the kiosk on a page other than your Homepage.

The available timeout values are 1, 3, 5, 10, or 15 minutes.

“Clear Cache on Reload” will delete any cookies or session state information on the device when the Inactivity Timer refreshes the device. Use this setting if users can enter personal data or if session state is maintained on the configured website or web app used as the Homepage.

User Interface Settings

There are three options available for the WebFrame user interface.

“Enable User Interaction” will enable or disable all user interaction. Users will not be able to use any tap, swipe, or other gestures. Disable all user interaction when you are configuring a non-interactive kiosk used as an information display, looping video, etc.

“Enable Back/Forward Swipe Gestures” will enable or disable using edge swipe navigation gestures to navigate backward or forward in the browser window. Disable this setting if you want to force users to use your site navigation instead of browser back/forward capabilities.

“Enable Pull to Refresh” will allow users to reload the current page by pulling down. If your site is not auto-updating, this will allow users to view updated page content on demand.

Next Time

Stay. tuned to WireFrameRate.com for additional tutorials covering advanced configuration topics such as document kiosk, information display, looping YouTube videos, etc.

Welcome to WireFrameRate. We specialize in building business-focused iOS apps for SMB through large enterprise. We are busy building an releasing our first line of products. Stay tuned to this page for news, tutorials, and other information. We will be putting our first product, WebFrame - we full screen web kiosk, into public beta in the coming days.