Introducing the JavaScript Snake 🐍 Game Progressive Web App (PWA)
Last Updated -
Today's Progressive Web App example game is JavaScript Snake!
I was able to hack together some updates to a JavaScript Snake code repository to make a progressive web application (PWA) version of the game.
The JavaScript Snake Code
The game is a JavaScript/HTML port of the popular Snake game on old Nokia phones. The object of the game is to guide a 'snake' to eat a dot. When the snake eats a dot it grows.
The more the snake grows the faster it gets and the more difficult it is to navigate.
The game is more addictive than you would think. Unfortunately the code does not work with touch at this point.
The source code is very simple, but the UI for this version is rather lacking. Since updating this code repository I found a few other repositories with slightly better user interfaces. I am hoping to get some time in the near future to update the UI and make it touch enabled.
To play the game you can use the four arrow keys on your keyboard to direct the snake. Just don't run out of room or hit the snake!
Making a Progressive Web App
To make this game a progressive web app I needed to add a service worker, a valid web manifest file and of course serve it using HTTPS. I used the PWA Builder to create the PWA image set.
There are not many files required to run JavaScript Snake, so pre-caching the entire game is the way to go.
cacheList = [ "/", "css/main-snake.css", "css/dark-snake.css", "css/images/dark-snakeblock.png", "css/images/dead-dark-snakeblock.png", "css/images/deadblock_border.png", "css/images/deadblock.png", "css/images/snakeblock.png", "js/snake.js" ];I did add some basic elements to the page's HEAD element to set the viewport, reference the web manifest file and set the theme-color. I am finding when I match the theme color meta value to the web manifest theme-color value helps trigger the add to home screen prompt.
But here is the real issue. To qualify as a real progressive web application the site needs to work well on all screen sizes. If you run the Lighthouse PWA tests you will find some issues, specifically it says the app does nto render well on small viewports.
Unfortunately I think this failed test is preventing my JavaScript game from triggering the add to home screen prompt. Even manually adding the app to the home screen does not result in it being added as a Progressive Web App.
Wrapping It Up
JavaScript Snake is a simple, addictive game. The current code base highlights how important a responsive code base is to the success of any web site.
The add to homescreen prompt is not being triggered in this first iteration because it is not responsive. It also needs to have touch support added.
I will let you know when I get these features added.
So far these have been very simple applications. Just wait there are more to come in the coming days! So be sure to sign up for my newsletter.
If you are new to Progressive Web Apps or want to learn more about creating your own PWA, you need to enroll in my course: Progressive Web Apps (PWA) From Beginner to Expert. Save 85% off the list price! Right now it is only $29 (US), $171 off the regular $200 price.
The course has over 21 hours of video content and more planned in the coming days. So be sure to enroll and start your PWA journey now!