NeverDecaf / discord-PWA

A wrapper for the Discord web client as a PWA, made for Chromium browsers on desktop.
MIT License
145 stars 13 forks source link

Allow install of pwa directly from official discord website #32

Open NonstickAtom785 opened 3 years ago

NonstickAtom785 commented 3 years ago

Since you're already using an extension to inject js and css why can't we just use injection on the official discord website as well to make a one time PWA installation?

NeverDecaf commented 3 years ago

Disclaimer: I'm not an expert on this topic; I learned all I know about PWAs solely to make this app, so this may be inaccurate: PWAs require a manifest.json and a service worker (javascript file) which must be hosted on the same domain as the "website" version of the PWA (more accurately, the url of these files must be relative to the site you are installing from). A PWA won't be installable without a valid same-site manifest.json, and that's a good thing because if something like this were possible it would be far to easy to spoof, for example, a bank website's PWA to install your own instead.

NonstickAtom785 commented 3 years ago

Ah but I believe chromium(and other methods still check for it). Have you ever tried using chromium edge to install discord as a pwa? It works flawlessly. Same with Vivaldi. They both allow you to install any site as a pwa. Which means that it's not a security threat?

I just got back to my pc it's almost midnight but I'll see if I can find anything else on this matter. But I believe this still might be possible.

EDIT: There is also this thing that I looked at... Link

There is also the fact that you can't really change anything on the server side of a bank website even if you installed it as a pwa and modified it to your will. You can only do the things that you do in the browser in the pwa.

NeverDecaf commented 3 years ago

I'm not sure I understand what you mean by install any site as PWA, this must be a browser specific feature that is creating a pseudo-PWA from any website. Are you perhaps talking about this "install site as an app" feature? This might behave similarly to a native PWA but it is not the same thing, in order to have a "true" PWA discord.com would need to host the aforementioned manifest and service worker, which they do not, which is why this PWA was created in the first place. If a site supports PWA natively you should see this: image

As for the bank analogy, I'm not talking about what you can do from inside the PWA after installing it. Imagine if you went to yourbank.com and clicked Install app but your browser instead installed a PWA from yourbank.scamsite.com, this would be a very sneaky phishing scam and an obvious security issue. That's essentially what I would have to do to make this installable from discord.com, which is why I believe it isn't possible. PWAs should enforce a strict same-origin policy for security reasons.

Also, after re-reading your original question I have to ask: what do you mean by "one time" installation? discord-PWA, like any PWA, is already a one-time installation.

NonstickAtom785 commented 3 years ago

I'm sorry for my very poor communication skills. I've been quite busy and just want to contribute to this project.

So far I figured out that you can install another form of a pwa directly from chrome but it's fake and it's just a shortcut. It's not a true pwa. I haven't looked into how it's created but maybe I can modify it to support a different title bar color because as far as I can tell it doesn't use the installed chromium themes(Screenshots below).

As for your question on a "one-time" installation, I think better wording would just be to remove that from my statement 😂. I just graduated yesterday and I rushed the request so I didn't have time to think of any better words.

I would ask though, how is your pwa redirecting to discord? And is there a way to make it so that the address of the pwa's manifest points to discord instead? Or is this pwa built from your very own hands? (Ah nevermind, I just remembered that you said you used another site + betterdiscord as reference.)

I'm going to go do more research on this. By the way do you have Discord? And if you do then could you send me a friend request? It's more easier for me to talk to there because I'm mostly on my phone during the day. My id is K!#8205. I'll remove it in 24hrs, possibly sooner if you get it quicker or if you don't want to. Thanks in advanced.`

Edit: Forgot the Screenshots... Here they are.

Theme Color of Chromium: image

Theme Color of Shortcut added("installed") with Chromium: image

I also used Stylish to theme my normal discord website. image

This is all on Chromium OS for Raspberry Pi.

NeverDecaf commented 3 years ago

Sure I can add you, but I'll warn you my response time on Discord won't be much faster than here. As for how this PWA works, its all just one big hack to make it resemble a native PWA. Normally if you try to redirect the user to a page from a different origin, they will see a big address bar above the PWA like this: image source The trick I've used to get around this is to not redirect to discord.com, instead this PWA opens discord.com in an iframe. Normally this isn't allowed, which is why the extension is required to use this PWA; the extension removes the X-Frame-Options header from discord.com's reponse headers.

As for this install-as-PWA option, I didn't know this existed until I saw your previous comment. I'm not sure how this works on Chrome OS but one advantage (I assume) that discord-PWA has is that it enables taskbar notifications, specifically highlight and displaying a message count via the badge.

NeverDecaf commented 3 years ago

After some investigaton it looks like the "shortcut PWA" (PWA created by chromium's "Create Shortcut" option) may provide an alternative to discord-PWA, with some caveats:

  1. display_mode seems fixed to minimal_ui (discord-PWA uses standalone), which means browser navigation buttons in the title bar
  2. To add to the above point, the entire PWA manifest is not editable, so things like background_color cannot be set. Similarly display_override cannot be set so the WCO additions in #4 won't be possible
  3. drawAttention (highlight in taskbar) works with the extension installed but displaying the number in a badge does not
  4. Injection of custom CSS and JS by the extension doesn't currently work because the headers are not properly modified in the shortcut PWA, this includes the small amount of css used to mimic the desktop client's UI

3 and 4 may be fixable by modifying the extension. I fiddled with 4 for a minute but wasn't able to get header modification working in the shortcut PWA.

NonstickAtom785 commented 3 years ago

Well I am using custom css in the shortcut pwa. But with another extension called Stylish. I just imported my own custom css and it worked magic.

AkazaRenn commented 1 year ago

Not sure if you still need the info, what you have gotten was more like "open this page in a new window with its own icon" instead of an actual PWA, due to the lack of a manifest. It's serviceable for sure, and I'm using that right now as well. I still hope it can happen with a manifest so I don't have to click all my notifications before installation.