App Assets

Many assets required by the articles are required by the article template, rather than by the content. It would be wasteful to declare such assets—typically CSS, JavaScript, fonts and graphics–for each article, when in fact they should be considered shared assets used throughout the application.

By providing an app asset feed, you can make sure that all your shared dependencies are fetched and kept up-to-date by the apps on every launch. Individual article HTML can then rely on those assets being available without explicitly declaring them in the article feed.

App Asset Properties

Note that remote_url contents are expected to be immutable. The Richie servers polling your app asset feed deduplicate fetch requests and will not fetch an asset from a remote URL if it has already been fetched.

The local_name is the local path to the resource relative to the article HTML (index.html). The app-assets/ prefix is mandatory.

Example App Asset Feed

{
  "app_assets": [
    {
      "remote_url": "https://cdn.example.net/richie-app-assets/MetricWeb-Bold.ttf?d=0.1.9",
      "local_name": "app-assets/MetricWeb-Bold.ttf"
    },
    {
      "remote_url": "https://cdn.example.net/richie-app-assets/MetricWeb-Regular.ttf?d=0.1.9",
      "local_name": "app-assets/MetricWeb-Regular.ttf"
    },
    {
      "remote_url": "https://cdn.example.net/richie-app-assets/app.css?d=0.1.9",
      "local_name": "app-assets/app.css"
    },
    {
      "remote_url": "https://cdn.example.net/richie-app-assets/app.js?d=0.1.9",
      "local_name": "app-assets/app.js"
    },
    {
      "remote_url": "https://cdn.example.net/richie-app-assets/fontawesome-webfont.ttf?d=0.1.9",
      "local_name": "app-assets/fontawesome-webfont.ttf"
    },
    {
      "remote_url": "https://cdn.example.net/richie-app-assets/starred-symbol.png?d=0.1.9",
      "local_name": "app-assets/starred-symbol.png"
    }
  ]
}

In this example, a version parameter d=0.1.9 has been added to the remote URL query strings. When the version is incremented in the feed, Richie's servers will re-fetch all assets.

An article HTML file can refer to these files with the verbatim value of the local_name property. For example:

<link rel="stylesheet" href="app-assets/app.css">

Note that Richie's feed processing does not crawl the contents of assets like CSS and JavaScript to discover further assets. Your asset files can refer to each other with relative paths, but all assets have to be declared in the feed.

Absolute app asset paths

Starting from app version 202305.24, all Richie apps support absolute app asset paths (paths starting with /). Absolute paths should be preferred to relative paths due to performance benefits during page rendering. For example:

{
  "app_assets": [
    {
      "remote_url": "https://cdn.example.net/richie-app-assets/app.css?d=0.1.9",
      "local_name": "/app-assets/app.css"
    }
  ]
}

<link rel="stylesheet" href="/app-assets/app.css">

Detecting Modified Feeds

Richie relies on the ETag header in your feed response to detect when a feed has been modified. The ETag header is thus mandatory.