Hi,

I'm wondering if a feature might be added for deploying a PWA ( https://developers.google.com/web/progressive-web-apps/ ) version of a HTML5 game on Itch? 

Ideally, I'd like "Run Game" to redirect to a page containing my PWA assets, so that then the browser can ask if I want to install the PWA application (on Windows 10 / Chrome OS / Android / iPhone). I want it to be as seamless as possible ideally.

It would be useful to optionally be able to restrict this to people that have purchased titles, as a method of letting Adventuron users monetize their games on Itch (they may also of course opt for completely free).

Would existing site features let me achieve what I would like or might support be added in the future for such requirements?

I can provide a PWA app for testing purposes if so required.

Chris

Hey, sorry for not getting back sooner. I think this is an interesting idea. itch.io html5 games are served on a different domain in an iframe. I haven't looked into the PWA spec too much, but we would need to have stored files treated like they are on different domains for security reasons. Since games are standalone pages, I supposed individual games could implement PWA support themselves. You're welcome to try that out and tell me your findings.

Searching for "PWA Paywall" on Google for  itch.io. Happy to see interest on this topic. 

PWA is developed by Google with some advanced surprises. So much it was adopted by Microsoft, up to including Edge being converted to Chrome. Safari is implementing the same innovations as well on iOS (slowly). And now PWA technology appears near end of incubation. With the Web App Manifest in "Working Draft" phase. After "Service Workers" was released in October 2018, on Safari.  The final  component to watch for full realization is the Web App Manifest:

https://www.w3.org/TR/appmanifest/

https://developer.mozilla.org/en-US/docs/Web/Manifest

https://developers.google.com/web/fundamentals/web-app-manifest/ 

For  example- here is a PWA being used by the JS13KPWA team challenge: https://mdn.github.io/pwa-examples/js13kpwa/  

It is the most advanced template found developed in collaboration with Mozilla.

Hello Leafo,

I have deployed the 1.04 update to the beast as a PWA application (to Itch and my own website) . On my own domain it works, on Itch it does not.

To see how the PWA should act (if not served via Itch's wrapper), I have hosted the game here:

https://adventuron.io/games/thebeast

For the purposes of testing, use Chrome, and you should see the button as presented here:

The purpose of PWAs is to be able to ask the player / user if they wish to install the game locally, then for the player / user to be able to use the app/game offline, via a shortcut in the host operating system.  

I suspect the problem is with the Itch wrapper.

Itch also provides me with a URL to directly go to my game. Using the link shown here ALSO does not present the PWA installation button (on Chrome):

I think the problem is that the Itch wrapper (which places the contents into an embedded iframe) is somehow playing havok with the following code (which must intercept the 'beforeinstallprompt' event on the Window object):

Possible solutions:

* The "game" does not start inside an iFrame, the "Run Game" button (from the main page) redirects to the index.html that I deployed inside the zipfile.

* OR fix the wrapper to see why the wrapper is suppressing the 'beforeinstallprompt' event.

Long term, it would be convenient to be able to place PWA content (not the beast - which is free) behind a paywall, as with other types of "for pay" content on Itch. 

Chris

Very interesting. : )

Happy to share research for PWA "proof of purchase" solutions.

Following what @leafo directed, we reviewed the core issues of iframe security with "Same-Origin Policy" and "Cross-Window communication" And found a few links:

Here is one that describes the context the best:

https://javascript.info/cross-window-communication

Part of the solution may be postMessage:

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Another part might be "a PWA enabled wrapper"?

Where the wrapper listens to either: "beforeinstallprompt" or (probably) a postMessage from the parent.

We see similar solution elsewhere with ADs in iFRAMES -  allowing App Install Buttons. And we think that (among some other things) is why big companies adopted PWA uniformly and made big moves quietly.

The event name is confusing: "beforeinstallprompt". It is triggered "after Web App Manifest is validated". So we find that no manifest, means no "beforeinstallprompt event. The handler usually creates the "Add to Homescreen" button and the listener for when it is clicked, also a handler if the user installed or canceled.  The name of the event, refers to a CONFIRM PROMPT that appears, as a standard, to allow user confirm the install of the app. That is why the event is strangely named 'beforeinstallprompt' - even thought it is fired "after manifest". Best doc on it is here: https://developers.google.com/web/fundamentals/app-install-banners/. Hope it  helps. 

We think a paywall will be really good for Episodic InteractiveFiction Adventure Novels - like Beast! We love it! We installed and will be fans of other products! : )

Happy to test iFrame solutions, and build rapid prototypes. Because we probably all gain from the experience.

Also if it interests you @adventuron, we will try to experiment with PWA paywall, using itch.io serverside options on node:

https://itch.io/docs/api/serverside Which asks server, "has user paid for product?" Yes? Serve PWA. No? Serve Gallery. PWA-Itch.io Server, with episodic push updates? Sounds cool to us! : )

"Run Game Redirect" - to PWA URL is also good. As @adventuron suggests. We would like to know more.

Itch.io might be the first (and best) to offer such a thing. We'd like to use itch.io PWA to deliver reliable and fast episodic content. Perhaps similar to @adventuron -  we need a flexible paywall. One thing is clear, leading voices echo PWA is the future, and the big movers have already moved (awaiting Web App Manifest in iOS and [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) ) -  and is IN PROGRESS. At time of writing - "proof of purchase" is a missing piece.  Sorry for interrupting. Happy to help. : )

Best regards.

~afalcon

UPDATE: made it to the same place as @Adventuron.

https://netcinematics.itch.io/boxigon-free

1) Will followup options for PWA in iframe (above) and report back.

2) Server-side API implemented in node and like! Happy to open-source template when complete.

3) Still researching OAuth and manifest to get user_id.    

: )

UPDATE: it looks like (after auth and payment confirmation) all that is needed is a 304 redirect, instead of download. Hope that helps. We like Itch.io best.