Add proper PWA support (enable PWA installation)

[Sergio0694]

Hello, congrats for the project, it's incredibly well done and I've been using it for months, it has become an incredibly valuable tool for me and I appreciate your hard work on it! 😄

I was wondering if it'd be possible to make sharplab.io a proper PWA, so that it could be installed on devices that support the feature (eg. Android devices). Right now trying to add sharplab.io to the home page results in a simple shortcut being added to the home page, and clicking on it simply opens the website in a browser tab. This is the expected behavior for websites that don't properly support the minimum PWA specifications, otherwise the website should be opened in a standalone window (eg. like Twitter on mobile). I've tried both with Chrome and Edge Chromium, same result.

I've run a test on the website using Lighthouse and got this report:

Here's the checklists guide from Google on PWAs.
Looks like simply adding a manifest should fix most of the issues and hopefully that'll be enough to have the app open in a standalone window.

Thanks again for your hard work!

[ashmind]

Thanks for the feedback and the idea! This makes sense -- I'll take a look. I always thought it would be separate app by default, but I think last time I tested it was before the manifest standard existed, so no surprise the behavior is different.

@jsk95 let me know if you want to take a look.

[ashmind]

@jsk95 Pls let me know if you still want to finish this or if I should take it.

[Sergio0694]

Hey @ashmind - glad to hear you're still looking into this issue!

I've had the chance to use sharplab.io quite a bit on mobile during the last few weeks, and I gathered more feedbacks to share on that front! Opened two issues for that:

• Glitchy text editor (Text editor extremely glitchy on mobile (Android) #476)
• Inconsistent/too large text size (Adjust the text size on mobile (like GitHub) #477)

Hope this helps! 😊

[ashmind]

OK this should work now. The icon might be a bit cropped, but that would be a separate issue.
@jsk95 thanks for your help with this!

[ashmind]

Note that I opted for minimal-ui which show a browser bar on top, as that's the only way to get a shareable link for your code. Later I might add a mobile button for that -- then I would be able to further slim down browser UI.