HTTP Handler

Table of Contents

• Description
• Usage
• Root directory
• Static resources
  • CSS
  • JavaScript
• Version

Description

The HTTP handler is what is serving a progressive web app and its resources:

• app.wasm: The web assembly binary built with GOARCH=wasm GOOS=js go build -o app.wasm
• app.js: The JavaScript file that load the web assembly binary and initialize service workers
• app-worker.js: a JavaScript support file required by Go wasm programs to run
• manifest.json: A simple JSON file that tells the browser about a web app and how it should behave when 'installed' on the user's mobile device or desktop
• app.css: A CSS file that contains the package default styles
• CSS files: The styles used by the app
• JavaScript files: Thes scripts used by the app
• Other static resources: Images, fonts, sounds, ...

The handler also provides offline mode. It can be used to build servers and cloud functions.

Usage

The HTTP handler is implemented in the Handler struct. All its fields are about setting up app data such as:

• Title
• Metadata
• Icons
• CSS files
• JavaScript files
• PWA manifest data

h := &app.Handler{
    Name:        "Luck",
    Author:      "Maxence Charriere",
    Description: "Lottery numbers generator.",
    Icon: app.Icon{
        Default: "/web/icon.png",
    },
    Keywords: []string{
        "EuroMillions",
        "MEGA Millions",
        "Powerball",
    },
    ThemeColor:      "#000000",
    BackgroundColor: "#000000",
    Styles: []string{
        "/web/luck.css",
    },
    Version: "wIKiverSiON",
}

Then it can be used with the standard http package to build a server.

err := http.ListenAndServe(":7000", h)
if err != nil {
    // handle error
}

Web directory

The web directory is the directory used to store static resources such as app.wasm, styles, scripts, and images.

By default, it is located by the side of the server binary:

.
├── server
└── web
    ├── app.wasm
    └── Static resources...

It can be changed to be on a cloud storage bucket such as Amazon S3 or Google Cloud Storage, which is very useful in a scenario where a PWA is deployed on a cloud function to reduce function counter:

h := app.Handler{
    Resources: app.RemoteBucket("BUCKET_URL"),
}

Static resources

Statics resources are resources such as wasm binary, CSS files, JavaScript files, images, sounds and so on. They must be located in the web directory.

When referenced, they relative URL must be prefixed by "/web/".

CSS

CSS files are file containing styles to shape the look of the progressive web app.

In addition to being located in the web directory, they must be referenced in the Handler in order to have their styles available within the app.

Example of a CSS file named web/luck.css:

h := &app.Handler{
    Styles: []string{
        "/web/luck.css",
    },
}

JavaScript

Even if this package is about using Go rather than JavaScript, there are still some use cases where JS might still be required.

Like CSS files, JavaScript files must also be located in the web directory and referenced in the Handler.

Example of a JavaScript file named web/luck.js:

h := &app.Handler{
    Scripts: []string{
        "/web/luck.js",
    },
}

Version

As mentioned previously, the handler supports offline mode for progressive web apps.

To do this, the browser is caching most of the app resources. The way it knows if there is changes in the app is by looking for changes on app-worker.js.

When generating the app worker, the handler is inserting the version in the worker code, which makes it different at each version change, and allows to trigger PWA updates on the browser.

Defining a version is done depending on the situation:

• Development: The version should be set to an empty string. Doing so will change the version at each server start.

    h := &app.Handler{
        Version: "",
    }

  Note that if you update the wasm application, you must also relaunch the server in order to see the changes in the browser.

• Online deployment: The version should be set in order to avoid that the browser continuously makes updates when there are multiple instances serving the app.

    h := &app.Handler{
        Version: "wIKiverSiON",
    }