Another followup to this thread is this article. I don’t totally agree with all said in the article but it brings up some interesting points around Catalyst, PWA’s and the dominance of cross platform web apps. Even though Hype is Mac only we are essentially creating cross platform stuff. Wonder where we finally land with Hype when PWA’s are support in the future. Maybe even a “wrapping” solution like Flotato… out of the box.
1 Like
Thanks for sharing these – fascinating stuff!
1 Like
For those who’re interested in learning more about PWAs, there’s an excellent example here:
https://www.pokedex.org - PWA example (works offline, can install to home screen)
https://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org (technical walkthrough)
For Hype users, who I’m guessing aren’t looking to build database-driven apps, just simple interactive ones, “PWA” seems to be mostly about two things:
- working offline (using ServiceWorkers)
- full screen experience like a native app (no browser address bar visible)
For my own projects, I’ve managed to get full screen working with the following code in a manifest.json file:
First add this to your page’s section
<link rel="manifest" href="manifest.json">
Create a text file titled manifest.json and paste in the following
{
"short_name": "My App",
"name": "My App's Full Name",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64",
"type": "image/png"
}
],
"start_url": "index.html",
"display": "fullscreen",
"orientation": "portrait"
}
Finally, there are libraries like Screenfull JS that give you cross-browser compatibility for full screen functionality. I believe it works on everything but iOS Safari.
3 Likes
@rafic20 Do you maybe have a working sample that I, and others interested in creating stand alone Hype creations can pull apart?
I’m really interested in this, (especially if it can work cross platform) but i just don’t seem to “get it”
. Maybe something I can “pull apart” provides me with that “eureka!”
moment.
1 Like
Some more ressources
https://app-manifest.firebaseapp.com/
And a nice read from a mailining list
https://ymedialabs.com/progressive-web-apps
Any time now 
:
2 Likes
Latest developments and updates around the topic. Hope Hype get’s onboard supporting this as much as possible! Even though it works best on androind for now…
If you take anything from the video … this is a great way to allow custom installs:
Disable default installer and capture event for later
Example to trigger installer
This is what iOS supports might look like…
3 Likes
New tutorial/guide. Hope Hype catches up on this… match made in heaven.
2 Likes
We have done PWAs recently, with Hype only content.
Works pretty good on desktop macOS, Windows, Linux. To be tested on iOS, Android tablets.
With Google Chrome as browser the ‘offline app’ can be installed. We are currently exploring how to do more clear install and update dialogues. It is a bit subtle with the small install button in the URL field of Chrome. (Also considering to be able to support more browsers.)
Follow this guide:
in a Terminal window:
npm install workbox-cli --global
Create a manifest, manifest.json example below.
{
"short_name": "MgWapp",
"name": "My great web app",
"icons": [
{
"src": "images/icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "images/icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"background_color": "#242424",
"theme_color": "#242424",
"display": "fullscreen",
"orientation": "landscape"
}
Get help create a manifest:
Create a config js file, simple example below.
module.exports = {
"globDirectory": "demo/",
"globPatterns": [
"**/*.{gif,js,html,svg,ttf,woff,woff2,eot,otf,png,mp4,PNG,jpg,json,css}"
],
"swDest": "demo/sw.js",
"maximumFileSizeToCacheInBytes": "20000000", //20MB
"skipWaiting": "true", //Force upgrade by activating updated SW on install. If false user must close all related tabs to upgrade.
"clientsClaim": "true", //'true' forces browser to start using SW immediately on successful registration/install. Only applicable for first registration (not for updates)
"mode": "production", //use "development" to inspecting and debug
"sourcemap": "false", //source maps for auto generated code is not very interesting
"inlineWorkboxRuntime": "true", //runtime size is negligible; generate service worker as a single file
"offlineGoogleAnalytics": "false" //we're not using google analytics
};
In the config, skipWaiting and clientsClaim is essential to understand. See links below.
The HTML-file for the app is a good place to register the service worker, example below:
// Check that service workers are supported
if ('serviceWorker' in navigator) {
// Use the window load event to keep the page load performant
window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js').then(function (registration) {
//console.log('Service Worker registered');
}).catch(function (err) {
console.log('Service Worker registration failed: ', err);
});
});
var refreshing;
navigator.serviceWorker.addEventListener('controllerchange',
function () {
if (refreshing) return; //avoid refresh loop (Can happen with "Update on refresh" in Chrome DevTools)
console.log("Service worker updated - Refreshing page...");
refreshing = true;
window.location.reload();
}
);
}
In the HTML, we have removed the get -parameters for the hype generated js code:
…hype_generated_script.js?86883…
?86883 removed.
Could perhaps be kept, take a look at the config options in this link:
https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.generateSW
In a Terminal window,
generate the service worker:
workbox generateSW workbox-config.js
In a Terminal window,
simple test on a local web server:
npx http-server
On macOS and Windows 10, the app will be installed in Applications. Windows get a shortcut on the desktop.
Custom icons has been added. The Hype project files are excluded from what the service worker generates.
Creds to my talented developer colleague Jon! His links on reading more on this:
4 Likes
Wow, four years. Perhaps I should have updated Wrapping. 
I've been thinking about PWAs again. As an experiment, I was working on converting "KEEN" to a PWA — but I was looking at it from the perspective of using Hype.
I think the Manifest and Service Worker should be on the root of the project, not in the Hype Resource folder. But, if I do that, then I can't keep the files in the Hype project.
Also, there's the list of images. KEEN doesn't have any, so that's easy to manage.
This is the tricky part, as it involves creating a service worker and setting all the resources to be cached offline. Although, it seems that a PWA can be way more powerful than just being an offline app.
Anyway, just bumping this conversation to the top. This is the kind of stuff Hype should do. I'm surprised that it didn't happen already. Wow… four years!
1 Like
Some notes for Hype…
Here's my sample "manifest.json" file…
{
"name": "KEEN",
"short_name": "KEEN",
"start_url": ".",
"scope": ".",
"description": "KEEN stands for Key Environment. It was built for web developers and everyone! Developers can use it to find “keyCode” data. Everyone can enjoy the “Font-Like” characters to spice up text messages.",
"lang": "en-US",
"dir": "auto",
"theme_color": "#000000",
"background_color": "#000000",
"display": "fullscreen",
"orientation": "landscape",
"display_override": [
"fullscreen"
],
"categories": [
"developer tools",
"utilities"
],
"icons": [
{
"src": "keen-icon.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
}
]
}
That's probably why this is tricky to do in Hype, as there are a lot of possibilities with the settings. I'm not even sure if they're all correct. Ideally, the PWA would open in Landscape. I'm still working on that part, as right now it's not working, mostly because I need to create a service worker. I'm trying to make something from scratch, without any third-party code.
I'm not sure of the difference between scope / start_url, but this is probably something Tumult would only need to do once. This goes back to the problem of having manifest.json / sw.js on the app's root.
So, let's go through the list on the ideal implementation of a PWA Manifest file in a Hype project…
- name — This is the longer name. That should probably be a document setting that is entered by the developer. Perhaps this pulls from the “HTML Page Title” field in the “Document section”
- short_name — This is the shorter name. Perhaps that's pulled from the Hype document.
-
start_url — I think this is just a dot, so it's relative… but I'm not sure. Perhaps it's
../index.html -
scope — I think this has something to do with external URLs, but I'm not sure.
https://docs.pwabuilder.com/#/builder/manifest?id=scope-string
- description — This could be a field in the Document, and it could be used to solve an SEO issue with Hype. If you run a Hype project through… https://pagespeed.web.dev …there's an error that says, "Document does not have a meta description".
-
lang — This should also be a Document setting, as there's an error in the Accessibility section. “
<html>element does not have a[lang]attribute”. So, I'm thinking that the Manifest could use this information too. - dir — I think this is the direction of the characters, so I set it to "auto". However "ltr" and "rtl" are also options. So, since Hype has an international audience, that might be something for Hype to handle too.
-
theme_color — Apparently, this has something to do with the way the title bar is displayed. I'm not sure. I haven't used Windows recently and my attempts to get PWAs to work in macOS hasn't been successful.
- background_color — This could be grabbed from the background color setting in the first scene in the document.
- display — I suppose this should be an option for the developer to pick, but I've been trying to get the PWAs to run in fullscreen.
- orientation — KEEN is an app designed for display in landscape.
- display_override — I'm not sure if this is redundant.
- categories — I put “developer tools” and “utilities”, but perhaps this is another document setting in Hype. There is an official list of categories, so maybe it's a multi select dropdown option. (I'm not sure that such a selector currently exists in Hype though.)
- Icon — This is a big issue. An icon is required. I just put the one… a 512x512 image …but apparently there can be many different sizes. (Perhaps SVG would simplify this.)
Screenshots are also possible. Perhaps that could use the "Poster Image".
Documentation on PWA Manifest…
- https://developer.mozilla.org/en-US/docs/Web/Manifest
- https://docs.pwabuilder.com/#/builder/manifest
- https://web.dev/learn/pwa/web-app-manifest/
Categories…
2 Likes
Thanks for the detailed writeup. You're absolutely correct that there's a lot of possibilities. There are some that could be implied, but even then may be incorrect. Even stuff like "lang" is actually quite difficult without an explicit set as a user's computer language may be different than their "work" language and it may be different than their "hype export" language. Realistically PWAs need their own specific setting page with unset values for most of these items. Thank you!
1 Like
Wow! Why isn't this a thing already?!
Using the Brave web browser (similar to Chrome), I could “Install KEEN”…
I think solved the pathing problem by setting scope and start_url to… ../ …which means the parent directory. A lot of the tutorials use a single dot, which means the current directory.
Side note — I tried to base64 the manifest, but that didn't seem to work. This way is much easier, as now the PWA files can stay in Hype's resource folder — a self-contained project.
I don't have a good enough service-worker.js file yet, as it's not caching the files, but I was able to get this far…
There it is! KEEN installed as an App on my Mac… no App review process, no Xcode, no notarization, no annual developer fee, skips ridiculous icon and screenshot requirements… although there is the possibility to specify numerous icons and screenshots.
The next problem to solve is improving the service worker, as the app doesn't work on reload. It doesn't cache the files. But once that problem is solved, I think that's all there is to do… it's a winner!
Once it's working, I can make a tutorial video and announce the first Photics PWA built with Hype.
I probably could script this too, as the main missing piece is a list of files to be cached… but that's probably possible with JXA. (Export the files, scan the exported files, generate manifest.json and service-worker.js dynamically, and then update the index.html file.)
So, I find myself where I was at four years ago.
Should I update Wrapping? 
…that depends on my "Lemon Squeezy" test and the next major version of Hype. Surely PWA support is coming soon, right?! 
1 Like
Some more notes — I made some progress with the Service Worker part, as I was able to relaunch the App and get it to work. However, it wasn't actually caching. (Also, it wasn't displaying KEEN in Landscape… disappointing!)
Also, I think root is the proper location for the PWA files, as I read this… ServiceWorkerContainer: register() method - Web APIs | MDN
Alternatively, if this code were included in a page at
example.com/product/description.html, with the JavaScript file residing atexample.com/product/sw.js, then the service worker would only apply to resources underexample.com/product.
…so, it seems that putting the Service Worker in the hype.resources directory might limit things, especially since index.html is one level up.
1 Like
New WebKit article…
Here's another…
…and apparently KEEN might still be useful. I mentioned the app (and showed Hype in action) in this video…
It reminded me that I did learn something. Apparently, there's the option in a PWA to specify the orientation of the app. This is something I was struggling with, but I eventually found the problem — it's not supported.
That, and all the nasty WebKit bugs shown today… About the security content of macOS Ventura 13.5 - Apple Support …I've been wondering about the future of Safari.
2 Likes