Dev.Opera

What’s new in Chromium 56 and Opera 43

2017-02-07T00:00:00+00:00

Opera 43 (based on Chromium 56) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog. Here’s what it means for web developers.

Prerender from address bar

Opera will now prerender pages that are typed into the address bar, before the user hits enter, which can make the page finish loading much sooner.

If you can predict what the user’s likely next navigation will be, you can start a prerender from the current page by using . This has actually been supported since Opera 15, but this seemed like a good opportunity for a reminder. 🙂 For more information about how to use prerender and other resource hints, see Resource Hints – What is Preload, Prefetch, and Preconnect? by Brian Jackson.

Classic link selection

Opera now allows users to select link text instead of always dragging the link (like in Opera 12). The user can select by dragging left or right, and start a drag-and-drop by dragging up or down.

Not being able to select text to copy and paste is often frustrating for users. But in some cases it can be justified, like if a link is being used to act as a button, or if text is used only for decoration. To disable text selection in general, CSS user-select: none can be used.

Scroll anchoring intervention

When some content changes above the viewport (e.g., an image is loaded), what used to happen is that the rest of the content is pushed down. With the scroll anchoring intervention the scroll position is updated to keep the content currently in the viewport stable. This behavior can be disabled for a specific subtree or for the whole page by using CSS overflow-anchor: none. See this video for a comparison with and without this intervention.

CSS

Opera now supports position: sticky, a new way to position elements. A position: sticky element is relatively-positioned, but becomes position: fixed after the user reaches a certain scroll position. This results in smoother scroll without jumps compared to trying to achieve the same thing with scroll events and JavaScript. For more info see this article by Paul Kinlan.
The new generic font family system-ui is now supported, which matches the platform’s default UI font.
touch-action: pinch-zoom is now supported.
Non-whitespace Unicode control characters will now be rendered according to the specification, rather than being ignored.

HTTP `Referrer-Policy` header

The new Referrer-Policy HTTP header allows sites to forward site traffic by URL without leaking the user’s session identifier or other private information.

Events: `keyboardEvent.isComposing`

The KeyboardEvent interface now supports the isComposing attribute which returns true if this event is fired between compositionstart and compositionend events.

Canvas

ImageBitmapRenderingContext can be used to reduce memory consumption and compositing overhead by rendering pixel data in the form of an ImageBitmap.

Audio/video

ConstantSourceNode is a new audio source node that produces a constant output mixed with an AudioParam.
Two Web Audio ChannelSplitterNode interface attributes are now read-only: channelCount, which is defined by numberOfOutputs in createChannelSplitter(), and channelCountMode, which is set to explicit.
PannerNode.rolloffFactor now clamps to the nominal range of a PannerNode’s distance model to describe the volume reduction rate as the source moves away from the listener.
Support for FLAC is enabled within the FLAC and Ogg containers for the audio HTML element and decodeAudioData().
OPUS can now be used with decodeAudioData(), expanding the variety of audio codecs supported by the Web Audio API.

Shadow DOM

Shadow DOM’s slotchange events bubble, but no longer re-fires, at a slot’s assignedSlot.

Deprecated and removed features

