Browsergame: Notifications, Favicons und All-Inkl

Notifications aus dem Browsergame in das System

Notifications sind ein nettes Gadget für ein Browsergame. Ein Bauauftrag für ein Gebäude oder Raumschiff ist fertig? Eine Flotte ist angekommen? Warum da nicht auch mal eine der viel beliebten Notifications nutzen? Zu beginn hatte ich dies noch relativ simpel mit Javascript drin. Die Theorie war einfach. Durch ein regelmäßigen Ajax Request wird geprüft ob es Notifications gibt, die noch nicht angezeigt wurden. Sei es in Game oder auf dem Desktop. Also mit Interval regelmäßig ein Ajax abgefeuert und sofern ein Ergebnis zurückkommt dies im JS verarbeiten. Die JS Funktion sah wie folgt aus:

function notifyMe(title,text) {
    if (!("Notification" in window)) {
        console.log("This browser does not support desktop notification");
    }

    else if (Notification.permission === "granted") {
        // If it's okay let's create a notification
        var notification = new Notification(title, {
            body: text,
            icon: 'images/logo_circle.png'
        });
    }

    // Otherwise, we need to ask the user for permission
    else if (Notification.permission !== 'denied' || Notification.permission === "default") {
        Notification.requestPermission(function (permission) {
            // If the user accepts, let's create a notification
            if (permission === "granted") {
                var notification = new Notification(title, {
                    body: text,
                    icon: 'images/logo_circle.png'
                });
            }
        });
    }

}

Nicht schön, aber funktionell. Problem aber war, es wurde warum auch immer auf dem Handy nicht angezeigt. Also weiter Forschen, und forschen und forschen. Alles samt sehr anstrengend. Tatsächlich fand ich dann eine Laravel Lösung die noch ein Stück eleganter ist. Benötigt dazu wird aber NPM und Composer auf dem Server. Sollte ja selbstverständlich sein. Sollte.

Ich will mit jetzt um die Uhrzeit hier nicht mehr die Mühe machen jeden einzelnen Schritt zu erklären für die Integration der Laravel Notifications. Dafür aber zeigen wo für Version 6 es eine gute Anleitung gibt! https://medium.com/@sagarmaheshwary31/push-notifications-with-laravel-and-webpush-446884265aaa

Und ja, sofern für euch interessant, nehmt euch ein wenig Zeit. Denn es dauert ein wenig.

All-Inkl und NPM bzw. Composer

So lokal läuft nun alles wunderbar. Initial das Https Zertifikat meiner lokalen Entwicklungsumgebung, der Devilbox, als sicher eingestellt. Laravel dazu gebracht die Notifications zu senden. Wunderbar. Toll! Und nun Deployment auf den Server… Das ging ja recht Flott, doch im Anschluss hagelte es nur noch 500er. Genau das was man um 23:15 sehen will. Ja es ist ein Hobby Projekt, aber nein schlafen könnte ich deshalb nicht. Also wieder die Anleitung oben zur Hand genommen und geschaut was ich lokal ausgeführt habe, das auf dem Server noch fehlt.

Erster Punkt:

$ npm install -g web-push
$ web-push generate-vapid-keys

Gut, da scheiterte es schon. Kein NPM vorhanden… Verdammt und nun? Man weiß sich ja zu helfen. Ich habe versucht NPM selbst zu installieren. Wie? So! (ALL-INKL):

  • SSH login
  • wget https://nodejs.org/dist/v6.10.3/node-v6.10.3-linux-x64.tar.xz
  • tar -xf node-v6.10.3-linux-x64.tar.xz
  • ln -s ./node-v6.10.3-linux-x64 nodejs
  • echo $PATH
  • export PATH=$PATH:/www/htdocs/w1234567/nodejs/bin

Anschließend prüfen ob Node nun da ist mit Node -v Und ja Node ist nun drauf! Ein Wunder. Die oben angegebenen Befehle mit npm install… und web-push generate waren hier dann wichtig, da der PubKey als auch Privat Key natürlich in der eigenen .env Datei eingetragen werden müssen, bzw. in meinem Fall die aus der lokalen der der Live entsprechenden ausgetauscht. Auch in der enable-push.js, die in der Anleitung oben hinzugefügt wird, musste hier der Pub-Key ausgetauscht werden.

Doch leider kam immer noch der 500er! Ich erhoffte mir nun mit dem nächsten Befehl besserung: composer require laravel-notification-channels/webpush Doch was musste ich nun feststellen? Kein Composer… Wirklich jetzt? Also im Terminal wieder in den eigenen Root Folder (/www/htdocs/w1234567/). Neuen Ordner anlegen, reingehen, Composer downloaden und installieren:

  • mkdir bin
  • cd bin
  • curl -sS https://getcomposer.org/installer | php
  • echo "alias composer='/www/htdocs/w1234567/bin/composer.phar'" >> /www/htdocs/w1234567/.user_bashrc
  • source /.bashrc

Prüfen ob Composer nun da ist uuuuuund ja, da ist Composer! Also weiter geht es.

composer require laravel-notification-channels/webpush

Und nächster Fehler. Composer stellt fest das hier die PHP Version ab 7.2 benötigt. Ach ja stimmt, da war ja was. Das Browsergame läuft schon auf einer höheren, aber das Terminal dümpelt noch auf PHP7.1 rum. Kann man ja froh sein, dass es nicht noch PHP 5.4 ist ;). Also noch schnell die All-Inkl Konsole auf PHP 7.2 umstellen.

ln -sfv /usr/bin/php72 /usr/bin/php

Das wars, der Composer Befehl läuft durch ohne Fehler zu werfen. Und siehe da, das Browsergame läuft wieder ohne 500er!

Kurze Freude auf Android…

Nun gehen also schön die Notifications auf dem Laptop und auch im Browser auf dem Handy! Wunderbar! Aber verdammt nochmal, in der Cordova App mit dem inAppBrowser wird diese Notification mal wieder komplett ignoriert. Warum auch immer. Wäre ja langweilig wenn man nicht noch an der nächsten Stelle wieder suchen muss 😉

Abstand Ruhe, mal was kleines Langweiliges für das Browsergame machen

Nach all dem Hickhack wollte ich noch was kleines ruhiges und stumpfsinniges machen. Aber was? Favicons… ja genau Favicons fehlen noch. Also das Logo kurz in so eine Favicon Maschine gepackt und 39 Dateien erhalten! 39 Dateien? Zu meinen frühen Jahren gab es ein Favicon, und das noch im Format ico. Heute gibt es 39 Bilder! Für die unterschiedlichen Apple Geräte, Windows Kacheln, Bildschirmgrößen und was weiß der Geier noch alles. Also gut dann die halt auch noch rein. Passt!