Add Prompt API web storage demo

[chrisdavidmills]

This demo is part of my Prompt API documentation. It shows how Prompt API context can be saved in Web Storage and then restored after a page reload.

I would put this on MDN as a live demo, but MDN pages clear web storage data after a page reload, so I can't do that.

[pepelsbey]

Looks good! Thank you 🙂 A few suggestions below.

I got this error in the console when I opened the demo in Firefox and clicked the textarea. Given the level of support for this API, I would double-check that it degrades gracefully and suggests good patterns.

Uncaught (in promise) ReferenceError: LanguageModel is not defined
    getSession file:///Users/vmakeev/Projects/dom-examples/prompt-api-web-storage/index.js:79
    init file:///Users/vmakeev/Projects/dom-examples/prompt-api-web-storage/index.js:27
    <anonymous> file:///Users/vmakeev/Projects/dom-examples/prompt-api-web-storage/index.js:22
    EventListener.handleEvent* file:///Users/vmakeev/Projects/dom-examples/prompt-api-web-storage/index.js:20
index.js:79:24

[pepelsbey]

Released in Chrome 148, but trialled since version 137

I would suggest linking to a browser compat table on the APIs page instead. In this particular case, the info won’t get outdated, but a link would be much more useful.

[chrisdavidmills]

I thought about this a bit and ended up updating it to:

<p>
      This demo stores your previous session prompt history using the Web
      Storage API, and provides an option to delete it. First released in Chrome
      148 (see
      <a
        href="https://developer.mozilla.org/docs/Web/API/Prompt_API#browser_compatibility"
        >full browser compat data</a
      >).
    </p>

I've provided the link, but I think it is also useful to give the reader the upfront info about Chrome 148. The trial information is not very useful, however, so I've removed that.

[chrisdavidmills]

I got this error in the console when I opened the demo in Firefox and clicked the textarea. Given the level of support for this API, I would double-check that it degrades gracefully and suggests good patterns.

Sure thing. I've used the following pattern to check for support, then return early and print a clear error message to the UI in cases where it is not supported.

textarea.addEventListener("focus", () => {
  if (!("LanguageModel" in window)) {
    promptOutput.innerHTML = `<span class="error">Your browser doesn't support the Prompt API!</span>`;
    return;
  }

  if (!session) {
    init();
  }
});