IFRAME Test Project

Testing IFRAME embedding to work around Safari issues with failing to persist local storage.

Conclusions:

• There is 1 convoluted way to get some kind of local storage in an IFRAME on Safari on Itch
  • Test if we can request storage permissions, and if cookie setting sticks
    • If not, cause them to open a different page on the same host (html-classic.itch.zone in this case), click on the page at least once, and set a cookie
  • Back in the iframe, you should now be able to request storage permissions (the user will get a pop-up confirmation dialog once) and cookie setting now works
  • Mirror all local storage into cookies, and they'll stick around
    • Note to get this to work in both Chome and Safari, you must use different cookie-setting APIs, as far as I can tell (cookieStore in Safari and document.cookie in Chrome, I could not find any invocation that persisted on both)
  • Though (fairly) well documented, this does seem finicky and fragile as heck...
• However, this method requires the user to open a second page anyway, so, instead, this general method works for all browsers, should not be fragile, and provides a consistent flow:
  • Rename index.html to main.html and add a super-simple index.html which is just a button with .href = document.location.href.replace('index.html', 'main.html') and target="_blank"
  • Change the embed settings to:
    • Embed in page
    • Dimensions 320x120 or similarly small
    • Automatically start on page load
  • This is demonstrated above
  • This requires no 3rd-party hosting and will consistently direct someone to the exact build that's being served by itch, so should be perfectly kosher for jam games
  • In theory this should also work within Itch's "site locking", as it first loads your game via the iframe before directing the user to a new tab
  • As an added benefit, if your game has hints and tips on the game page, the user can easily get back to the informational page without leaving the game session, as they're now in separate tab
• Note: to allow this game to work on the Itch.io app, you'll want to automatically redirect and not try to open in a new tab, my final code for my launch wrapper looks like this:

      var target_url = document.location.href.replace('index.html', 'main.html');
      if ((window.navigator.appVersion || '').indexOf(' itch/') !== -1) {
        // Itch.io app, just redirect
        document.location = target_url;
      } else {
        document.getElementById('wrap').href = target_url;
      }

It would be possible to do a blend of both of these behaviors and only show the button on Safari, otherwise redirect, however that'll require either a larger embed on your game page, and/or multiple button presses to get into full-screen if using the "click to enter full-screen" embed option.