Non-script MIME types for external scripts (e.g.,
Previously, the above add() and remove() both threw InvalidModificationError exceptions.

A demo is available.

Fetch API: data: and blob: URL scheme support

Our Fetch API implementation now supports the data: and blob: URL schemes.

IndexedDB API additions

The IndexedDB getAll() and getAllKeys() methods are now supported on the IDBObjectStore and IDBIndex interfaces. Additionally, IDBObjectStore.prototype.openKeyCursor() and IDBTransaction.prototype.objectStoreNames have been implemented.

A demo is available.

MediaStreamTrack.prototype.remote

The remote property on WebRTC MediaStreamTrack instances is now available. It can be used to determine whether a stream track is from a remote source or a local one.

ServiceWorkerRegistration.prototype.update() more spec-compliant

The update method on ServiceWorkerRegistration instances used to always bypass the browser cache. Now, it only bypasses the browser cache if the previous update check occurred over 24 hours ago.

Touch and TouchEvent constructors

The Touch and TouchEvent constructors make it easy to programmatically create Touch and TouchEvent instances from an object literal.
```
const t = new Touch({
	'identifier': 42,
	'target': document.body,
	'clientX': 200,
	'clientY': 200,
	'screenX': 300,
	'screenY': 300,
	'pageX': 250,
	'pageY': 250,
	'radiusX': 2.5,
	'radiusY': 2.5,
	'rotationAngle': 10,
	'force': 0.5
});
```
A demo with more examples is available.

KeyboardEvent.prototype.code

The code property on KeyboardEvent instances is now implemented. The value of this property identifies the physical key that generated the keyboard event, regardless of the user’s current keyboard layout. For example, the physical Q key represents the symbol q on a QWERTY keyboard layout, but represents a on an AZERTY keyboard layout — but its .code value is 'KeyQ' in both configurations.

A demo is available.

Web Audio API: .connect() chaining

The connect method on AudioNode and AudioParam instances now supports chaining, as per the spec.

Before this change, you’d write code like this:
```
sourceNode.connect(gainNode);
sourceNode.connect(filterNode);
sourceNode.connect(destination);
```
Now that can be simplified as follows:
```
sourceNode
	.connect(gainNode)
	.connect(filterNode)
	.connect(destination);
```
A demo is available.

Deprecated and removed features

Support for the non-standard CSS values intrinsic and min-intrinsic has been removed. Use the standardized values max-content and min-content instead.

Support for CSS composite-mode: darker has been removed since darker is a non-standard value.

The glyph-orientation-horizontal and glyph-orientation-vertical CSS properties for SVG elements have been removed. Use text-orientation instead, just like you would for HTML elements.

The offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight properties on SVGElement instances are now deprecated and will be removed in an upcoming release. Per the spec, these properties should only exist on HTMLElements. For SVGElements, you can use getBoundingClientRect() instead.

The getTransformToElement method on SVGGraphicsElement instances has been removed, matching the spec.

The SVGPathSeg and SVGPathSegList constructors have been removed. They were part of the old SVG 1.1 spec, but have since been removed from the standard. If you rely on these APIs, you’ll be pleased to hear that a polyfill is available for them.

The getSVGDocument method is no longer available on HTMLFrameElement instances. We now match the spec, which makes this method available on HTMLEmbedElement, HTMLIFrameElement, and HTMLObjectElement instances only.

The non-standard item() method on TextTrackList and TextTrackCueList has been removed. Use tracks[index] instead of tracks.item(index).

Following the recommendation in RFC 7465, support for the RC4 cipher has finally been removed. HTTPS connections that rely on RC4 exclusively cannot be considered secure anymore and will therefore fail from now on.

What’s next?

If you’re interested in experimenting with features that are in the pipeline for future versions of Opera, we recommend following our Opera Developer stream.

Building Offline Sites with ServiceWorkers and UpUp

2016-01-19T00:00:00+00:00

We are living in an increasingly mobile world. We rely on our phones to keep us connected wherever we go, and to provide us with the information we need to get through our day.

But connectivity hasn’t quite caught up with our dependence on it yet.

Every day we find ourselves without a working internet connection. Even in countries with near-perfect coverage, we lose connectivity when stepping into the elevator, or taking the subway. We have areas in our house that never seem to have a solid connection… and don’t even get me started about travel. The minute we leave our comfortable homes and offices, whether we’re boarding a plane, or just driving from town to town, we are at the mercy of the cell towers.

Now think of your users, and their dependence on the information you provide them. Are you running a travel site offering online hotel bookings? What would your users do if they just landed in Tokyo, without a local data plan, but they needed to access your site in order to find their hotel’s address? Does your store have a website? What would your users do if they were riding the elevator down to the parking lot while trying to find out your store’s opening hours?

Luckily we are living in very exciting times for web development. New technologies are coming out every day, unleashing new possibilities, and changing our perception of what is and isn’t possible in the browser. Two of the most important technologies to come out in recent years — service workers and the CacheStorage API — allow us an amazing level of control over the user’s browsing experience — even when their internet connection fails.

Taking control of the offline experience

One library to provide an easy solution for the connectivity problem is called UpUp. (Editor’s note: Tal is the developer of the UpUp library.)

UpUp allows you to define exactly what you want to show your users when they are offline, while handling all of the logic of intercepting requests, detecting when they fail, returning the right content from cache, managing that cache, and generally dealing with all the headaches of cross-browser compatibility.

The content you show your users can be as simple as one page (e.g. your business’ info, address, etc.), all the way to fully customized offline experiences with data customized for each user (e.g. a travel site’s user could browse his bookings, and get details on each booking, even while offline).

The best part of all, UpUp lets you do all of this in just a few lines of code:

In this article we’ll first look at how you can use UpUp to add offline capabilities to your site in under 10 minutes. We will then dive deeper behind the scenes, and see how UpUp achieves all of this.

10 minute tutorial

Let’s begin with a simple site, and add offline features to it:




	
	Lonely Globe Advisor


	Top Hotels in Rome
	
		Villa Domus — Via Piacenza 9, Rome, Italy
		Hotel Trivelli — Piazza Barberini 11, Rome, Italy

Our sample site, Lonely Globe Advisor, offers visitors a list of the top fictional hotels in Rome.

But what happens if our user just landed in Rome and doesn’t have a local data plan? She’ll be out of luck.

We can improve on this experience by loading UpUp, and telling it what content we want it to show the user if she is offline.

Top Hotels in Rome

	Villa Domus — Via Piacenza 9, Rome, Italy
	Hotel Trivelli — Piazza Barberini 11, Rome, Italy

With just this tiny bit of code, we’ve added an offline experience for our site, and allowed our users to see the best hotels in Rome… even when they can’t access the web.

Any user that visited our site in the past, and is now trying to access it again without an internet connection, will now see the content of offline.html. Make sure you create this file and place it in the location you defined under content-url.

The sample above just shows a simple html page. You can improve on your offline content by including stylesheets, images, or even videos in your offline.html. You just need to make sure to tell UpUp what files you’re using, and it will cache them so they are available for your users when they are offline.

Top Hotels in Rome

	Villa Domus — Via Piacenza 9, Rome, Italy
	Hotel Trivelli — Piazza Barberini 11, Rome, Italy

With just one command and a couple of settings, we can create rich offline experiences for our users. These can be as simple as the example above, or as robust as a full single page application using frameworks like AngularJS, with content customized for each user, videos and files the user can access while offline.

There’s a more detailed tutorial available on the official site, as well as complete documentation of UpUp’s API.

How does it work?

How does UpUp serve this content to our users if they aren’t connected to the internet?

tl;dr

UpUp uses a new type of script called a ServiceWorker. This script runs even when the user is offline, and wraps every request made to the server with a promise. If the server can’t be reached, that promise is broken. The script catches broken promises, checks in its cache to see what offline content you’ve chosen to show and returns that instead of an error.

ServiceWorkers

In order to understand how this works, let’s first understand how ServiceWorkers work.

A ServiceWorker is a special type of script that any site can register in the user’s browser. Once registered, this script sits in a very interesting position between the browser windows and that site’s server.

As you can see, while the ServiceWorker runs within the user’s browser, it isn’t attached to any one window. Instead it runs in the background, and can communicate with the windows in its scope (the site that registered it).

From this unique location in the browser, ServiceWorkers have the power to examine each request as it is sent from the user’s browser, decide what to do with it, and then send it to the server. The ServiceWorker can then examine the response as it is returned from the server, decide what to do with it, and then pass either the original or a modified response back to the user’s window.

In a way, you can think of a ServiceWorker as a local proxy server inside the user’s browser. A proxy written in JavaScript that has the power to change requests and their responses.

Now if you think about this flow, you can probably begin to see the many different possibilities this grants us as developers.

For example, you could have a templating engine written entirely inside a ServiceWorker. This ServiceWorker would intercept requests to the server for HTML, asking the server for JSON instead. It would then parse that JSON against a template it has stored within it, and finally return simple HTML as the response. This could save us from rendering the HTML on the server, save bandwidth in the responses, and save us from having to include the templating logic in every page of our site. In other words, the server returns simple JSON, and the web page receives simple HTML.

Another idea could be a ServiceWorker that redirects requests to video files to either SD or HD videos based on the user’s connection speed or settings — this could be done without requiring each page to hold the logic for making that decision, or involving the server in the decision, allowing us to use a server optimized for delivering static files.

ServiceWorkers and UpUp

UpUp uses the power of ServiceWorkers to provide a solution to the lost connectivity problem described above, and serve content to the user even when their connection is down.

Let’s follow what happens behind the scenes of UpUp.

We’ll begin by registering a ServiceWorker. Once registered, all requests from the browser to our server go through the ServiceWorker, where they are wrapped in a JavaScript promise, and pass on untouched to our server. If that promise is broken (ie. we did not receive a response from the server), the ServiceWorker catches that error before it is shown to the user. It will then check for the cached content we’ve decided to show the user, and return that as the response, instead of an error .

To the browser’s window, responses returned from the server or from the cache by the ServiceWorker look exactly the same.

Where does the offline content come from?

The final piece of the puzzle is the new caching technology used by UpUp — CacheStorage. Note: don’t confuse this with the browser’s own cache, or with that douchebag, the Application Cache. This is something new and much more powerful.

When we first registered our ServiceWorker, we told it what content to store in cache for later (we defined this in the content-url and assets settings). The UpUp ServiceWorker script went ahead and fetched that content, and stored it using the CacheStorage interface.

This content will now be available for the ServiceWorker the next time the user is offline.

Important ServiceWorkers Considerations

When using ServiceWorkers, there are a few things you need to always keep in mind.

HTTPS Only

To preserve the user’s security and privacy, ServiceWorkers can only detect requests over a secure connection.

During development you can use UpUp through localhost or file (e.g. both http://localhost/ and file:///Users/tal_ater/index.html are OK), but to deploy it to production you’ll need to have HTTPS set up on your server.

Browser Support

UpUp plays nicely with all browsers, progressively enhancing browsers that support ServiceWorkers, while leaving users with older browsers unaffected.

UpUp currently supports Opera (since version 27), Chrome (since version 40) and Firefox (since version 41). If your users are using a different browser, they simply won’t notice anything different.

Where Should I Place My Files?

For security reasons, the browser only lets UpUp’s ServiceWorker see network requests within its scope.

The scope that the ServiceWorker can affect is determined by where you’ve placed upup.min.js and upup.sw.min.js. For example, if you place it on https://yoursite.com/js/upup.sw.min.js, UpUp will only be able to show your offline content when users try to look at the /js/ directory.

This is why it’s important to place both files on the same server as your content, and not in a subdirectory. This should ideally be in the root of your site (e.g. https://yoursite.com/upup.min.js).

What’s Next?

It’s hard not to be excited about all the new possibilities ServiceWorker opens up to us as developers.

Go ahead, and try UpUp on your own site, you can see it in action and find more details and tutorials on doing Offline First with UpUp.

If you’d like to dive deeper and play some more with ServiceWorkers, there’s a great introduction by Matt Gaunt. If you’d like a few other ideas of how to improve caching with ServiceWorkers, check out Jake Archibald’s Offline Cookbook.

CSSConf.asia & JSConf.asia

2016-01-07T00:00:00+00:00

In November 2015, my colleague Mathieu and I visited Singapore to attend CSSConf.asia and JSConf.asia. Here’s a summary of our presentations.

Making real-time audio-visual demos

At JSConf.asia, Mathieu spoke about creative coding, bringing the demoscene to the web, and crazy JavaScript optimization tricks. He then proceeded to code an audio-visual demo from scratch, live on stage, using nothing but web standards.

Random CSS fun facts

I had the pleasure of presenting at CSSConf.asia, and used that opportunity to showcase a series of obscure CSS fun facts, such as CSS syntax gimmicks and quirks, weird tricks that involve CSS in one way or another, and security vulnerabilities that are enabled by (ab)using CSS in unexpected ways.

In case you’re into that kind of stuff, there’s some terrible CSS puns at the end. (#cssbandnames, anyone?)

Opera 34 released

2015-12-08T00:00:00+00:00

Opera 34 (based on Chromium 47) for Mac, Windows, and Linux and Android is out! To find out what’s new for users, see our Desktop and Mobile blogs. Here’s what it means for web developers.

`Array.prototype.includes`

ES2016 (previously known as “ES7”) features a new array method named includes that determines whether an array includes a given element.

// Good ol’ ES5:
var isIncluded = someArray.indexOf(element) != -1;
// Shiny new ES2016:
const isIncluded = someArray.includes(element);

Compared to the old-school indexOf approach, includes handles NaN more elegantly:

var array = [NaN];
array.indexOf(NaN) != -1;
// → false
array.includes(NaN);
// → true

includes is also available for typed arrays such as Int16Array or Float64Array.

ES6 rest parameters

The ES6 rest parameters syntax allows functions to have a variable number of arguments without using the arguments object. Unlike arguments, the rest argument is a proper array, meaning array methods can be called on it directly:

// ES5:
function sort() {
	var sortedArgs = [].sort.call(arguments);
	return sortedArgs;
}

sort('z', 'y', 'x', 'a', 'c', 'b');
// → 'a', 'b', 'c', 'x', 'y', 'z'

// ES6:
function sort(...args) {
	var sortedArgs = args.sort();
	return sortedArgs;
}

sort('z', 'y', 'x', 'a', 'c', 'b');
// → 'a', 'b', 'c', 'x', 'y', 'z'

`navigator.mediaDevices`

The new navigator.mediaDevices API can be used to enumerate connected media devices and to retrieve their media streams. We recommend the following:

Use navigator.mediaDevices.enumerateDevices() instead of the non-standard MediaStreamTrack.getSources() which doesn’t support audio output devices.
Use navigator.mediaDevices.getUserMedia() instead of navigator.getUserMedia().

More info can be found on the Google Developers blog, and hey — here’s a demo.

`MouseEvent.prototype.getModifierState`

We now support the getModifierState method on MouseEvent instances. It returns information about which modifier keys were pressed at the time the event was fired. Previously, this method was only available on KeyboardEvent instances. This change matches the spec and makes these APIs more consistent. A demo is available.

`requestIdleCallback`

The new requestIdleCallback API allows scheduling a task to run when the browser is idle. This makes it possible to perform background work on the main event loop, without impacting latency-critical events such as animation and input response.

For more information, check out the excellent tutorial on the Google Developers blog.

`InputDeviceCapabilities`

The new InputDeviceCapabilities API provides details about the physical device responsible for generating an event. InputDeviceCapabilities.prototype.firesTouchEvents returns whether this device dispatches touch events. All types of UIEvent now have their own sourceCapabilities property which returns the InputDeviceCapabilities associated with the physical device responsible for them.

Fetch API: `RequestInit.referrer`

This feature allows requests captured by service workers to match the original referrer.

By default, a captured request gets the service worker’s referrer (i.e. the service worker’s script URL), but with this feature the request keeps the original referrer.

Updated default Fetch API request flags for service workers

The flags of request objects that are passed to the service worker’s Fetch Event handler for navigation requests have been changed. Previously, these were the defaults for mode, credentials, and redirect:

{
	'mode': 'no-cors',
	'credentials': 'same-origin'
	'redirect': 'follow'
}

The new defaults (matching the spec) are:

{
	'mode': 'same-origin',
	'credentials': 'include'
	'redirect': 'manual'
}

Cache API: `matchAll`

Cache.prototype.matchAll is now supported. It greatly simplifies bulk searching of the cache, and allows you to get multiple matches.

Removed features

The SVG 1.1 hasExtension() methods on SVGAnimationElement, SVGCursorElement, SVGGraphicsElement, SVGMaskElement, and SVGPatternElement have been removed in SVG 2. Now, they’re removed from Opera and Chrome as well. Don’t worry — these methods always returned false and were thus of no real use anyway.

The same goes for a few SVG 1.1 SVG element methods — they no longer exist in SVG 2. So long, pixelUnitToMillimeterX, pixelUnitToMillimeterY, screenPixelToMillimeterX, and screenPixelToMillimeterY, and thanks for all the pixels! (These properties didn’t do what their names suggested in the first place — all they did was return the constant 0.2645833194255829.)

Improved text selection

Chromium no longer highlights the gaps between content when painting selections.

The new, much cleaner, text selection behavior. A before/after comparison is available, too.

More extension APIs

Opera 34 adds support for the chrome.desktopCapture API, enabling extensions with screensharing capabilities.

What’s next?

If you’re interested in experimenting with features that are in the pipeline for future versions of Opera, we recommend following our Opera Developer stream.

Progressive Web Apps Are the Future

2015-11-19T00:00:00+00:00

The two-day Chrome Dev Summit at Google’s headquarters in Mountain View is a wrap! Vadim and I had a great time attending the summit, and this year, I even had the pleasure to share the stage with Alex Russell (thank you!) to speak about Progressive Web Apps, and specifically web manifests, which we’ve recently shipped support for in Opera for Android. (Since this was first published, Firefox announced plans to support Progressive Web Apps, too!)

You can check out the full video of our talk below:

“Progressive Web Apps” is an umbrella term for modern, performant web apps that cleverly take advantage of technologies like web manifest, push notifications, service worker, responsive web design, etc. to provide a top-tier experience on mobile.

The latest high-profile “progressive web app” example is of course the recently launched Flipkart Lite website, which was presented in a dedicated session at the summit.

And if you’re into little web games, also try adding this Inbox Attack demo to your home screen: it will lock to vertical orientation, and in Opera, the game will go full screen. I’ve even added vibration events to the buttons to make it more realistic :)

Here at Opera, we’re super excited about Progressive Web Apps and the role they will play in bridging the gap between web and native. We’re hard at work to further add installation prompting in Opera for Android, and support for push notifications and more is in the pipeline. Stay tuned, and if you’re curious to learn more, check out the other videos from the summit. We want your site to be a progressive web as well!

Dev.Opera

What’s new in Chromium 56 and Opera 43

Prerender from address bar

Classic link selection

Scroll anchoring intervention

CSS

HTTP Referrer-Policy header

Events: keyboardEvent.isComposing

Canvas

Audio/video

Shadow DOM

Deprecated and removed features

Fetch API: data: and blob: URL scheme support

IndexedDB API additions

MediaStreamTrack.prototype.remote

ServiceWorkerRegistration.prototype.update() more spec-compliant

Touch and TouchEvent constructors

KeyboardEvent.prototype.code

Web Audio API: .connect() chaining

Deprecated and removed features

What’s next?

Building Offline Sites with ServiceWorkers and UpUp

Taking control of the offline experience

10 minute tutorial

Top Hotels in Rome

Top Hotels in Rome

Top Hotels in Rome

How does it work?

tl;dr

ServiceWorkers

ServiceWorkers and UpUp

Where does the offline content come from?

Important ServiceWorkers Considerations

HTTPS Only

Browser Support

Where Should I Place My Files?

What’s Next?

CSSConf.asia & JSConf.asia

Making real-time audio-visual demos

Random CSS fun facts

Opera 34 released

Array.prototype.includes

ES6 rest parameters

navigator.mediaDevices

MouseEvent.prototype.getModifierState

requestIdleCallback

InputDeviceCapabilities

Fetch API: RequestInit.referrer

Updated default Fetch API request flags for service workers

Cache API: matchAll

Removed features

Improved text selection

More extension APIs

What’s next?

Progressive Web Apps Are the Future

HTTP `Referrer-Policy` header

Events: `keyboardEvent.isComposing`

Fetch API: `data:` and `blob:` URL scheme support

`MediaStreamTrack.prototype.remote`

`ServiceWorkerRegistration.prototype.update()` more spec-compliant

`Touch` and `TouchEvent` constructors

`KeyboardEvent.prototype.code`

Web Audio API: `.connect()` chaining

`Array.prototype.includes`

`navigator.mediaDevices`

`MouseEvent.prototype.getModifierState`

`requestIdleCallback`

`InputDeviceCapabilities`

Fetch API: `RequestInit.referrer`

Cache API: `matchAll`