Embedding the PWA in your Unity application

Although the PWA can be opened in a new browser tab (with Application.OpenURL for example), we recommend finding a way to embed it directly in your app for UX reasons. As an example, we will demonstrate using the plugin "3D WebView for Android and iOS (Web Browser)" (available on Unity Asset Store).

Opening the PWA

Once installed, you can follow these steps to integrate it and open the Kinetix PWA:

• Grab the prefab "CanvasWebViewPrefab" from the demo scenes of the plugin

• Use the following code to get the PWA url and open it

   
      [SerializeField] private CanvasWebViewPrefab webView;
   
      
      public void BeginOpenPwa()
      {
          KinetixCore.UGC.ClearCachedUrl();
  
          // Example on how to get the link and pass it to the callback
          KinetixCore.UGC.GetUgcUrl(OpenPwa);
      }
  
      private void OpenPwa(string _Url)
      {
          StartCoroutine(OpenPwaCoroutine(_Url));
      }
  
      private IEnumerator OpenPwaCoroutine(string _Url)
      {
          webView.gameObject.SetActive(true);
          
          // Note that we await initialization
          yield return webView.WaitUntilInitialized();
  
          Debug.Log("Target url: " + _Url);
          webView.WebView.LoadUrl(_Url);
      }

Detecting end of the flow

Using the close ("X") buttons in the PWA

If you choose to use this method, please be aware that the "next" and "previous" standard actions of the browser won't work to navigate the pages of the PWA

webView.WebView.CloseRequested += (_Sender, _EventArgs) => {
            Debug.Log("Received close request. Closing web view.");
            Debug.Log("We were on " + webView.WebView.Url);
            
            webView.gameObject.SetActive(false);
            
            // We can fetch the player processes manually if we were on the last url
            // Or just implement a polling (see below)
            if (webView.WebView.Url.Contains("/validation")
            {
                // Fetch processes
            }

};

Via polling

Detecting the end of the flow in the PWA can be done in a variety of ways, but the simplest is to poll the user's processes to detect if a new emote is being processed

    private IEnumerator FetchProcessesAtInterval()
    {
        GetPlayerProcesses();

        while (enabled)
        {
            yield return new WaitForSeconds(currentProcessFetchInterval);
            
            GetPlayerProcesses();
        }
    }

To detect a new valid Process, you can check the length of the processes after filtering them thanks to the property CanBeValidatedOrRejected

 
    private List<SdkApiProcess> GetFilteredProcesses(SdkApiProcess[] _Processes)
    {
        List<SdkApiProcess> filteredProcesses = new List<SdkApiProcess>();
        
        foreach (SdkApiProcess process in _Processes)
        {
            if (!process.CanBeValidatedOrRejected)
                continue;
                
            if (process.Step == "render_failed")
                continue;
            
            if (process.PostMLError == true)
                continue;
            
            filteredProcesses.Add(process);
        }

        return filteredProcesses;
    }

        
        

    private void RefreshProcessList(SdkApiProcess[] _Processes)
    {
        
        List<SdkApiProcess> filteredProcesses = GetFilteredProcesses(_Processes);

        int previousProcessCount = emoteProcessButtons.Count;
        
        if (filteredProcesses.Count > emoteProcessButtons.Count)
            OnNewProcessFound?.Invoke(filteredProcesses[0]); // The API result is ordered from most recent to oldest (DESC)
        
        // Close the PWA OnNewProcessFound
    }