Offline Web Apps for iOS with Tumult Hype using the Cache Manifest (aka Progressive Web Apps)

05 PM

A cache manifest file is a machine-readable file that tells browsers to store web content for an extended period of time. It's the quickest way to load a Hype document export on a device for future (offline) use:

Load your Hype document from a server once, add it to your Home Screen (using all built-in Hype functions and a convenient button in Mobile Safari on your iPad or iPhone) and you have a saved copy of your Hype document. You could turn this app into a Kiosk by turning on 'Guided Access', another built in iOS feature. This ensures that device users can't exit your app.

If you're interested in what types of things you can do with these apps, read this:

It's really quick, but there are a few caveats:

  • The cache limit at the moment is 50 MB
  • Google Chrome will show you a warning if you don't have https enabled on your page.
  • If you have any external videos or assets, they won't load if the device is offline
  • This means that Google Fonts will not download nor will Typekit fonts.
  • Youtube or Vimeo videos will fail if the user is not connected to the internet.
  • External JS references (Jquery loaded via a CDN) will fail. (Add those to your Resource library and load them using ${resourcesFolderName}/file.js
  • A screenshot of your page will appear as the icon unless you manually create a 'apple-touch-icon'. Here's a quick generator for making that process easier: https://realfavicongenerator.net/. You would upload an image, then reference this file from your Hype resources library by using ${resourcesFolderName}/file.png. So instead of using <link rel="apple-touch-icon" href="touch-icon-iphone.png"> you would make sure you have that touch-icon-phone.png file (generated from this service), but you would change the reference to be: <link rel="apple-touch-icon" href="${resourcesFolderName}/touch-icon-iphone.png">

A quick way to check for external references is to look in the <head> area and see if there are any HTTP (or https) URLs.

Here's how to get all setup. Check the 'Create offline application cache' and choose a Home screen web app status bar color. (Default is fine).

File > Export as HTML5 > Folder to get this document on your desktop. Next, upload this to a server and load the .html file on your device.

Click the 'share' button and click 'add to home screen'

What is happening here?

Tumult Hype generates a file like this:

CACHE MANIFEST
#547056906.201111

../Helvetica2_iPhone.html
HYPE-596.thin.min.js
HYPE-596.full.min.js
helvetica2iphone_hype_generated_script.js?11669
spec_ff.png

This cache.manifest file is in the <head> of your exported .html document, and browsers (even desktop browsers) will load this content into the browser. The #123 number is a version number, regenerated on each export to tell the device to re-check all assets. The .html file is cached, as is the runtime and all images. When visiting that page, Mobile Safari downloads all assets, and makes a note of the #547056906.201111 value. If that changes, everything will be re-checked if the device is online. If it is not online, previously-downloaded items will be loaded from cache.

This is not a recommended tool for desktop browsers -- a better way to tell a browser 'don't download this if you have downloaded it recently' is to use Expires headers. (a quick way to do this is to install a .htaccess file in the folder for your project).

The web app might not load if your device runs out of space (and cached items are purged) or the web app is not loaded for a few weeks. iOS has some space management heuristics that might delete your cached items.

Learn more about how Tumult Hype can help you create interactivity for mobile devices here.

Here's a document ready to go you can test with, adapted from the 'Helvetica vs Arial' Gallery item: Helvetica2_iPhone.hype

Check out 'Workbox' for debugging PWAs: Workbox  |  Google Developers

4 Likes

@Daniel Thanks. This is helpful. I’ve just had a problem with cache. :+1:

This is great. As an extra, would there be a way of easily creating a manifest for ePub in the future? http://www.idpf.org/epub/30/spec/epub30-publications.html#sec-manifest-elem

Hi Daniel,
I ran over the “Application Cache is Deprecated” message in Chrome on a test site having no https.
My research afterwards resulted in
"This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; "
and
“Use Service Workers instead.”
see: https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache
My question here is: Will Tumult change the HTML5 output, so the usage of the application cache is replaced by Service Workers?
(I did a search on the forums, but this topic here seems to be the best to ask in context)
Thank you!

2 Likes

Yes, we will need to transition the output but do not presently have a timeline for this change. There’s also related Progressive Web App support as an option to add that will be related.

2 Likes

Regarding the fact that Web App support may be deprecated, there is a tool used by designers using InDesign: in5 https://ajarproductions.com/pages/products/in5/

It allows designers to export as HTML pages made with InDesign.
We importe the Hype-exported HTML folder or the OAM and then when InDesign pages are exported we choose the Web App option.

To date, it works pretty well but the cache is not 50 Mb max but ± 25 Mb on iOS and ±5 Mb on Android. “±“ because it is not officially documented by Apple and Google.

Stricto sensu, whats is exported by in5 is not a PWA even if the final result looks like a PWA. But reading offline a content that was loaded by the in5 manifest works well and embedded Hype animations too.