metronome-pwa

A simple metronome, as progressive web app. Available at https://tic.replayer.app

Installation

You can use it right from the website, without any installation.

While visiting, you can then install it as a Progressive web application, for offline use within your browser:

• Google Chrome
• Firefox, only partially supported

Notes

Setup

This PWA was created with the minimal guide from How to create a new PWA-enabled VueJs app on Ubuntu 20.04 from scratch, using the following options:

• Vue 3 (no class-style, eventuelly I might use the new composition API)
• Babel
• Typescript
• PWA
• Router (no history mode)
• Vuex
• CSS Preprocessors (Sass/SCSS (with node-sass))
• Linter / Formatter (ESLint + Prettier, Lint on save)
• dedicated config files

Wake Lock API availablilty

Currently, the Screen Wake Lock API is not available on all browsers. There is an an abandoned, Non-standard, similar Wake Lock API by Mozilla, and the superseding Screen Wake Lock API.

In the hope to prevent screen locks, and while a better solution is available, the projects uses the NoSleep.js "Hack" by Rich Tibbett.

How to use Bulma in a Vue3 project (not using Buefy)

For a Vue3 project created with the Vue CLI (With the CSS Pre-processors not selected), mainly follow the guide at https://bulma.io/documentation/customize/with-node-sass/ (however using node-sass) with a few changes:

• Omit the first step, since we are using the already available project structure with it's package.json

• As indicated install the packages for development, as we are only customizing bulma during development time

  npm install node-sass --save-dev npm install bulma --save-dev

This will add the packages to the devDependencies in package.json

Then follow the steps from Number 3: https://bulma.io/documentation/customize/with-node-sass/#3-create-a-sass-file with the following adaptions

• Use an appropriate style name
• Put the css in public/css

To run both the SASS autocompilation and npm's serve script, use two terminals. You can do that also from within VSCode.

Aligning the Buttons with controls

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Resources

• Getting Started with Web Audio API is a very good intro into the Audio API