# Browser

JavaScript library for integrating Swish on a Shopify web store (themes and headless stacks).

## Requirements

This library depends on the following browser APIs.

* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [Web Workers API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)

### Swish App Proxy

The Swish browser library requires a proxy service that operates on the same domain as the store. This service facilitates the loading of additional resources and ensures secure communication with the Swish API. The app proxy is automatically provided once the app has been installed.

If your store has it's own server (e.g. headless stack), then you will need to implement the proxy first. Please use the [Node.js library](/libraries/node.js.md) to implement the app proxy.

## Installation

To load the Swish app, you can either activate the Swish embed through your theme editor or install it via NPM. We recommend using the app embed for most scenarios. For headless stacks, NPM is necessary.

## Usage

```typescript
import { swishApp } from "/apps/wishlist/assets/swish.js";

const swish = await swishApp({
  proxy: {
    baseUrl: "/apps/wishlist"
  }
});

const { data } = await swish.api.items.list();
```

### Reference

#### Swish API

All Swish API functions can be accessed and are automatically scoped to the current user. 

```typescript
const { data } = await swish.api.items.list();
```

{% hint style="success" %}
Please refer to the [Swish API Client](/libraries/api-client.md) docs for a comprehensive list of available functions.
{% endhint %}

#### Swish UI Components

{% hint style="danger" %}
This feature is still under development!
{% endhint %}

To accelerate development, consider using our built-in UI components. These components follow a general design language and allow for some customisation. For a completely tailored user experience, creating your own UI components is recommended.

Our components load only when needed, enabling you to blend custom UI elements with our standard components without impacting your page speed.

<pre class="language-typescript"><code class="lang-typescript"><strong>await swish.ui.showSignIn({
</strong>  returnTo: window.location.pathname
});
</code></pre>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.swish.app/libraries/browser.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.