Running Hype project on iPhone with no internet

This is either a simple problem or a difficult one, and I can't tell which. Hype and I have produced a bit of interactive HTML (plus associated resources) that I need to show to someone at their office. This needs to be something that can be shown on an iPhone or iPad slickly and without fuss. No laptop. But, as a visitor, I cannot access the internet there.

Maybe this isn't a Hype problem -- maybe there is some iOS browser feature that will let me preload a Hype-generated HTML page and its associated resources folder. Is there?

My fallback will be to save the Hype project as a movie, but that won't be as impressive.

Well Hype offers the offline-application-cache: https://tumult.com/hype/documentation/v4/#document-inspector

though manifest is officially deprecated ... but should work.
newer technologies (PWA) are not yet supported by builtin functionalities of Hype

There's a few offline options here, you would just need to load your document once (and double check that it works as expected in airplane mode first): Displaying a Tumult Hype document in a Kiosk or as an app

Many thanks for those two tips, Hans and Daniel. Really helpful! I never investigated what the 'offline application cache' or 'web app' tick boxes did, and I should have. Nor have I paid any attention to the general subject of Progressive Web Apps -- it looks like they will continue to develop in the wider world and they look like a good match for future Hype development.

Currently, as Hans says, Safari deprecates manifests, with other browsers taking an even more severe view of them, but I trust their support will last a few months longer.

I've had a quick go at creating a home-screen cached app using the method described here on a half-baked version of the project. It looks very promising. I agreed to the iPad request for me to release 50MB of local storage for the web app (the resources folder is 41MB in size, of which 39MB is a Quicktime movie), and the whole thing ran faultlessly in Airplane Mode except that the movie wouldn't load. I'll try shortening the movie's duration and compressing it with Handbrake and see what happens.

Thanks again.

1 Like

I think if you find yourself in a tight spot and need to have a demo available, it's also a smart idea to export a mp4 file from Hype and Airdrop that to your phone / iPad in case something goes wrong! It won't be interactive, but should be able to give the gist in the same orientation.

So a short while back I started playing with scriptable.

https://scriptable.app

Scriptable is a free iOS app that you can edit and run Javascript on you iOS device.

This can be simple or very advanced.

One of the scripts I wrote along the way of doing my tests was to be able to run a Hype exported Project which was either in my iCloud Drive or on my devices within the Scriptable folder in the devices Files.app

This script will allow you to place a exported project into the Scriptable folder on you iCloud drive.

Which once downloaded to the device via Files.app ( make sure all the files are downloaded, including the ones in the resource folder ) , you can add the file name to the filename var in the script

and then run it.

The script will present a Sheet with a web view of the project.

The importance of making sure all the files are downloaded is, if you are off-line . The script will try and run the downloaded project files. If you are still online then you will run iCloud or the files one. Which ever it defaults to.

This is the Scriptable code. Pretty simple code. ( You should have seen my original :smiley: )

HTMLViewer_Scriptable.zip (1.1 KB)

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: deep-green; icon-glyph: user-md;
// change "country" to a value from // change "country" to a value from

const webView = new WebView()

 
    function getHtml(filename) {
      let fm = FileManager.iCloud()
      let dir = fm.documentsDirectory()
      let filePath = fm.joinPath(dir, filename)
      return filePath
    }

let filename  = 'tele.html'   // CHANGE TO YOUR FILE NAME 
//  How to include a directory if you put the files inside one and inside the Scriptable folder  --  'Hype/tele.html'

let filePath = getHtml(filename)
await webView.loadFile(filePath, null, true)

await webView.present()

Download Scriptable on you device from the AppStore.

Unzip the file above and add the js file to the Scriptable Folder. You can do that on your Mac.

Cannot remember if the Scriptable Folder gets created Automatically in the iCloud Drive folder.

If not you can add it name 'Scriptable

It should then show up in the Scriptable.app's list of scripts.
Open the script and set the filename in the script.

Remember to put your exported Project also inside the 'Scriptable folder.

Run the script.


I will try and see if I can get it to go fullscreen. and also possible set so you can just add the filename in the Scripts Option panel.

1 Like

I have update the code, so now you can just choose you file using a Picker.

// Variables used by Scriptable.

// These must be at the very top of the file. Do not edit.

// always-run-in-app: true; icon-color: deep-green;

// icon-glyph: user-md; share-sheet-inputs: plain-text;

// change "country" to a value from // change "country" to a value from

const webView = new WebView()

var filepth = await DocumentPicker.open(['public.html'])

await webView.loadFile(filepth[0].toString(), null, true)

await webView.present(true )

Put the file in the Scriptable folder or anywhere in the iCloud Drive area.

Select the file and it will run.

But remember if you want offline then make sure its downloaded to the device.


Update.

HTMLViewer.js 2.zip (977 Bytes)

await webView.present(true )

I hade missed a bool out in the present webView.
Putting it in now allows full screen.

2 Likes

Just to update: I slightly shortened the video element and compressed it with Handbrake so it's now only 15MB, and the whole resources folder is now only 18MB. The Airplane-mode web app now runs perfectly! I need to finish the project now (which will increase its size, but the whole thing should stay less than 25MB), and I'm confident that the problem has been solved (at least until <manifest> support is deleted from Safari).

The Scriptable idea from Mark looks very interesting, but I'll leave trying that until I've got a working <manifest> web app in the bag.

Thanks again, guys.

5 Likes