Progressive web app(PWA) vs Electron vs Browser extension

Question

The background for this question is that I've been working on what I'd call a tool in which a user can build modules that they can later run. It started out as a small web page and has grown over the last year into something that more closely resembles a desktop application; but, at this point, is still just a set of html, css, and js files.

I considered using something like electron to package it as an installable desktop application, but I didn't like that approach and thought it better to stick to something like a progressive web app because everything is done off-line.

Because I wanted to access APIs that are available only to web extensions, I've been reading a bit on MDN web docs about them and that has led me to wonder and become confused about the differences between a PWA and a browser extension that uses the extension pages to run its own pages/program, as opposed to altering how other web pages are viewed and used in the browser, etcetera?

If one wants their app to work off-line and behave like a desktop app, what is the downside to making it a browser extension? I came across more information on PWAs than on browser extensions, giving the impression that an extension shouldn't be used in this manner.

It appears that the upside includes access to more APIs, it installs into the browser with its own icon, and the window of the extension pages can be altered such that it doesn't appear to be running inside a browser.

I'm new to stackoverflow and have noticed that questions are sometimes closed because they are viewed as debatable or seeking opinions rather than facts. So, to be more specific, could you please help me to understand the pros and cons of each, and/or the decision points that should be considered in choosing an approach? Thank you.

Response to Answer/Comments

I appreciate you taking time to respond to my question. Expanding the question to include electron is something I wanted to avoid and mentioned it in my question only for the purpose of stating I've already reviewed it extensively and don't want to start another discussion about it. My question is about PWAs and browser extensions only.

The question also doesn't have much to do with the particulars of my application. It can already exist as a PWA. The question is if an app can already exist as a PWA what would be 'bad' about making it a browser extension or reasons for not doing so. Access to more APIs than are available to PWAs and being installed into the browser giving it a 'home' appear to make an extension, for lack of a better term, a superior environment than that of a PWA.

The description on MDN web docs of what a browser extension is includes stand-alone games but seems to encourage games that are integrated into the browsing experience--whatever that may be. I'm not building a game but wanted to know what would be wrong with an extension that is a stand-alone tool.

One commentor seems to feel that although it could be done, it ought not to be done because extensions were made for enhancing the browsing experience only. That may be the correct view. But, on the other hand, I sort of like the idea of having an icon inside the browser that opens my app in a window without a browser menu (like running a site full screen) and gives me access to the downloads API. That would give the users of my app a better experience.

But there may be other reasons to not do so, in addition to the fact that this is not what extensions were made to do nor how they have been used historically. Would it be violating a rule, setting myself up for failure later, etcetera? Or, is it simply finding another use for an existing functionality.

I'm not trying to be rude if it sounds that way, but just wanted to better clarify my question. Thank you.

Answer 1

Browser extension - These are essentially used to extend and enhance the users browsing experience. Think of a Adblocker. Its not useful by itself. But helps blocking adds when you visit other sites. A screenshot extension to take screenshots. A Dark theme extension to flip colors in any page you visit.

PWA - PWA apps will replace chrome apps. PWA can be installed to desktop in all major desktop OS and mobile OS. It can work offline. What it can do in terms of hardware access depends on the users browser version.. same can be checked here. All limitations of a web app will still remain.

Electron - Its a web app wrapped with a native layer(kind of!). This can also work offline.. infact, its offline first as all HTML/CSS/JS components are pocked in Electron, it can also access APIs and do all that a PWA can do functionally. Electron will differ from PWA mainly in terms of how its build, distributed and deployed. Atom editor, Visual Code editor, Slack are some of famous tools built using HTML/CSS/JS and packed using Electron.

PWA capabilities on users machine are determined by the users browser version, while Electron app will have its own run-time packed along with it. So no dependency on user machine. Thats probably the key thing you want to consider while deciding which one to choose.

You need to be more specific on what you are trying to achieve/do in your app. All you have mentioned is "a tool in which a user can build modules that they can later run". That doesn't give any insight at all.