Progressive Web Apps

and board games

GDG DevFest 2018

Andrzej Mazur@end3rEnclave Games
GDG DevFest 2018, Warsaw, December 1st 2018

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) {
    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

developer.mozilla.org/Apps/Progressive

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 of the Web (and some games)!

Thank you!

Questions?

 

 

end3r.com/slides/devfest18-pwa

 

 

Andrzej Mazur@end3rEnclave Games

Ender Efka @end3r