Getting started

You should read this entire page before you start coding for starti.app

Installing the script

Add the package to your project in one of two ways:

  • Add the package using npm:

    npm install starti.app

  • Add the following line to the HEAD-section of your HTML file:

    <script crossorigin src="https://unpkg.com/starti.app@1.2.31/umd/main.js"></script>

Note: In the above example you should of course replace 1.2.31 with the version of the package you want to use (the latest version should always be the preferred one).

If possible you should prefer the npm version as this version includes the documentation of all classes and methods. The documentation will be shown automatically in all modern editors.

Using the referenced API

The entire functionality is contained within a class called startiapp. When using an editor with auto-complete functionality, all available options will appear when typing a period (.) after startiapp, making the development process more efficient.

Modules

The app has a list of modules which serves different purposes. For example there are modules for handling push notifications and integrating with the calendar on the device.

Methods on the respective modules can be called directly on the modules using dot annotation.

The package includes methods for all modules, even if only a subset of those modules are available in the specific app being developed.

Example

Here you’ll find a short example of how to get started using push notifications inside your website.


<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script crossorigin src="https://unpkg.com/starti.app@1.2.31/umd/main.js">
    </script>

    <style>
      body {
        margin-top: var(--startiapp-inset-top, 0px);
      }
    </style>
</head>

<body>
    <div class="startiapp-show-in-app" style="color: green">
        Loaded in starti.app version <span id="appVersion"></span>
    </div>
    <div class="startiapp-show-in-browser" style="color: red">
        NOT loaded in starti.app
    </div>

    <button onclick="location.reload()">Reload</button>

    <button onclick="initializePushNotifications()">
        Initialize push notifications
    </button>

    <button onclick="getPushToken()">
        Get the token
    </button>

    <button onclick="resetUrl()">
        Reset startup URL
    </button>

    <script type="text/javascript">

        // We should always listen for a call to appIntegrationsAreReady.
        // When this function is called we know we are running inside the
        // app.
        startiapp.addEventListener(
            'ready',
            async function () {
                // Tell the app we are ready to receive events
                startiapp.initialize();

                // Get the app version
                document.getElementById('appVersion').innerText =
                    await startiapp.App.version();
            }
        );

        async function initializePushNotifications() {
            // A system pop-up will appear the first time this is
            // called on an iPhone
            alert('Permission granted: ' +
              await startiapp.PushNotification.requestAccess());
        }

        async function getPushToken() {
            // Manually ask for the current token
            alert(await startiapp.PushNotification.getToken());
        }

        function resetUrl() {
          // After calling this function, the app will start at the
          // initially configured URL once restarted
          startiapp.App.resetAppUrl();
        }

    </script>
</body>

</html>
Events →