Web Development Guide

Samsung Internet for Android provides many features to make browsing smooth and convenient on Samsung Galaxy devices. Here are some tips to make your web sites fully utilize our features, supported since the indicated version in each section. (The latest stable version is 6.2).

Samsung Internet for Android 6.x

CSS Grid

Version 6.0 introduced support for CSS Grid, enabling web developers to better control how elements are arranged in multiple rows and columns. To get started with Grid, here is a guide which features examples for common responsive layouts.

Samsung Internet for Android 5.x

Progressive Web App Indication Badge

Since version 5.2, Samsung Internet detects when the page being viewed is a Progressive Web App, i.e. if the user can add it to their home screen and launch it as a standalone web application, even if they are offline. If this is the case, the usual bookmark (star) icon in the URL bar will be dynamically changed to a special 'plus' icon. This provides a shortcut to add the web app to the homescreen, as well as bookmark it.

The criteria we use to display the icon are as follows:

• The site is served over HTTPS

• The site registers a Service Worker

• The site registers a Web App Manifest

• The Web App Manifest has name or short_name

• The Web App Manifest has start_url

• The Web App Manifest has an icon where size is at least 144x144

• The Web App Manifest has display set to 'standalone' or 'fullscreen'

The exact criteria may be subject to change in the future.

Samsung DeX

Since v5.2, Samsung Internet supports Samsung DeX, providing a desktop browsing experience. It is recommended to use Responsive Design to ensure that your site works well in larger desktop windows.

If you need to determine whether your site is being viewed in DeX, you can check the user-agent string. Here is an example user-agent string when the browser is in DeX mode:

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/5.2 Chrome/51.0.2704.106 Safari/537.36

For comparison, here is an example user-agent string for the mobile browser (not in DeX mode):

