Blog

JavaScript provides a neat little API to achieve just that. It’s called FileReader. Let’s find out what it can do!

If you want to learn more about WebSockets, I recommend this introduction. In this post we’re focussing on utilizing WebSockets to build a simple chat application.

When working on my reverse engineering of 2048 for browsers I wanted it to be playable on mobile devices as well. Problem was, that while you could perfectly use your keyboard to control the tile movement on a desktop, this was not possible on smartphones! Digging through the web I found some partially working solutions but nothing quite good. So I decided to craft it myself and the results work flawlessly!

1. Introduction
2. Manifest
3. Service Worker
4. Caching Strategies
5. Debugging

There are a bunch of caching strategies out there. Here are two of them that I found particularly useful:

Cache Then Network Then Cache

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

this.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request).catch(function () {
      return fetch(event.request).then(function (response) {
        return caches.open(cacheStatic + cacheVersion).then(function (cache) {
          cache.put(event.request, response.clone());
          return response;
        });
      });
    })
  );
});

What this does is it first checks if the request is already cached. If so, the cached version is returned. If not, it goes to the network to fetch it. On success it puts the response in the cache and returns it to the browser. Note that we have to clone the response as it can be consumed only once.

1. Introduction
2. Manifest
3. Service Worker
4. Caching Strategies
5. Debugging

Last but not least I want to share with you some tricks and places you need to know when debugging your Progressive Web App. First and foremost I recommend using the Chrome Browser for this task as I found it to be much more convenient.

1. Introduction
2. Manifest
3. Service Worker
4. Caching Strategies
5. Debugging

Introduction to PWAs

Progressive Web Apps (or PWAs for short) could possibly be the future of mobile app development. At its core a PWA is simply a website with some special features added to it. It is a website that can be installed to a device’s homescreen without an app store.

1. Introduction
2. Manifest
3. Service Worker
4. Caching Strategies
5. Debugging

The manifest of a web app is a JSON file which provides information about that app. Here’s an example of a basic manifest.json:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
    "name": "PWA Tutorial",
    "short_name": "PWA Tutorial",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#fff",
    "description": "A tutorial for PWAs",
    "icons": [{
        "more on those later"
    }]
}

Most of the attributes are self explanatory. The ‘start_url’ defines where the application lives. Relative parts in this attribute start from the manifest’s location. Setting ‘display’ to ‘standalone’ means that when launching the app from the homescreen it will look like a native app. If you want your app to open in a browser, you may set ‘display’ to ‘browser’. All the possible attributes are described in more detail here.

1. Introduction
2. Manifest
3. Service Worker
4. Caching Strategies
5. Debugging

A service worker is a type of web worker. Its job is to intercept network requests, cache files, retrieve those files from cache and deliver push messages.