The 2048 Progressive Web App (PWA)

Chris Love

Last Updated - Sat Jan 09 2021

Today I am excited to publicly share the 2048 Progressive Web App (PWA)!

This is the third in the series of simple progressive web applications I am launching. So far you have seen:

• Hextris
• JavaScript Calculator

There are more to come! So be sure to watch for them. You can sign up for my newsletter to get more details on the full set and follow all the great content on Love2Dev.

The 2048 Game

If you are like me you have lost many hours playing 2048 on your phone. This game helped me keep my sanity back in 2014 when it seemed like I was flying somewhere every week. I would play this game in the airport waiting to board and on the plane when I was just too tired to focus on work.

The game is simple and additive. Slide numerical tiles together. When they match value they combine, doubling the value in the new tile. All numbers are multiples of 2, 4, 8, 16 and so on.

The goal is to slide tiles around, combining them until you get at least one tile to 2048.

Simple, right!

Not so fast.

When new tiles are combined a new tile is randomly rendered on the board, always with the value 2. Unless you have room to combine it you may find yourself in an awkward position and have to think your way out.

The Source Code

Like the other PWAs 2048 is a fork of an existing GitHub repository.

The game code is written rather well. As far as I can tell I would not change much if anything. The JavaScript is modular and does not bleed into the global scope. It uses modern touch input events well and takes advantage of requestAnimationFrame to update the screen.

Things I have recommended for years.

I added a simple service worker that pre-caches the application's assets. This means the game should work offline and load instantly.

This time I remembered to add an appCache file. This will enable it to work offline in browsers, like Safari, that have not shipped service worker support.

This will also demonstrate how service workers and appCache can work together.

Browsers that support service workers ignore any appCache reference because service workers supersede appCache. If the browser does not support service workers, the service worker is not registered and the appCache is used.

The either or scenario is gracefully handled by all browsers and is a great example of the progressive part of progressive web apps. Service workers, the web manifest and many other modern features are great to have, but should not break the page and site if they are not supported.

Sure the user in an older browser won't have the same level user experience, but that is due to their choice of technology, not your site. At least, that is my attitude.

Wrapping It Up

I love 2048. This game has actually been live for several months, but I neglected to share the link.

I upgraded the application as part of an upcoming Progressive Web Application book I am finished for Packt. I have no publish date at this time, but will be sure to let you know as soon as I know.

Have fun and lose some hours to this addictive game! And as always be sure to add it to your homescreen right next to that Pokemon Go you don't want anyone to know you play, I won't tell!