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.

[![](/wp-content/uploads/2011/04/ahxelogo.jpg "ahxelogo")](/wp-content/uploads/2011/04/ahxelogo.jpg)

As some of you may know, I have been getting into haXe reccently. For those of you dont know what haXe is, this is taken from [haxe.org](https://haxe.org):

> **haXe** (pronounced as *hex*) is an *open source* programming language
>
> While most other languages are bound to their own platform (Java to the JVM, C# to .Net, ActionScript to the Flash Player), **haXe** is a *multiplatform language*.
> I have been aware of haXe for a long time, infact I used to make extensive use of precursor to haXe, MTASC the alternative compiler for AS2\. Since the launch of AS3 however, Nicolas Cannasse of Motion-Twin has moved onto HaXe, and the project has flourished.

I have used HaXe in the past for various small projects, usually to take advantage of some of the features that the language offers Flash developers that AS3 cant offer us. Features such as [function inlining](https://haxe.org/ref/inline) and the [fast memory ops](https://haxe.org/api/flash9/memory) mean that flash developers can really get some great performance out of their libraries while at the same time still able to compile to SWC's.

Recently I have been exploring the various other targets offered by haXe, not just the flash one. Currently haXe supports the [following targets](https://haxe.org/doc/intro):

> **[![](/wp-content/uploads/2011/04/ul_spot2.gif "ul_spot2")](/wp-content/uploads/2011/04/ul_spot2.gif) Javascript : **You can compile a haXe program to a single .js file. You can access the typed browser DOM APIs with autocompletion support, and all the dependencies will be resolved at compilation time.
>
> **[![](/wp-content/uploads/2011/04/ul_spot2.gif "ul_spot2")](/wp-content/uploads/2011/04/ul_spot2.gif) **Flash : You can compile a haXe program to a .swf file. haXe is compatible with Flash Players 6 to 10, with either "old" Flash 8 API or newest AS3/Flash9+ API. haXe offers very good performance and language features to develop Flash content.
>
> **[![](/wp-content/uploads/2011/04/ul_spot2.gif "ul_spot2")](/wp-content/uploads/2011/04/ul_spot2.gif) **NekoVM : You can compile a haXe program to NekoVM bytecode. This can be used for server-side programming such as dynamic webpages (using mod_neko for Apache) and also for command-line or desktop applications, since NekoVM can be embedded and extended with some other DLL.
>
> **[![](/wp-content/uploads/2011/04/ul_spot2.gif "ul_spot2")](/wp-content/uploads/2011/04/ul_spot2.gif) **PHP : You can compile a haXe program to .php files. This will enable you to use a high level strictly-typed language such as haXe while keeping full compatibility with your existing server platform and libraries.
>
> **[![](/wp-content/uploads/2011/04/ul_spot2.gif "ul_spot2")](/wp-content/uploads/2011/04/ul_spot2.gif) **C++ : You can now generate C++ code from your haXe source code, with the required Makefiles. This is very useful for creating native applications, for instance in iPhone development.
>
> **[![](/wp-content/uploads/2011/04/ul_spot2.gif "ul_spot2")](/wp-content/uploads/2011/04/ul_spot2.gif) **C# and Java targets are coming soon! (from @cwaneck)
> The target that has taken my interest recently has been Javascript.

Having recently worked in Javascript on my Chrome extensions [PostToTumblr](/posts/posttotumblrs-1628th-user-celebration/) and [ChromeCrawler](/posts/chrome-crawler-v0-4-background-crawling-more/) I have gained a better understanding of how JS works and how to code in it. Despite this however I still cant get over what I consider some "very nasty" things in the language. Lack of type safety, nested anonymous functions and lack of proper classes just have my stomach all in knots thinking about them.

So I was extremely happy to discover that haXe now targets Javascript. It meant I could write the next version of [ChromeCrawler](/posts/chrome-crawler-v0-4-background-crawling-more/) in type-safe, class-happy haxe and it would simply hide all the nastyness from me once it compiles. (You can ofcourse modify the JS that is exported if you so wish however)

So now, finally to the point of this post. I sat down to write the core functionality of the crawler. To do the URL crawling so far I had been using jQuery's get() method to load an external page.

How was I to use the jQuery library in haXe I wondered. Well thankfully this has already been thought of with the special "extern" keyword: [https://haxe.org/doc/js/extern_libraries](https://haxe.org/doc/js/extern_libraries)

Thankfully [Andy Li](https://blog.onthewings.net/) has also already provided an excellent version of the library for haXe in his [jQueryExtern](https://lib.haxe.org/p/jQueryExtern) project. Using the [haxelib](https://haxe.org/haxelib) command I downloaded the project and started coding.

It wasnt long however before I ran into a compilation issue when I tried to use the static function get() on the JQueryS class:

> characters 2-9 : Unknown identifier : JQueryS
> This confused me as no matter what I did, I couldn't get the haXe compiler to recognise the class. Having spent an evening stuck on the problem I decided to email the creator of the project [Andy Li](https://blog.onthewings.net/).

It turns out that to beable to use the JQueryS class you must first import the JQuery class:

> import JQuery;
> Low and behold that worked!

As I couldn't find the solution to this problem on a Google search I thought I would write up the solution myself so that others don't stumble on this rather singular gotcha.

[![](/wp-content/uploads/2010/12/Shot_0032.png "Shot_003")](/wp-content/uploads/2010/12/Shot_0032.png)

Forgive me if you already know this but I just discovered it by accident and think its pretty neat.



Open a windows explorer window (windows &amp; e) then click on Organise > Folder and Search Options:

[![](/wp-content/uploads/2010/12/Shot_0021-237x300.png "Shot_002")](/wp-content/uploads/2010/12/Shot_0021.png)

Inside here is a nifty little option called "Automatically Expand To Current Folder":

[![](/wp-content/uploads/2010/12/Shot_001.png "Shot_001")](/wp-content/uploads/2010/12/Shot_001.png)

Now you can easily get a view where you are in a folder structure and jump to the sub-folder of your choice!

tips

tips

tips