This is one of those super annoying things that took me a while to discover and I was unable to find any prior art on it so I thought I would share.



# Background

[BattleTabs](https://battletabs.com/) is [our](https://gangbusters.io) first and primary product. Its turn-based game that runs in the browser and on the web.

Being turn based means that there is a need to be able to notify a player for various in-game events such as its their turn in a battle or they have recieved a friend request or so on.

The way we have done this up to now is to maintain [a persistent background page](https://developer.chrome.com/docs/extensions/mv2/background_pages/) that would run when the extension is installed. Within that page we would open and maintain a websocket to our servers. That way the server could push notifications and other messages to the background page and thus we could open notifications to inform the player about an event.

# Manifest V3

One of the [major changes](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/#service-workers) of Chrome's Manifest V3 is that you can no longer run persistent background pages. Instead you must use transient Service Workers. These startup and shutdown automatically and without your control, thus you are not able to maintain a persistent websocket connection to a server with them.

This was a big problem for us, how were we going to notify the player about events such as turn taken or friend invite?

# Push API

Well fortunately the ["Push API"](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) is a technology that exists to help with the problem of sending messages from the server to the client even when the website is closed.

It works by leveraging Service Workers and a special API built into the browser itself. You register a service provider with the browser and then provide a callback which is invoked by the browser when it receives a message from the provider.

# Firebase Cloud Messaging

[Firebase Cloud Messaging (FCM)](https://firebase.google.com/docs/cloud-messaging) is Google's push service provider. It has all the features we needed and as a bonus is totally free!

The only issue is all the docs are designed to work with websites not browser extensions. This is obviously a bit of a challenge for us and at first I thought it was an insurmountable one.

The key issue is the docs talk about registering a service token [from a normal webpage](https://firebase.google.com/docs/cloud-messaging/js/client#access_the_registration_token) which then will automatically create a service worker using a script it looks for at `firebase-messaging-sw.js`.

Well this is not how things work on and extension as the background service worker is automatically created for us.

# Solution

I'll save you the hours of wasted time trying to get things to work this way and skip to the solution.

The key insight is that we can register the service token not from a normal page but from with the background service worker itself!

See the below for a working example:

```typescript
import { getMessaging, onBackgroundMessage } from "firebase/messaging/sw"; // note: we MUST use the sw version of the messaging API and NOT the one from "firebase/messaging"
import { getToken } from "firebase/messaging";
import { initializeApp } from "firebase/app";

const firebase = initializeApp({
  // your Firebase config here
});

chrome.runtime.onInstalled.addListener(async () => {
  const token = await getToken(getMessaging(), {
    serviceWorkerRegistration: self.registration, // note: we use the sw of ourself to register with
  });

  // Now pass this token to your server and use it to send push notifications to this user
});

onBackgroundMessage(getMessaging(firebase), async (payload) => {
  console.log(`Huzzah! A Message.`, payload);

  // Note: you will need to open a notification here or the browser will do it for you.. something, something, security
});
```

Now when the extension is installed it will register this user for push notifications which it will receive even when the service worker deactivates!

# Conclusion

Well this was a bit of pain to get this working but the solution is quite neat.

I hope it helps others out.

So I am taking a little time away from games development at the moment to explore a few other projects and ideas. I want to solve real problems that either I or others have had. I want the projects to be short so I don't get bored and frustrated and I want to also learn new techniques and technologies as I build them.



The first of these little projects is called [Trello Tasks](https://chrome.google.com/webstore/detail/trello-tasks/icedfgfhjcnidibolnnfbjnjbkbfgcic).

![screenshot-01-640x400](https://www.mikecann.blog/wp-content/uploads/2015/11/screenshot-01-640x400.png)

The TL;DR of Trello Tasks is: it augments Trello by turning Cards into "completable" tasks.

I have [spoken about Trello before](https://www.mikecann.blog/misc/indie-game-project-management-with-trello/) but if you arent familiar with Trello its a super simple, popular and free [Kanban](https://en.wikipedia.org/wiki/Kanban) style app designed to organise any data. You can create any number of "Lists" which you then populate with "Cards". You can add images, links, comments etc to cards which allows you to organise just about any sort of project.

![](https://www.mikecann.blog/wp-content/uploads/2014/09/drag-drop-trello.gif)

One of the most common ways to use Trello is in the "ToDo" style. In this style you have three lists, ToDo, Doing and Done:

![2015-11-25_08-28-57](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-28-57.png)

In this style, when you start work on something, you move it from the "ToDo" List to "Doing" List then when its complete you move it to "Done" List.

This is all well and good but what if you use a different system of organisation such as arranging the items by category:

![2015-11-25_08-31-45](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-31-45.png)

Now if you want to indicate that you have read a book or watched a movie you would have to either drag it into the "Done" list (and loose the categorisation) or create a "Done" list for each category. One other option is to "Archive" the card but doing this removes it from the list altogether.

![2015-11-25_08-36-50](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-36-50.gif)

So I decided to try and solve this very particular but annoying problem. My solution is to add a checkbox to each card. Now cards can be marked "complete" and "uncomplete" by simply checking the checkbox.

![2015-11-25_08-41-18](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-41-18.png)

The extension works by piggybacking on Trello's comments system. So each time you complete or uncomplete a task the extension adds a comment to the card.

![2015-11-25_08-43-25](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-43-25.png)

This means that in a multi-user board you can tell who completed or uncompleted a task and syncing "just works":

![2015-11-25_08-47-32](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-47-32.gif)

So I think its a pretty neat solution to a problem that I personally have had while using Trello. You can grab the extension now and for free from the Chrome store:

[https://chrome.google.com/webstore/detail/trello-tasks/icedfgfhjcnidibolnnfbjnjbkbfgcic](https://chrome.google.com/webstore/detail/trello-tasks/icedfgfhjcnidibolnnfbjnjbkbfgcic)

I have a few more ideas like this I would love to explore and solve over the coming weeks so stay tuned!

Finally! Apple approved the iOS version of the game this morning, and this evening I finished off the site, so the holy trinity of game availability; iOS, Android and the browser is now complete!



Check it out:

[![app store](https://www.mr-nibbles.com/AppStoreBadgeFree.png)](https://itunes.apple.com/gb/app/mr-nibbles/id552109003?mt=8)
[![google play](https://www.mr-nibbles.com/GooglePlayBadge.png)](https://play.google.com/store/apps/details?id=uk.co.mikecann.MrNibbles)

or at: [https://www.mr-nibbles.com](https://www.mr-nibbles.com)

[![](/wp-content/uploads/2012/08/insert.jpg "insert")](https://www.mr-nibbles.com)

For once I actually finished one of my projects :) Im really happy with how the whole thing went, sure it went a couple of weeks over my original three-week estimate but still im happy with the result. Of course there is so much that could be improved, but for a free game made in a very short time I think it has done

Checkout more mr-nibbles posts: [https://www.mikecann.blog/category/myprojects/mr-nibbles-myprojects/](https://www.mikecann.blog/category/myprojects/mr-nibbles-myprojects/)

[![](/wp-content/uploads/2010/10/Shot_004.png "Shot_004")](/wp-content/uploads/2010/10/Shot_004.png)

Just made a quick little update to my chrome extension "Post To Tumblr".



In this update I finally worked out how to catch bad username or password returns from the Tumbr API. Basically it just involved me using the ajax rather than the post jQuery function and using "async:false" like so:

```javascript
\$.ajax({
  url: "https://www.tumblr.com/api/write",
  type: "POST",
  data: o,
  async: false,
  complete: function (transport) {
    if (transport.status == 200 || transport.status == 201) {
      postingNote.cancel();
      var postedNote = webkitNotifications.createNotification(
        "images/icon48.png",
        "Image Posted!",
        info.srcUrl
      );
      setTimeout(function () {
        postedNote.cancel();
      }, 5000);
      postedNote.show();
    } else if (transport.status == 403) {
      postingNote.cancel();
      var errorNote = webkitNotifications.createNotification(
        "images/icon48.png",
        "Posting Error!",
        "Bad email or password"
      );
      setTimeout(function () {
        errorNote.cancel();
      }, 5000);
      errorNote.show();
    }
  },
});
```

In addition I have added some notifications to indicate when the extension is doing something.

I have made a little demo video below to show this off:

<iframe width="100%" height="400" src="https://www.youtube.com/embed/Rr7JxuUmZt8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Chrome should auto update for you. If you dont have the extension yet [head over to the extension gallery to grab it now](https://chrome.google.com/extensions/detail/dbpicbbcpanckagpdjflgojlknomoiah)!