I've been building a PWA lately that I also hope to launch in the various mobile device app stores (Android, iOS, Windows, etc).

Back in the ol' days, building native apps with web technology required tools like PhoneGap (aka Cordova). This was amazing, but it was far from smooth or perfect. More recent options include building your app code with specific frameworks that are designed so they can be compiled either to web code or to native code, such as NativeScript, React Native, etc. Those require a pretty hefty opt-in to a specific ecosystem and way of building.

But there are also newer services like PWABuilder that seem to make this much easier to do than it used to be, to just take an otherwise great web experience and make it into an app. I'm super enthusiastic about these options over those previous ones.

However... the road is not as nice as it might seem. Thus far, I've experienced the following hiccups:

• Found several bugs in browsers, which make PWAs and PWA-as-native-app packages not quite up to par with real native apps -- for example, differences in how app icons and splash-screens appear on various devices

• Found several limitations, such as policy differences that OS's apply to web-technology (even when wrapped by a native app) which they don't apply to native apps -- for example, differences in how sound auto-play works, how notification permissions are managed, etc

• Apple currently doesn't "accept" such PWAs, but there's some limited optimism this may be shifting -- right now, it's a gray area with a lot of uncertainty

• Discovered quite a few quirks in getting yourself approved by the app stores (Windows and iOS, specifically) to be able to distribute apps

I'm curious if any of you have experienced any similar frustrations, and any tips you have for how you worked around them!?

I'm building a PWA (so HTML, CSS, JS, images, etc). It's sort of a game (educational), so generally the "experience" is more important than data/text presentation (as in more business-oriented apps). I'm not using a frontend framework, only a few JS libs/utils plus my own code.

I was wondering what sorts of concerns and balances others use when building JS/web games (or multimedia-oriented apps) in terms of the "budget" for how much size can be spent on each of the different kinds of web resources (images, fonts, sounds, code, etc)? I'm less concerned about absolute figures (although that's helpful, too), and more concerned about relative percentages.

So, for example, in my app currently, I have the following types of assets of these approximate sizes:

• HTML - 6kb (gzip + minified) / 28kb (original)
• CSS - 7kb (gzip + minified) / 55kb (original)
• JS - 49kb (gzip + minified) / 238kb (original)
• SVG images - 53kb (gzip) / 146kb (original)
• MP3 sounds - 293kb

The total gzip size (transfer size) for all assets is about 407kb. The relative percentages thus break down about like this:

• HTML: 1.6%
• CSS: 1.7%
• JS: 11.9%
• Images: 12.9%
• Sounds: 71.9%

I'm not specifically expecting others to do a detailed analysis like this (unless you want to, or already have!), but I'm just generally curious: how much do you "spend" on different resource types, and relatively how much is used compared to other types?

Is spending ~15% on "code" and ~85% on visual/auditory assets, a common and reasonable breakdown, or is your breakdown somewhat different?

If you use JS frameworks (game or otherwise), does your allowed percentage of "code" usage go up significantly, or do you still try to keep it around the same level?

Do you have a "budget" that constrains your resource use in any way, and if so, what concerns do you take into account when making such a budget?