getting-started.md

Getting started with PWA

PWA/SPA: what's in an acronym

A PWA (Progressive Web Application) is a special form of a SPA (Single Page Application), a modern way of building web frontends in a purely static way, with mostly a single page that changes using JavaScript & CSS, and interfaces with Server logic using well defined REST interfaces and JSON.

PWA technology is still in development, but the gap between PWAs and native mobile/tablet app and even desktop apps is closing quickly.

XO includes a few building blocks for efficient PWA building, including a router, Event handler, DOM helpers, etc.

Create a PWA container, and set it up with some routes:

new PWA({
    router: "history",
    routes: {
        "/": HomeRoute,
        "/test": TestRoute,
        "/settings": SettingsRoute,
        "/help": HelpRoute
    }
})

Where each route module imherits from xo.route:

class HomeRoute extends xo.route {

    title = "Home";

    menuIcon = "ti-home";

    async render(path) {
        let div = DOM.parseHTML('<div>Hello World!</div>');
        this.area.add(div);
    }

    get area() {
        return this.app.UI.areas.main;
    }
}

Rendering

See UI to see how your route components interact with the HTML in your app.

Further reading

• UI
• Router
• OmniBox