## 2018-05-01  #PolymorphicIdentifier

### Preserving Browsing Context

The `lively-container` can browse and render text, code, html, markdown and allows to edit them either through direct object manipulation or editing its source code.

- The browser knows two "modes": browsing and editing. This mode is preserved through navigation. 
- When browsing a rich data structure as a plex media graph, those two modes seem not be enough. 
- How to specify if the user wants 
  - a short or detailed list
  - a full table view, 
  - or just some pictures?  
- And those "view" mode should be preserved. 
- How can we do it? #OpenQuestion 

### Solved: Handing Polymorphic Identifier URLs to the browser

With our quick and dirty wrapping-fetch approach, we can wonderfully use custom schemes in
in our URLs to hide implementation details or authentication.

This works when using fetch directly in JavaScript:
```javascript
fetch("plex://library/metadata/1095/art/1515023881").then(r => r.blob())
```

But it fails to work, when the browser request the URL internally:

```javascript
that.innerHTML = `<img src='plex://library/metadata/1095/art/151502388'>`
```
The `img` element will throw an error, since it does not use our fetch method.

So we would have to fall back on constructing native URLs. In the case of plex, it works, it just does not look nice, but in in a more general cases this does not work at all. (schemes that do not link to external resources, but compute them on the fly) 

```javascript
that.innerHTML = "<img src='http://127.0.0.1:32400/library/metadata/1095/art/1515023881?X-Plex-Token=pF6JpWpxZrwRsqqwgThX'>"
```
The problem for this, is that the website or the service worker do not have control of the handling or arbitrary URLs, e.g. `open://foobar`. So we have to work around it. 

As a solution, we implemented a special handler in our service worker, that listens for request to `https://lively4/scheme` and will call the browser back to do its `fetch` magic. 
This way we can hand the browser this new URL, that looks normal, but gets handled specially by the service worker.

```javascript
that.innerHTML = "<img src='https://lively4/scheme/plex/library/metadata/1095/art/151502388'>"
```

We can further hide this URL rewriting in a `swxURL` function:
```javascript
that.innerHTML = `<img src='${lively.swxURL("plex://library/metadata/1095/art/151502388")}'>`
```

So let's see how it works out in practice.