Andrzej Mazur

• HTML5 Game Developer
• Enclave Games studio
• js13kGames competition
• Gamedev.js community
• Gamedev.js Weekly newsletter
• website: end3r.com
• twitter: @end3r
• github: @end3r

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) {
    navigator.serviceWorker.register('/roulette/sw.js');
};

Install SW and cache the content

self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(contentToCache);
    })
  );
});

Fetch new content

self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(r) {
      return r || fetch(e.request).then(function(response) {
        return caches.open(cacheName).then(function(cache) {
          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!

Questions?

end3r.com/slides/wdi19-pwa

Andrzej Mazur • @end3r • Enclave Games