Mozilla/5.0 (Linux; Android 7.0; SAMSUNG SM-G935F Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/5.0 Chrome/51.0.2704.106 Mobile Safari/537.36

The Progressive Web App Indication Badge also applies to Samsung Internet for DeX. Progressive Web Apps can have their own icon in the tray and on the Desktop. They can be launched in a standalone, resizable window, without the URL bar. The same criteria for the badge apply as above.

Web Payments and Samsung Pay

Since version 5.0, Samsung Internet supports the Payment Request API, providing a consistent, easy-to-use and secure check-out experience. Samsung Internet also supports Samsung Pay as a payment method, subject to Samsung Pay availability by location. See here for further details.

CloseBy

Introduced in version 5.2, CloseBy is Samsung’s Physical Web service, allowing you to discover contextual websites based on the locations around you. CloseBy detects Physical Web beacons that broadcast web pages using the Eddystone-URL format. To enable CloseBy and see the list of beacons around you, see the Extensions menu. While enabled, you may see a silent notification displayed when nearby beacons are detected.

For a beacon to be displayed by CloseBy, the page that the URL resolves to:

• Must be served over HTTPS

• Must not be blocked by robots.txt

• Must not include malicious contents/ malware

• Must be found and reachable, without timing out

• Must not have an SSL certificate error

• Must not be empty

Samsung Internet for Android 4.x

Custom Tabs

Apps often need to provide users with a way to view web pages. Previously this required embedding a WebView inside your app, or launching a browser and making the user come back to your app later. Since Samsung Internet for Android 4.0, app developers can have more control over the overall web experience without using Android WebView, by launching a lightweight Custom Tab.

The followings are customizable for Custom Tabs:

• Menu items

• Toolbar color

Samsung Internet Custom Tabs Service Connection

Client apps can use the sample code below for connecting to Custom Tabs service provided. If bindService() throws an exception, Custom Tabs is not supported in the installed version. The package name must be set to Samsung Internet’s package name i.e. "com.sec.android.app.sbrowser"

// Package name of Samsung Internet
public static final String SAMSUNG_INTERNET_PACKAGE_NAME = "com.sec.android.app.sbrowser";
// Action for the service intent.
public static final String CUSTOM_TABS_CONNECTION =
"android.support.customtabs.action.CustomTabsService";
Intent serviceIntent = new Intent(CUSTOM_TABS_CONNECTION);
serviceIntent.setPackage(SAMSUNG_INTERNET_PACKAGE_NAME);
context.bindService(serviceIntent, mServiceConnection, Context.BIND_AUTO_CREATE |
Context.BIND_WAIVE_PRIORITY);

Launching a Custom Tab

Once binding the Custom Tabs service, you can use an ACTION\_VIEW Intent to launch a Custom Tab from your app.

// Package name of Samsung Internet
public static final String SAMSUNG_INTERNET_PACKAGE_NAME = "com.sec.android.app.sbrowser";
// Action for the service intent.
public static final String CUSTOM_TABS_CONNECTION =
"android.support.customtabs.action.CustomTabsService";
Intent serviceIntent = new Intent(CUSTOM_TABS_CONNECTION);
serviceIntent.setPackage(SAMSUNG_INTERNET_PACKAGE_NAME);
context.bindService(serviceIntent, mServiceConnection, Context.BIND_AUTO_CREATE |
Context.BIND_WAIVE_PRIORITY);

Customizing Menu Items

Client apps can add customized menu items to the Custom Tab. The menu items are added using an array of bundles that consist of menu texts and pending Intents.

// Key for title string for custom menu item
public static final String CUSTOM_TABS_MENU_TITLE =
"android.support.customtabs.customaction.MENU_ITEM_TITLE";
// Key for pending Intent
public static final String CUSTOM_TABS_PENDING_INTENT =
"android.support.customtabs.customaction.PENDING_INTENT";
// Array List is used for specifying menu related params.
public static final String CUSTOM_TABS_EXTRA_MENU_ITEMS =
"android.support.customtabs.extra.MENU_ITEMS";
ArrayList menuItemBundleList = new ArrayList<Bundle>();
// Separate Bundle for each menu item.
Bundle menuItem = new Bundle();
menuItem.putString(CUSTOM_TABS_MENU_TITLE, menuItemTitle);
menuItem.putParcelable(CUSTOM_TABS_PENDING_INTENT, pendingIntent);
menuItemBundleList.add(menuItem);
intent.putParcelableArrayList(CUSTOM_TABS_EXTRA_MENU_ITEMS, menuItemBundleList);

Customizing Toolbar Color

The color of the Custom Tab’s tool bar can be changed to be in sync in caller apps’ theme using Intent extra.

// Intent extra for changing the color for tool bar. Color of type int indicates a Color.
private static final String CUSTOM_TABS_TOOLBAR_COLOR = "android.support.customtabs.extra.TOOLBAR_COLOR";
intent.putExtra(CUSTOM_TABS_TOOLBAR_COLOR, color);

Service Worker

Service Worker support was introduced in Samsung Internet for Android 4.0, based on Chromium 44.2403 with some additions and changes.

Additions

• Client manipulation

  • Client.id

  • WindowClient.navigate(url)

• navigator.serviceWorker

  • ServiceWorkerContainer.getRegistrations()

• Registration

  • ServiceWorkerRegistration.update() that returns a promise

• Cache

  • Cache.addAll(requests)

  • Cache.matchAll(request, options)

Changes

• Client manipulation

  • Client.postMessage(message, transfer) will result in a ServiceWorkerMessageEvent being fired on navigator.serviceWorker instead of a MessageEvent being fired on the client’s global window object.

  • Clients.matchAll() returns clients in MRU order

• Registration

  • ServiceWorkerRegistration.update() will only bypass the browser cache if the previous update check occurred over 24 hours ago.

• Cache API

  • Cache API is restricted to secure origins (can be only used with HTTPS)

• Fetch related

  • Fetch API request flags for navigation requests have been changed from <mode:"no-cors", credentials:"same-origin"> to <mode:"same-origin", credentials:"include", redirect: "manual">

  • FetchEvent.respondWith() accepts CORS responses for page loading or worker script loading requests

Web Push

Web Push Notification allows users to "Subscribe" to receive notifications from a web page, and users will receive the notification whether the web page is currently running or not.

Push API depends on Service Workers to provide the offline functionality needed. Web Push support was introduced in Samsung Internet for Android 4.0.

Samsung Internet for Android 3.x

Quick Access

As one of the default homepages for Samsung Internet for Android since version 3, the Quick Access page enables users to visit their favorite sites with a single click. It is also loaded whenever users click the URL bar giving your sites more exposure and leading more users to you.

Quick Access page contains a default list of sites that is adjustable by the user. The default list varies according to countries, regions, carriers, etc. It is updated independently from the Samsung Internet for Android through the Samsung Quick Access server.

For more effective exposure, we recommend adding a catchy icon that shows off the characteristics of your page.

The icon displayed for your site will be determined following this priority:

1. The apple-touch-icon declared in the content

   (ex) <link rel="apple-touch-icon" href="/mytouchicon.png">

2. The favicon set up in the content

   (ex) <link rel="icon" href="/myicon.png">

3. A simple icon created by the Samsung QuickAccess server.

Shortcut Promotion Banner

Based on the W3C Manifest for web application standard, Samsung Android for Internet lets web pages look and work more like native Android applications. With the ‘Add to Home’ feature, users are able to install your pages to their devices and launch and explore them without being aware of the browser container.

Since version 3.0, Samsung Internet for Android promotes ‘Add to Home’ with notification banners. Samsung Internet for Android will recommend shortcut installation for frequently* visited sites if it has a manifest declared in a link element. This will give users easy access to the feature and certainly make users access your contents more frequently.

Of course, Samsung Internet for Android still provides the ‘Add to Home’ menu. So users can install web applications to their home screens without going through the promotion banner.

* Currently, the notification will show when the user visits a site at least 3 times during a 2 week period. This policy may change.

Secure Web Auto Login

Using fingerprint authentication, Samsung Internet for Android provides a more secure and easy way for users to login to sites. Once the user agrees to save their login info for a site, future sign-ins will be done with a single fingerprint scan. After the user identity is verified with fingerprint, the password field is auto-filled and submitted for login where applicable.

Since Samsung Internet for Android 3.2, the number of sites supported for Auto Login has been highly increased.

Use standard HTML forms and avoid overriding the ‘enter’ key to make the best use of this feature.

<form action="example_form.asp">
ID: <input type="text" name="UserName" value="username"><br/>
Password: <input type="password" name="PassWord" value="password"><br/>>
<input type="submit" value="Submit">
</form>

Audio Notification

Since version 3.0, Samsung Internet for Android lets you provide audio contents to users with the experience of native music applications.

Users can keep listening to audio streaming from your sites after switching to other tabs or applications. The Samsung Internet for Android icon is shown in the notification bar to indicate that audio streaming is coming from the web. And when the user opens the notification drawer, a mini-controller for the audio element is displayed to enable quick and easy control of audio playback.

This mini-controller is also displayed on the lock screen for user convenience.

• An icon and the title of the current audio streaming are shown in the mini-controller.

• The icon displayed is determined following this priority:

1. The apple-touch-icon declared in the content

   (ex) <link rel="apple-touch-icon" href="/mytouchicon.png">

2. The favicon set up in the content

   (ex) <link rel="icon" href="/myicon.png">

3. A simple icon created by the Samsung QuickAccess server.