Embedding Hype documents in PWA Thorium Builder

Exporting & Previewing Mobile Apps
1

Hello,

I’m exploring the possibility of displaying Hype documents within a mobile web app (aka PWA).

For the construction of the web app, I am using a promising new PWA visual builder for Mac called Thorium Builder (https://www.thoriumbuilder.com)

I think the combination of Thorium Builder with Tumult Hype could be a winning bet. Both products allow an easy visual construction with the option to extend their functionality through javascript. I think Thorium Builder is worth a serious look.

Let me explain the issue I have right now.

PWAs or web apps created with Thorium Builder are Single Page Application (SPA). It means that when the web app is loaded from its URL, then the index page and the related components (css, js, etc…) are loaded as well. When users open another page, then the page code is loaded dynamically and added to the DOM on top of the mainView (the Index page). All the Js and CSS files loaded by the index page are available for all the pages of the project.

In the Thorium Builder platform, if I add the standard call to a Hype document (div, script…) within index.html, everything works as expected.

But, If you do the same call in any of the rest of html pages (which are dinamically generated and then added to the DOM of the web app), then nothing is displayed.

I must say that an alternative that does work is to call the Hype document using an iframe. However, I would prefer to use a more direct call in order to facilitate data exchange between the Hype document and the web app.

I consulted this issue with the developers of Thorium Builder and they told me the following:

“I tried quickly with one of their example, and indeed got the same issue. As I was saying before, it looks like it is not loaded when using it with a dynamic generated page (and once again all TB pages other than the index page are dynamically generated and added to the DOM). I have had such issues with other components already, and the way to fix it was to use an “Initialisation” script when it was available. I just made a search, but didn’t found anything about it for Tumult Hype, but maybe the best thing to do should to ask them if there is a way to load an Tumult Hype layout dynamically in the DOM when a page is generated dynamically, I mean maybe there is an existing function like hype.initialise() or something like that?”

I would be very grateful if you could indicate possible solutions or ideas to address this issue and achieve a smoothly integration of Hype documents in web apps designed with Thorium Builder. I’m sure many Hype users would find it interesting.

I remain at your disposal to further clarify any point in the text.

Thank you very much.

1 Like
2

Based on conversation here… Allow Desktop PWA's …I’m just waiting for Tumult to add PWA exporting to Hype.

1 Like
3

Just made a quick post here:

1 Like
4

In my opinion, the need for a PWA export will become increasingly necessary as PWA reaches a higher level of implementation (and everything points to that). I wish Tumult would move this request up a bit on his to-do list :slight_smile: In the meantime, I’ll research how to add Hype documents in Thorium Builder. Thanks @Photics

2 Likes
5

Thank you @thomas_lundin. I am reassured to know that it is possible to integrate Hype documents into a PWA. I will study your notes in detail to try to find an equivalent path with Thorium Builder. Just two questions: Is your solution based on SPA (single page application) or MPA (multiple-page application)? Is it possible to access the PWA you made through a public link?

6

Thanks for the request and the details on your setup.

A Hype document’s loading is done through the *_hype_generated_script.js file. So you could have the main container div exist ahead of time, and then load that script when you need to load the animation.

Without having used Thorium, I’m guessing the bigger problem is the lack of an unload/unmount. This problem also affects React, Vue, and Angular. Pretty much if the main container div disappears, the Hype javascript will still be running and expecting its DOM. Since it has been removed the runtime will not be very happy. Because of this, the only real way to run in these context is through the iframe method. But, we definitely understand how this is not ideal and I added this thread in our feature tracker as a +1 for improving the situation.

We also would like to have PWA support as the offline application cache features Hype does include are currently deprecated (and were always prone to problems!).

1 Like
7

It is a single page application. (With several iFrames within, using postMessages.)

Not public. Unfortunately, I can’t share that solution (customer NDA). Can perhaps do a simple example and post that. Will put that on the todo-list :slight_smile:

3 Likes