Outrun Timer App

I understand there are so many beautiful timers across the WEB tailored for plenty of specific needs.

One of the reasons why I like my profession is that I can create everything I want in the way I want it to look and behave.

So let me introduce to you my Outrun Timer app:

  • it works both online and offline
  • adapts to device screen size (phone, tablet, desktop)
  • might be added to your home screen as a standalone App.

Read more about my motivation, technical details and insights.

Motivation

To be honest, the main idea of ​​creating this timer was to play around technologies which are out of my daily routine, but interesting for me.

So I set up the next goals for myself:

  • Write SPA with Vue.js ecosystem (Vue router, Vuex)
  • Turn it into Progressive Web Application
  • Use AudioContext API
  • Make it works offline
  • Get as much Lighthouse rating as possible for both Mobile/Desktop devices
  • Get new experience
  • Have fun

Insights

Vue.js

In general, I liked Vue and its simplicity. It’s really impressive how easy you can start using it without any previous experience. I believe it ideally fits for the prototyping of complex SPA-interfaces.

AudioContext API

At first, I’ve chosen an old-fashioned HTMLAudio. Later, I figured out it stops other sounds, e.g. if you’re listening to the music while the timer is working. It was the main reason I’ve eventually switched to the AudioContext API.

Another interesting point for me was the inability to play sound until the user starts interacting with your app. It definitely makes sense for me, since I still remember the end of the 90s when you could open the web-page and be stunned by web-page author’s musical preferences :)

Progressive Web Application

I used a workbox-webpack-plugin which did almost everything for me to transform SPA to PWA. For the sake of simplicity, it’s definitely worth using. One of the negative things about PWA was debugging and caching. Sometimes after changes in the code browser were still showing the previous result, sometimes it wasn’t. Removing PWA-plugin from dev-versions helped.