Make GDBrowser installable

[101arrowz]

Thanks for the shoutout in your video on GDBrowser! ❤️

I haven't been working on this lately because I was doing some other projects.

I still have the copy of the flexbox version of GDBrowser, and I highly, highly suggest you reopen and merge the PR... muh mobile support

Onto the actual content of the issue:

Modern browsers support installation of websites as applications on any device: be that a mobile phone (running Android or iOS), a Mac, a Windows machine, etc.

This uses a technology called the Service Worker, which saves all the files for offline use.

Here's an example. If you're using a modern version of chrome, you should see an "Install" button at the right side of the URL bar. You can install it, and it creates a shortcut on your desktop/home screen. When you open it, it doesn't open in Chrome, it opens in a separate window (which is actually just Chrome but it looks like a real, native app!)

I can make a PR for this if you want. The point is less the offline support and more the "ooh it's an app!" factor.

Oh yeah, and also I can make your servers able to handle a LOT more users, but you'll have to do some things you may not like, which I can elaborate on if you want later.

This idea goes hand in hand with mobile support. I know I'm being annoying but PLEASE consider asking your viewers to try the not-exactly-the-same-as-GD version and asking them if they mind or not. 42% of your users are not on desktop!

[GDColon]

Honestly, I'm not so sure about the app thing. The whole point of GDBrowser is that.. it's a website. You might as well open the app called Geometry Dash and look at everything through there. As for mobile support, I'm mean and picky and want the page looking exactly like GD. Sorry lol.

[101arrowz]

My point is that a lot of people don't/can't have GD officially installed on their computers (e.g. school issued machine). If they just want to browse, they can use the website. If they want a shortcut to it, they can use the installable functionality I mentioned, which is delegated by the browser itself and therefore bypasses any restrictions set in place. More than that, adding this functionality gives it a separate window from the rest of the tabs, which just looks cool and sets it apart.

Alright, I'll stop annoying you with the mobile support stuff. If you ever reconsider, I have the fork saved on my computer.

Also, since you didn't reply to my "fix server lol" plan, I'll tell you that you can serve your static assets with NGINX, which is much faster than with express. It should increase max concurrent users by over 5x for the website itself. Only serve the API with Node.js. If you need help doing this, ask and I'll DM you on discord.

[0x1DEA]

Hi there! I'm gonna offer some clarification on this. Although it seems counter-intuitive, making the site into a Progressing Web App (Or PWA) can have numerous advantages. The most notable is the fact that the site can be saved to be kind of like an application on mobile. Another one is that you can cache heavy UI elements such as your images so that they don't need to be loaded every time the page is loaded at the start of a session or when switching pages. You aren't interested at this at the current moment but this type of site is something I have actually made before. I only just recently found out about it today. Mobile support is something that really should not be neglected. The current system is not very ideal. Although you want it to match the game as closely as possible, this degrades user experience by requiring a phone turn. If you have any other questions I'd be happy to answer them.

[GDColon]

Interesting. I think my biggest problem with it is that I just don't want to have to put so much extra work every time I make a new page for the site (a desktop version AND a mobile version). Proper mobile support is something I really want to get done, but I guess I just want to do it.. right. (especially without changing the current design of the site that I'm really happy with)

[0x1DEA]

Nobody said that. Responsive Design means that it works on both mobile AND desktop simultaneously so you don't need to make separate pages, you just need to design one page carefully with CSS media queries so that one page works on both desktop and mobile.

[GDColon]

