# Discourse as a Progressive Web App

**URL:** https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265
**Category:** Feature
**Created:** [July 14, 2016, 12:40am UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265 "2016-07-14T00:40:59Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![barryvan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/barryvan/32/82635_2.png) [@barryvan](https://meta.discourse.org/u/barryvan)
#### Post date: [July 14, 2016, 12:40am UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/1 "2016-07-14T00:40:59Z")

</div>

### Current functionality

Discourse works beautifully when you pin it your homescreen on an Android device from Chrome (or Firefox) – but this isn’t particularly discoverable out of the box. Is it worth thinking about advertising the fact that they can tap on the menu in Chrome/Firefox and add it to their homescreen? Then it’ll look and feel like a native app, without having any of the normal browser UI, like an address bar etc.

### Future functionality: PWA

@codinghorror Would it perhaps be worthwhile jumping through the necessary hoops to get browsers to recognise Discourse instances as Progressive Web Apps? According to [Yet another blog about the state and future of Progressive Web App - The blog of Ada Rose Cannon](https://ada.is/blog/2016/06/01/yet-another-progressive-webapp-post/), this means

> - has a service worker (requires https)

HTTPS will be out of the box for (I assume) most paying customers, and can be set up by those running their own instances.

> - has a web app manifest (with at least minimal config)

Looks like Discourse already does this.

> - it is the second distinct visit to the web site.

This will happen organically – although I note that Opera has been experimenting with providing users with an explicit indicator from the first visit, so this may become unnecessary.

#### Hacking in a service worker

It looks as though the only piece that is missing for this is a service worker. The good news, of course, is that there’s no requirement the service worker actually _do_ anything! This means that is should be possible to “hack this in” by

1. Adding a stub JS file, called, say, `sw.js`, to the root of the domain
2. Popping the following snippet in the `<head>`:

```plaintext
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js').then(registration => {
      console.log('ServiceWorker registered in scope ', registration.scope)
    }).catch(error => {
      console.warn('Failed to register ServiceWorker', error);
    });
  }
</script>

```

(Of course, it may be necessary to “un-es6” this – but I think you can safely assume that any browser which supports service worker supports fat arrows and the global `console` object!)

#### Making the ServiceWorker do useful work

First prize would, naturally, be to have the service worker do some useful work. I’m not familiar with Ember, but it looks like [GitHub - DockYard/ember-service-worker: A pluggable approach to Service Workers for Ember.js · GitHub](https://github.com/DockYard/ember-service-worker) could provide a pluggable service worker engine upon which useful functionality could be built.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [July 14, 2016, 1:54am UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/2 "2016-07-14T01:54:03Z")

</div>

You mean this?

> [@Add to homescreen banner on Android](https://meta.discourse.org/t/add-to-homescreen-banner-on-android/42973):
>
> Continuing the discussion from [Fully support Android Chrome's "Add to Homescreen"](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/28): If any of you guys visited meta on the last days with an Android Phone (using the default Chrome Browser) you may have seen this: This is Google App Banner feature, and it’s live on latest Discourse. Clicking Add to Home Screen will create a shortcut on your phone home screen, using your forum name and icon, that when clicked will show a splash screen like this: The background color is the …

---

<div class="post-metadata">

### Author: ![barryvan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/barryvan/32/82635_2.png) [@barryvan](https://meta.discourse.org/u/barryvan)
#### Post date: [July 14, 2016, 1:56am UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/3 "2016-07-14T01:56:57Z")

</div>

@Falco That’s really nice, yes. But now let’s go further! Once it’s added to the homescreen, let’s make it work offline (with a ServiceWorker). 😃

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [July 14, 2016, 2:01am UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/4 "2016-07-14T02:01:54Z")

</div>

That is what the push notifications plugin, currently in alpha, does. So you are proposing all stuff that … already exists?

---

<div class="post-metadata">

### Author: ![barryvan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/barryvan/32/82635_2.png) [@barryvan](https://meta.discourse.org/u/barryvan)
#### Post date: [July 14, 2016, 3:05am UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/5 "2016-07-14T03:05:06Z")

</div>

@codinghorror Possibly – I wasn’t aware that the push notifications plugin also gave offline capabilities..? That is to say, can I be set my phone to aeroplane mode and still launch the app, read (some) topics (maybe not post), and have my activities synchronised back up when I re-establish connectivity?

---

<div class="post-metadata">

### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [July 14, 2016, 4:03am UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/6 "2016-07-14T04:03:50Z")

</div>

Service workers don’t allow you to connect offline (aeroplane mode), but allow network activity to happen (such as push notifications) even when you don’t have a tab open.

I don’t think there are currently any plans to have content available offline.

---

<div class="post-metadata">

### Author: ![barryvan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/barryvan/32/82635_2.png) [@barryvan](https://meta.discourse.org/u/barryvan)
#### Post date: [July 14, 2016, 4:23am UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/7 "2016-07-14T04:23:12Z")

</div>

@awole20 Understood that Service Workers won’t transcend connectivity. 🙂 They allow you to effectively act as a proxy server between the web application itself and the network, caching and managing requests. It’d be pretty sweet if Discourse were semi-available offline – letting you read (or re-read) cached topics and so on. That is, I guess, the final end-point in this topic.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [July 14, 2016, 10:06am UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/8 "2016-07-14T10:06:11Z")

</div>

Yes, offline support is something both @eviltrout and myself want to get to. It is not slotted for any release yet, I imagine we will get to it some time before 2.0.

---

<div class="post-metadata">

### Author: ![Tom\_Newsom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tom_newsom/32/115981_2.png) [@Tom\_Newsom](https://meta.discourse.org/u/Tom_Newsom)
#### Post date: [July 14, 2016, 10:22am UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/9 "2016-07-14T10:22:38Z")

</div>

> [@sam](#):
>
> 2.0

1.10? 😉

post must be at least 20 characters

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [July 14, 2016, 3:08pm UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/10 "2016-07-14T15:08:56Z")

</div>

Definitely! Thing is, it’s not even hard to get the basics working due to the way the app is all JS.

The main annoyance is that AppCache is much better supported than ServiceWorkers. AppCache is “deprecated” but it’s the only option on iOS.

---

<div class="post-metadata">

### Author: ![barryvan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/barryvan/32/82635_2.png) [@barryvan](https://meta.discourse.org/u/barryvan)
#### Post date: [July 15, 2016, 12:38am UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/11 "2016-07-15T00:38:43Z")

</div>

Yeah, but it’s not as though iOS is widely-used or anything. 😛

I’m not sure that AppCache and ServiceWorkers are really comparable, to be honest; they solve quite different problems. AppCache is about providing developers with a really powerful, hard-to-use-safely footgun – things haven’t really moved on since [this 2012 article](http://alistapart.com/article/application-cache-is-a-douchebag) to that effect. I’m actually not sure how AppCache could be used to provide reasonable offline capabilities in a Discourse instance…

ServiceWorkers, by contrast, are a way of controlling the interaction between your app and the network in a fine-grained and completely arbitrary way.

My thinking, then, would be to build for the future – ServiceWorkers – and hope that Apple eventually works to make them available in iOS Safari (notwithstanding the fact that they would allow web apps to compete with the app store, and thus go against Apple’s financial interests). This would bring benefits to all users of Chrome, Firefox, and Edge, regardless of device. I’m not sure what the stats are like around the world, but that would bring decent capabilities to 60-75% of our customers.

And Progressive Web Apps are all about Progressive Enhancement, after all. 🙂

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [July 15, 2016, 2:57pm UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/12 "2016-07-15T14:57:02Z")

</div>

AppCache has a lot of problems, but it absolutely could be used to provide offline access. I’ve seen quite a few examples of Ember apps doing this. You just have to work around the awkwardness.

Service Worker is a non starter on iOS which is a sizeable portion of mobile users.

So it’s the question of the poor API that’s “deprecated” or the one that isn’t fully supported yet.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [July 15, 2016, 3:04pm UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/13 "2016-07-15T15:04:15Z")

</div>

> [@eviltrout](#):
>
> So it’s the question of the poor API that’s “deprecated” or the one that isn’t fully supported yet.

Service Worker will give 60% ~ 90% market share, and occasionally 100%.

Service Workers are [under consideration](https://webkit.org/status/) on Safari and on the [5 year plan](https://trac.webkit.org/wiki/FiveYearPlanFall2015).

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [July 15, 2016, 3:06pm UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/14 "2016-07-15T15:06:08Z")

</div>

And AppCache works on 100% of devices today 🙂

Look don’t mistake this for a decision I’ve made, I’m just saying there’s a reason why most people I know who are serious about offline are using AppCache right now.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [July 15, 2016, 3:13pm UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/15 "2016-07-15T15:13:17Z")

</div>

Can you give me some examples of website with AppCache? This is something new, that I need to study.

Using Service Workers I really like the implementation of Telegram Web. It’s very fast, and ask for updates.

Twitter new mobile webapp also uses Service Workers, but it’s kinda buggy with flaky connections.

---

<div class="post-metadata">

### Author: ![fefrei](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fefrei/32/119538_2.png) [@fefrei](https://meta.discourse.org/u/fefrei)
#### Post date: [July 16, 2016, 7:55am UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/16 "2016-07-16T07:55:45Z")

</div>

One huge drawback of AppCache is that it’s caching exactly one block of data. This must obviously contain the Discourse “App”, and shouldn’t contain _all_ posts (of course), so the actual data (the posts to be cached) has to be put into something like localStorage, which seems to be often limited to 5 MB.

(I have some experience with AppCache as I have built [one webapp](https://pseuco.com/#/landing) with it. AppCache is unflexible, confusing and punishes you for any mistake you make, but works pretty well if used correctly.)

---

<div class="post-metadata">

### Author: ![DanteZii](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dantezii/32/81726_2.png) [@DanteZii](https://meta.discourse.org/u/DanteZii)
#### Post date: [December 18, 2016, 9:56am UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/18 "2016-12-18T09:56:23Z")

</div>

examples of website [Progressive Web Apps &nbsp;|&nbsp; web.dev](https://developers.google.com/web/progressive-web-apps/)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [January 25, 2017, 2:46am UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/19 "2017-01-25T02:46:35Z")

</div>

> [@eviltrout](#):
>
> Service Worker is a non starter on iOS which

Aha but is it though? [Can I use... Support tables for HTML5, CSS3, etc](http://caniuse.com/#feat=webworkers)

> **[Safari 10.1](https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html)**
>
> Describes new features introduced in versions of Safari.

I guess the “service” part is still missing.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [January 25, 2017, 4:10pm UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/20 "2017-01-25T16:10:24Z")

</div>

Yeah web workers are different from service workers, despite sounding the same. Best we can hope for is the next iOS release.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [January 25, 2017, 4:59pm UTC](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265/21 "2017-01-25T16:59:43Z")

</div>

Either that or the antique, deprecated and quirky app cache ☹

[Next page](https://meta.discourse.org/t/discourse-as-a-progressive-web-app/47265.md?page=2)
