Progressive Web Apps

and board games

Warszawskie Dni Informatyki 2019

Andrzej Mazur@end3rEnclave Games
Warszawskie Dni Informatyki 2019, Warsaw, Poland, March 26th 2019

Andrzej Mazur

Andrzej Mazur

Mixing up realities

Neuroshima Hex

+ Enclave Games

+ js13kGames

= ❤️

Progressive Web App

Native-like experience using modern web APIs

Folder structure

Manifest file

    "name": "HexRoulette",
    "short_name": "HexRoulette",
    "description": "Digital add-on to the physical board game...",
    "icons": [
            "src": "img/icons/icon-32.png",
            "sizes": "32x32",
            "type": "image/png"
        // ...
    "start_url": "/index.html",
    "display": "fullscreen",
    "theme_color": "#BD6B19",
    "background_color": "#161516"

Service Worker

SW lifecycle

Registering Service Worker

if('serviceWorker' in navigator) {

Install SW and cache the content

self.addEventListener('install', function(e) {
  e.waitUntil( {
      return cache.addAll(contentToCache);

Fetch new content

self.addEventListener('fetch', function(e) {
    caches.match(e.request).then(function(r) {
      return r || fetch(e.request).then(function(response) {
        return {
          cache.put(e.request, response.clone());
          return response;

Native-like behaviour

  • Add to home screen
  • Push notifications

One code base to rule them all


PWA for the win

  • Easy to implement
  • Framework independent
  • Best of both worlds
  • Next step after RWD
  • Killing PWAs, one app at a time

Cutting-edge tech

Build the future (web) games!

Thank you!




Andrzej Mazur@end3rEnclave Games

Ender Efka @end3r