I see. One thing that interests me about GD is that if you use hacks (such as Absolute's Mega Hack) to freely resize the window, the game scales it's UI extremely well. Perhaps it's possible to recreate that in HTML?

[101arrowz]

@SeeBeyondDev See my fork of GDBrowser (also PR #29). I redid everything with flexbox and viewport sizing. Cologne rejected it because it didn't look the same as the original, but maybe you can fix it and make it look better? Most of the framework is already in place, it's just CSS tweaking at this point.

Also, I don't have GD on steam so I have no reference point for this entire process of mobile-ification. So @GDColon if you could show a screenshot/video of what you mean (i.e. how it scales) then I'll see what I can do.

Adding on to the PWA stuff, we should consider consolidating all the HTML into one file, putting each page in its own <section> tag and hiding/showing when you navigate to a page, as well as using the history API to detect page changes. I've already suggested this, though.

[GDColon]

Here's an imgur album showing how GD handles window resizing (most likely made for widescreen monitors/devices). It's not perfect but it usually does things pretty well.

https://imgur.com/a/g31FMpd

(also, you might want to avoid making any PRs until the next commit, I have some HUGE changes incoming)

[101arrowz]

Bruh. You could have told me you wanted it to stay in the same aspect ratio! That's what the mod's doing! It stays at the same aspect ratio, and blank space fills the gaps.

That's exactly what I was trying to avoid with my PR lmao, I wanted it to be responsive. That UI is "responsive" but it's cheating in my eyes because it doesn't fill up the screen; as an ultrawide monitor user, it annoys me to see the extra space unused. I can convert GDBrowser to do that really, really REALLY easily compared to the PR I made before.

I'm kidding, this isn't your fault at all, just a misunderstanding between your ideas and mine.

Only question is; mobile users won't even be able to read the text if we make it that small though, will they? Don't we need fill in the vertical direction?

Also, I won't make any PRs until your next commit, thanks for the heads up.

[0x1DEA]

I get you want the UI to be as close as GD as possible but this is assuming that the UI for GD is perfectly designed. There is a major difference between an application and responsive website. I'd also like to argue that this case you are presenting involves unintended resizing of the game window. Ways rob did not intend. Yes, they are somewhat dynamic, but only to an extent that they can be used on most normally sized screens. Websites are different. People will often set them to weird sizes and imagine if they are multitasking and have the window at half width. At this point it's important to choose what you value more, accuracy to the game's layout, or a layout that is dynamic, and easier to use no matter which way it is oriented. Functionality and usability should not be negatively impacted for aesthetic accuracy.

[GDColon]

Sorry if this makes you cringe but to me, it's very important to keep the site as true to GD's layout as possible. It's a big priority to me, and worth sacrificing vertical-phone users' experience. If there's a way to tackle both issues with one stone, I'd be the happiest man in the world. But that's a bit unrealistic...

[0x1DEA]

Well actually, could you clarify? Would you be open for a layout change on the portrait mode? I'm not saying to change the layout as it currently is, but have it change only for mobile users. Or are you also opposed to that? Even if you were, (getting back on topic) would you accept a GD Browser PWA PR under the condition it preserved the existing layout? My fault for taking this off topic with suggesting a layout change on mobile.

[GDColon]

Ideal results

• Page looks as close to GD as possible
• Page can handle vertical and extra wide orientation without overlap/overflow
• Page does not require different html/css for alternate (i.e. mobile) versions
• HTML is easy to understand in case new pages are made

[101arrowz]

@SeeBeyondDev how would you implement something like that? And Colon, if you ONLY want one CSS ruleset you have to do something like what I did in #29. You also have yet to specify what's wrong with that PR. It looks preeeeeetty damn similar to the real game to me. SeeBeyondDev, if you plan to work on a layout that would satisfy Cologne the Boomer®, then my fork might be a decent starting point.

Yeah, as we were saying, a PWA PR would be a solid idea for saving page load speed, making it look more native. It's the main idea of this issue, not all this layout stuff.

[0x1DEA]

Actually I am going to hold off on this issue for a later date because an idea occurred to me that would help development and it would be easier to implement these features after the change has been made. Once I have made my case for this then I'll update this. Basically you use service workers to cache and route content.

[101arrowz]

@SeeBeyondDev could you elaborate? I know how SWs work, but how would they help the layout stuff? Also I'm heading out, might work on this later if we have an action plan.

[0x1DEA]

They won't. The talk about layout popped up because I said Colon wouldn't need to make two different versions for mobile and desktop and could instead to a responsive design that adapted to both screens. I got off topic and they didn't have anything to do with service workers or it's technology at all and that's my fault. I just brought it up because if we wanted the website to be installable, it would most be convenient for mobile to have a interface that is easy to use. That is neither here nor there.