Building Progressive Web Games Part 1

All app-stores(Google play/iTunes/Windows app store) are filled with tons of games ranging from really simple ones to super complex ones. These games are downloaded millions of times. With the power of PWAs, a lot of these are perfect candidates to be brought to the web instead.

Prateek Bhatnagar
Jul 25, 2017 · 3 min read
Game attack on PWAs

This is a series where I’ll take up a game called Hop from Google play and try converting it into a Progressive web game, while keeping it at a slick 60 FPS. I’ll also try to cover the following topics while maintaining a perfect 💯 score on lighthouse.

  1. Animated routing using liquid-route.
  2. Code splitting & Tree shaking to avoid the game framework size from hitting our “Time To Interactivity” metric.
  3. Lazy loading of extra libs to perform additional steps(firebase, BabylonJS).
  4. Progressive offline User experience without burning a hole in User’s network usage.
  5. Also, try to load ads without hurting any performance metric(but I’ll keep optional unless this thread works out)

Disclaimer: I build web apps for living and might make noob mistakes as a game dev, feel free to point them and I’ll fix them for you


Step 0: What is the game?

a sample screenshot from original game

Step 1: Choosing our guns

Now I can either make this series from a total of ‘n’ to ‘n+2’ parts and configure/explain webpack configurations, plugins and rest of the serving strategy or use the 🔥 ⭐️ preact-cli. Preact-cli will setup a working end to end environment for us to just go and code the application logic. This setup gives us a 3-second headspace for our application code before we hit a bad 5-second mark of interactivity.

Also, I’ll be using components from preact-material-components to achieve simple UI elements like progress-bar, buttons and more.

Note: A huge challenge here is to load the gigantic game engine and still not hurt our ‘Time to Interactivity’.

Step 2: Getting started

// install preact cli
npm install -g preact-cli
// create app
preact create myGame --dest . --type empty
// add material components
npm i -D preact-material-components
// add liquid route
npm i -D liquid-route
// add babylonjs
npm i -D babylonjs

👆this will setup the working directory for you, all you have to do is start building the home screen.

initial code for dummy homescreen

after the above code is in place, it’s just one command to get you started

preact serve

Step 3: Next Steps

dummy login screen to begin with

Code: https://github.com/prateekbh/hopon/tree/part1

See you soon 😃


Prateek Bhatnagar

Written by

Web-dev @ Google/ PreactJS! Trying to build a better mobile web

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade