But manually writing UInt8 bytes is a little too low-level - PNG files also use strings, UInt16 and UInt32 values all over the place. We’ll use these to create and edit our image data. They have no push or pop operations - just the ability to set a number at an index: let myArray = new Uint8Array(4) // 4 bytes long myArray = 1 myArray = 2 Luckily, these days browsers have typed arrays - fixed length, integer arrays that are far more memory efficient. Being this dynamic takes up a lot of memory, and that’s something we don’t want to do. I can make an array, add whatever I want to it, and change the size of it at will: let myArray = myArray.push("one", 2, ) myArray = 1 myArray.pop() īut that flexibility comes at a cost. JavaScript is a wonderfully flexible language. But how do we manually write bytes in JavaScript? Typed Arrays If we want to manipulate the image we just need to find the offsets for these chunks and write bytes to them manually. (if you want to read more details on the PNG format, see here) This saves a lot of space, as this simplified example of a 10x1 single-color image demonstrates:
These let us specify an RGBA palette at the start of the file, then store one palette index value per pixel instead of four separate red, green, blue and alpha values. While PNG files can contain RGBA arrays, they can also use other pixel formats, including palette-based ones. Some research into different image file formats led me down the rabbit hole of the PNG file specification, where I found something useful. When we start dealing with devices with very high pixel density, the compressed image sizes are scary, but the uncompressed sizes are terrifying. We don’t know how much memory a device has, let alone how much is being used by other apps, different OS versions, and so on. That’s a concern on mobile devices, especially on Android phones, given how varied they are. Both JPEG and PNG images use compression to reduce the size of a downloaded file dramatically, but the OS can’t use a compressed image directly - it has to be decompressed into memory first. One important thing you need to remember: the download size of an image is rarely its actual size. Could we somehow replicate this low-level functionality inside a worker to create images? It turns out the answer is “yes, but with a whole lot of caveats”. I remembered that the Canvas API has a getData() function, which returns an array of all the RGBA values in an image. The OffscreenCanvas API is on the way and in any other situation we’d wait for it. But service workers don’t have access to the Canvas API.
Normally, the answer to this is simple - the HTML Canvas API lets us draw images locally and read them out as PNG data URLs by using Canvas.toDataUrl(‘image/png’). To add to that, the UK has 650 electoral constituencies, so there’s a chance that a user might have received 650 separate images - downloading over 97MB over the course of the evening. For instance, the Samsung Galaxy S7’s 4x pixel density means a notification image will typically be over 150KB. But the image notifications are much larger, even more so when multiplied by the device’s pixel density. Our previous experiments downloaded remote images for each notification, which worked well for small icon images.
With great image comes great (bandwidth) responsibilityĪlthough new, larger image notifications give a much better visual experience than icons, they’re worse in one important area: bandwidth. The vote totals were presented in text, in the collapsed view of the notification, and in a data visualization, in the expanded view using the big image spot to show the totals.
Users also had the option to be alerted on results from one or more of the local elections. We ended up sending a web notification (to Android users only) that contained live updating results from the major UK parties as they came in throughout the night of June 8–9. What could we put together? The answer turned out to be more complicated than we originally imagined. Not everyone was happy, but we saw our chance: With six weeks’ notice, we had an opportunity to develop a new test. But in a perfect example of why being a newsroom developer is so interesting, the UK prime minister surprised everyone by calling a snap election in June. We weren’t sure we were going to have an opportunity to find out. Now, with a larger canvas to play with, we wondered what we could achieve. This is particularly interesting for us, since in previous experiments we had to cram data visualizations into the icon of the notification. But mobile capabilities are always improving, and since our last experiment Google expanded their Notification API capabilities to add an image attribute, letting you use Android’s BigPictureStyle notification on phones. At the lab, we’ve experimented a lot with the web Notification API.
0 kommentar(er)
