Introducing Hextris 🕹️ - A Tetris Inspired Progressive Web App (PWA)
Last Updated -
Do you like playing Tetris like games?
Do you have a browser?
Today I am excited to announce my latest progressive web application project, Hextris.
Its not Tetris, but a game in what I call the geometric puzzle matching genre. Game play is simple. If you are on the desktop you can use the right and left arrow keys to rotate a hexagon to stack colored sides. On touch screens just tap the right and left side of the screen to rotate the hexagon.
Get at least three lines of the same color together to make a match and clear then from the board. The game ends when your stack of colors reaches the game board boundary.
The Game Source
I have been searching GitHub for web projects I can upgrade to progressive web apps. The Hextris repository was the first project I found that met my qualifications.
I did not write, nor modify any of the game play code or graphics. That was written by a quartet of high school friends.
There are few minor bugs I have found, but nothing I can`t be forgiving about. I mean it is a free game after all!
There are several aspects of the code structure that would not meet my standards and recommendations. I only say that so you won`t think I write production code this way. The code is written much better than the typical JavaScript I review.
Some of the glaring issues I found are polluting the global scope and mixing markup and CSS within the JavaScript. Time permitting I may refactor the code to use JavaScript modules, sorry classes can`t be polyfilled and I am not a fan of trans-pilling.
The other aspect I don`t like is browser sniffing code to determine if you are using a desktop or mobile browser. Please never, ever do that because you make false assumptions that can and do break your applications.
As far as I can tell they are doing this to resize the board. This is where understanding responsive design will help. The dimensions should be moved to CSS using media queries.
You can clone/fork my forked repository on GitHub.
Making the Game a Progressive Web Application
My goal was to upgrade the Hextris game to a progressive web application. This means I needed to add a service worker, valid web manifest file and of course serve the application via HTTPS.
This is a simple process, I did exactly I wrote about in the 15 minute PWA upgrade tutorial.
I used the PWA Builder Image Generator to create a baseline set of images for the web manifest file.
This was the first time I used that tool in a while. I think they have upgraded the generator to create a set for different platforms, so you get around a 100 images. The cool thing is when you view the manifest details in the Chrome developer tools you see all of them!
I uploaded the twitter-opengraph.png file from the project`s images folder to the PWA Builder generator to create the icons. The generator also creates the JSON you need to add to your manifest file to reference the icon images.
I made the web manifest file simple. It has the name fields, start_url, display mode and colors set.
{ "name": "Hextris PWA", "short_name": "Hextris", "icons": [ { "src": "img/Square71x71Logo.scale-400.png", "type": "image/png", "sizes": "284x284" }, ... ], "start_url": "/", "display": "standalone", "background_color": "#fff", "theme_color": "#e74c3c" }
I apologize because I forgot to take a screen shot of Android prompting me to add the game to the home screen. But it prompted me as soon as the application loaded.
The Hextris Service Worker
I also kept the service worker simple. The entire application can be pre-cached. So I copied the service worker from the 15 Minute upgrade tutorial and changed the list of URIs to pre-cache.
The service worker defines a couple of const variables to name the application`s cache and define the list of URIs to cache.
const preCacheName = "pre-cache-hextris", preCacheFiles = [ "/", ... //files to cache ];
The application`s files are cached in the install event:
self.addEventListener("install", event => { console.log("installing precache files"); caches.open(preCacheName).then(function (cache) { return cache.addAll(preCacheFiles); }); });
Once the files are cached the fetch event handler loads the assets from cache, avoiding the network.
self.addEventListener("fetch", event => { event.respondWith( caches.match(event.request).then(response => { if (!response) { //fall back to the network fetch return fetch(event.request); } return response; }) ) });
This would be the cache falling back to the network strategy.
Now the application not only loads instantly, but works even when there is no Internet connection.
Die downasaur die!!
I added the registration code to the project`s main.js file. It is the last code in the file.
` / register the service worker /
if (serviceWorker in navigator) { navigator.serviceWorker.register(`/sw.js`).then(function (registration) { // Registration was successful console.log(`ServiceWorker registration successful with scope: `, registration.scope); }).catch(function (err) { // registration failed :( console.log(`ServiceWorker registration failed: `, err); });}There is nothing advanced about this code, just simple boilerplate service worker registration code.
I added it to the main.js file because it is the last file loaded and seemed like the logical place to add the registration without inlining code in the HTML.
Making Hextris Secure
All sites should be using HTTPS, which is one of the many reasons why Progressive Web Apps must use HTTPS.
All my sites are secure by default because I use AWS CloudFront and AWS Certificate Manger. TLS certificates are free and take about 30 seconds to setup in AWS.
The site is served from AWS S3 through CloudFront. So even if this is your first time loading Hextris it should load super fast and secure.
Wrapping Things Up
I hope you have fun playing the game. I did modify the original source because it had BitCoin mining malware included. If you find anything like that left in the project I apologize and will remove it. Just let me know where it is.
I do want to thank the four original authors for their work. They did a pretty good job.
I also hope this helps you see how easy it is to make any web site a progressive web app. I also hope you realize how many apps in the app stores really do not need to be native apps. They should be progressive web apps.
This is the first in a series of simple progressive web apps I will be posting. So be sure to follow my Twitter feed or sign up for my newsletter.
If you want to learn how to create progressive web applications be sure to sign up for my Progressive Web Apps: From beginner to Expert Course. You can currently save $171 and start your PWA journey for just $29!
The course is packed with over 21 hours of video training, with more coming soon.