Samsung Internet Dev Hub - Resources for developers

Developer Hub

Optimising A-Frame Assets for Faster Starts

2017-01-19 Ada Rose CannonWeb Development

Updating the polyfill service.

Samsung has a web browser.

V5 of that web browser came out recently:

Announcing Samsung Internet 5.0
As some of you may know we have been testing a public beta release for the next major version of Samsung Internet. We…medium.com

Time to update the Polyfill Service so that people using v5 don’t receive polyfills they do not require.

Firstly, see what polyfills are required.

1. Open up Chrome’s Inspector

paste into your url bar: chrome://inspect

Chrome inspector for debugging devices

2. Click inspect on an open tab:

Inspecting gives you a preview and a developer console

3. Open up the polyfill.io targeted tests

Paste into the url bar: https://polyfill.io/test/director?mode=targeted

This runs all the targeted tests on the device so we can see what polyfills it has been given.

These correspond to the Polyfills needed for v4 which is more than we need.

You can explore the results by entering global_test_results into the console.

Array.from
Array.of
[email protected]@iterator
Array.prototype.contains
Array.prototype.entries
Array.prototype.fill
Array.prototype.find
Array.prototype.findIndex
Array.prototype.includes
Array.prototype.keys
Array.prototype.values
[email protected]@iterator
Element.prototype.after
Element.prototype.append
Element.prototype.before
Element.prototype.prepend
Element.prototype.replaceWith
Event.hashchange
IntersectionObserver
Intl
[email protected]@iterator
Number.isInteger
Object.assign
String.prototype.contains
Symbol
Symbol.hasInstance
Symbol.isConcatSpreadable
Symbol.iterator
Symbol.match
Symbol.replace
Symbol.search
Symbol.species
Symbol.split
Symbol.toPrimitive
Symbol.toStringTag
Symbol.unscopables
URL
console.exception
setImmediate

4. Work out which polyfills are required

Paste into the URL bar: https://polyfill.io/test/director?mode=control

This runs the test for every feature with no polyfills loaded. The tests which fail are the ones which are required.

They are listed under: global_test_results.failingSuites

Array.prototype.contains
Element.prototype.after
Element.prototype.append
Element.prototype.before
Element.prototype.prepend
Element.prototype.replaceWith
IntersectionObserver
Intl
String.prototype.contains
console.exception
setImmediate

As you can see the new version of Samsung Internet has greater support for new methods.

5. Compare to see what needs to be changed

There are none which need to be added. It’s to be expected but good to confirm there are no regressions.

These are no longer required:

Array.from
Array.of
[email protected]@iterator
Array.prototype.entries
Array.prototype.fill
Array.prototype.find
Array.prototype.findIndex
Array.prototype.includes
Array.prototype.keys
Array.prototype.values
[email protected]@iterator
Event.hashchange
[email protected]@iterator
Number.isInteger
Object.assign
Symbol
Symbol.hasInstance
Symbol.isConcatSpreadable
Symbol.iterator
Symbol.match
Symbol.replace
Symbol.search
Symbol.species
Symbol.split
Symbol.toPrimitive
Symbol.toStringTag
Symbol.unscopables
URL

6. Clone the Polyfill service and make changes

Github Repo: https://github.com/Financial-Times/polyfill-service

We are editing the config.json of each polyfill to say where it is required:

Screenshot of git diff, showing ‘*’ replaced by ‘<5’

In this case Array.from is needed for versions less than 5. As version 5 is where it is fixed.

7. Test

Install the dependecies and then run the development envrionment

npm install
npm run dev

Open up the test suite on the phone

http://127.0.0.1:3000/test/director?mode=all

If it doesn’t work make sure you have port forwarding enabled in the inspector by clicking the ‘Port forwarding…’ button:

Screenshot of Chrome showing that port forwarding is enabled. :3000 is shown in green.

8. Make Pull Request

Update polyfills config for Samsung Internet 5 by AdaRoseEdwards · Pull Request #1067 · Financial…
This PR is to update the configuration of the polyfills to account for the recently released Samsung Internet 5.0. This…github.com

9. Party

Tagged in JavaScript, ES6, Polyfills, Financial Times, Samsung

By Ada Rose Cannon on January 19, 2017.

[Read this article on Medium]a(https://medium.com/@LadyAdaKing/updating-the-polyfill-service-33453bf3a2d5)