A service worker is like a cookie. Cookies are downloaded from a web server and installed in a browser. You can go to your browser’s preferences and see all the cookies that have been installed by sites you’ve visited. Cookies are very small and very simple little text files. A website can set a cookie, read a cookie, and update a cookie. A service worker script is much more powerful. It contains a set of instructions that the browser will consult before making any requests to the site that originally installed the service worker.
A service worker is like a virus. When you visit a website, a service worker is surreptitiously installed in the background. Afterwards, whenever you make a request to that website, your request will be intercepted by the service worker first. Your computer or phone becomes the home for service workers lurking in wait, ready to perform man-in-the-middle attacks. Don’t panic. A service worker can only handle requests for the site that originally installed that service worker. When you write a service worker, you can only use it to perform man-in-the-middle attacks on your own website.
A service worker is like a toolbox. By itself, a service worker can’t do much. But it allows you to access some very powerful browser features, like the Fetch API, the Cache API, and even notifications. API stands for Application Programming Interface, which sounds very fancy but really just means a tool that you can program however you want. You can write a set of instructions in your service worker to take advantage of these tools. Most of your instructions will be written as “when this happens, reach for this tool.” If, for instance, the network connection fails, you can instruct the service worker to retrieve a backup file using the Cache API.
Push and notification are two different APIs.
“Lesser known CSS quirks & advanced tips” is a collection of some really weird CSS features and behaviors. These are good to know, as sometimes they can shed some light on strange results or help with implementation of a particular design feature, where no other options are applicable.
I want to live in the world where this is the real reason for web browser's convoluted user-agent strings.
“Dearest server, I am Chrome, the 64th of that name, child of WebKit, grandchild of KHTML, a disciple of Gecko, follower of the great Mozilla/5.0, running on Windows NT 10” https://t.co/uUUdbYXWCY
— Amelia Bellamy-Royds (@AmeliasBrain) February 14, 2018
What can we do with this method?
We can gather some basic information about the user, like the screen resolution (when the browser is maximized) and which browser (or engine) is used. Further we can detect if a user opens a link or hovers with the mouse over an element. This can be used to track which (external) links a user visits and using the hover method. It should be even possible to track how the user moved their mouse (using an invisible table of fields in the page background). However, using my method it’s only possible to track when a user visits a link the first time or hovers over a field the first time. Maybe it’s possible to modify the method so that it is possible to track every click.
Furthermore it is possible to detect if a user has installed a specific font. Based on this information it should be possible to detect, which OS a users uses (because different operating systems ship different fonts, e.g. “Calibri” on Windows).
“Entering the Quantum Era—How Firefox got fast again and where it’s going to get faster” is an insightful article showcasing the big changes happening with the Firefox browser. It seems, the pendulum is swinging back towards the browser that almost became irrelevant. I think that competition is good for everyone, and it has proven much more so in the end-user applications. New ideas, new approaches, new technologies, and plenty of stimuli for the Google Chrome and other browser teams to respond with something even better.
Markdown Here is a browser extension (for all sorts of browsers too) that enables quick and easy rendering of the Markdown text into the HTML. This works well in a number of scenarios – Gmail email composition, WordPress post editing, and a few other.
“A Look Back at the History of CSS” is a nice trip down the history lane as to where and how CSS came about. It’s hard to imagine these days that CSS wasn’t always around and the web looked like whatever your browser decided to make it look like.
My good friend and colleague Michael Stepanov has been recently annoyed by some weird color offsets on his external screen in Fedora 26. Turns out, it wasn’t the external monitor, video card, or cable issue. The problem was with the new Google Chrome and its choice of the color profile. The solution was found in this Reddit thread:
- Open new tab and type there chrome://flags
- Find option “Force color profile” and set it to “sRGB”
- Restart Chrome and enjoy blue as blue 🙂