Progressive Web Application (PWA)


#1

Firefox 58 just added support for PWAs for Android:
https://hacks.mozilla.org/2018/01/firefox-58-the-quantum-era-continues/

See them in action here:

Here some more (developer) information about how they work:

https://developers.google.com/web/progressive-web-apps/

This already works with a lot of websites like Twitter or Facebook. Now, why not make Discourse compatible, too? That would close the gap of a missing (real/native*) Android app.
But it feels like a native app, and just works with the web version, without much changes.

* As Discourse’ Android app is also just a webkit wrapper.


(Rafael dos Santos Silva) #2

Discourse is already compatible:

Only thing we are missing is offline browsing, and that’s a huge amount of work.


#3

Okay, great, But in Firefox it does not work on your site https://meta.discourse.org/ here. Although Firefox actually has lower requirements for that homescreen button to appear (it’s a button, not a banner there).

It works in Chromium though, so what do you do differently here?


(Rafael dos Santos Silva) #4

Our manifest is right here: https://meta.discourse.org/manifest.json

No idea why Firefox can’t parse it.

Only thing that jumps to me that we call it manifest.json instead of manifest.webmanifest, but I guess it should pick whatever is declared with <link rel="manifest" href="/file.extension">.

EDIT: Looks like the extension really changed!

https://w3c.github.io/manifest/#x14-1-media-type-registration

Gotta fix the extension and the mime-type.


(Rafael dos Santos Silva) #5

Hey @rugk,

I did a cleanup in all things webmanifest and took the time to update our implementation to the letter of the spec.

It’s working on Firefox now.

This also unlocks rotation @codinghorror.


#6

Wasn’t this the Discourse philosophy all along? No accident the mobile view in particular is engineered the way it is …


(Ralf Stockmann) #7

Is there any chance to see this happening on iOS, too? Safari does support PWA if you pin the website to the homescreen…


(Rafael dos Santos Silva) #8

What is “this” that you mention? You can add Discourse to the homescreen on Safari just fine.


(Ralf Stockmann) #9

Yes, I can add the website to the homescreen. But as of now, it doesn’t behave like a PWA - it’s not fullscreen. See the difference:

At the top and the buttom lots of space is wasted by Safari-GUI - which is not the case with a proper PWA App like Mastodon, wich runs “fullscreen”.

I guess this meta-tag is missing to achieve this:

<meta name="apple-mobile-web-app-capable" content="yes">

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html


(Rafael dos Santos Silva) #10

It used to be full screen, but I changed it a few weeks ago because people asked here: Back button in Responsive app


(Ralf Stockmann) #11

Yes, this is a problem. I just added the tag in one of my forums, and it worked - but the missing back-button is indeed a downer.
Maybe one could offer an (optional) additional back-button in the menu bar, left from the search and burger-icons?


(Rafael dos Santos Silva) #12

We just gave up on the Apple current PWA implementation and detect iOS devices and remove the full screen aspect. This was inspired by the Starbucks PWA that did the same:

If you want to propose (mockup, code, etc) a back button for the iOS PWA experience, please open a topic about it.


(Ralf Stockmann) #14

I see. Thanks for clarification.


(Stephen) #17

Swipe to go back has been a thing in Safari for the longest time. Is it disabled in PWAs or something?


(Kane York) #18

Swipe to go back isn’t accessible or discoverable, especially when the platform standard is to either have a “back” button in the upper-left corner or not at all.


(Ralf Stockmann) #19

When? Where?I can’t recall a website that supports this…


(Jeff Atwood) #20

It is a built in mobile safari feature, I use it all the time.


(Ralf Stockmann) #21

Heavens. It works! You have to catch the outermost left side - in a “regular” iOS App you may grab anywhere on the screen to swipe.
Anyway: this seems to be disabled in PWA fullscreen mode:

https://forums.developer.apple.com/thread/99579

dammit.


(Jeff Atwood) #22

image