# Progressive Web App version of ghost blog (install service worker)

**URL:** <https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013>\
**Category:** Ideas\
**Created:** [July 15, 2018, 11:14am UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013 "2018-07-15T11:14:59Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jehan\_Musa](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jehan_musa/32/539_2.png) [@Jehan\_Musa](https://forum.ghost.org/u/Jehan_Musa)\
**Post date:** [July 15, 2018, 11:14am UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/1 "2018-07-15T11:14:59Z")

</div>

**I believe ghost does not have this feature yet, so i post this as an idea**  
since my [previous topic](https://forum.ghost.org/t/amped-ghost-app/1979/12) seem like it is impossible and almost looks like re-engineering ghost _(from my point of view)_,

this make me think **why can’t ghost have a service worker as default feature?**  
…AMP is best use with PWA…  
so mobile visitor will start fast and stay fast on the ghost blog…  
in case the visitor from the AMP version of blog post they read, they decide to read another blog post which will bring them to the non-AMP version of the blog, this service worker can improve user experience…  
**in the AMP version of the blog** , it should have [`amp-install-serviceworker`](https://www.ampproject.org/docs/reference/components/amp-install-serviceworker)

> i know that ghost is open source which i can contribute, but to be honest, i just don’t want to break things since i don’t really skillful in JS… 😅

**image below is for reference**  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/1X/f1048018eeb4e80deecd0e9007c96a05e92bd030.png)

i hope this will be default feature in the next ghost update 💪

---

<div class="post-metadata">

**Author:** ![lee\_ars](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/lee_ars/32/834_2.png) [@lee\_ars](https://forum.ghost.org/u/lee_ars)\
**Post date:** [July 15, 2018, 5:59pm UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/2 "2018-07-15T17:59:31Z")

</div>

I’m having a difficult time understanding both your previous inked post and this one.

As a site admin with self-hosted ghost, what specifically would a service worker do for me? What functionality or behavior are you trying to make happen? It’s difficult to understand what you’re trying to do or what you think should be happening, or how a service worker would help.

---

<div class="post-metadata">

**Author:** ![Jehan\_Musa](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jehan_musa/32/539_2.png) [@Jehan\_Musa](https://forum.ghost.org/u/Jehan_Musa)\
**Post date:** [July 15, 2018, 6:14pm UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/3 "2018-07-15T18:14:35Z")

</div>

just want to improve performance  
some reader might have unstable connection

we don’t want to spoil their mood right? having to wait just to read an article  
_(well this had being solved with the AMP conversion)_

and wait again to read previous blog post or the latest one  
_(here i believe, when click to read on other blog post, user will go to non-AMP version of the website, which require some loading, we want them to read more right?)_

people with reliable internet connection will say everything is fine

---

<div class="post-metadata">

**Author:** ![vikaspotluri123](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/vikaspotluri123/32/24_2.png) [@vikaspotluri123](https://forum.ghost.org/u/vikaspotluri123)\
**Post date:** [July 15, 2018, 6:42pm UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/4 "2018-07-15T18:42:57Z")

</div>

> [@Jehan\_Musa](#):
>
> why can’t ghost have a service worker as default feature?

This is definitely something that’s possible, but it can also be done on a theme basis for now (it’s a workaround)

There was some discussion about this here - the first comment regarding it is [Is ghost are good for SEO? - #9 by Jehan\_Musa](https://forum.ghost.org/t/is-ghost-are-good-for-seo/1366/9)

---

<div class="post-metadata">

**Author:** ![Jehan\_Musa](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jehan_musa/32/539_2.png) [@Jehan\_Musa](https://forum.ghost.org/u/Jehan_Musa)\
**Post date:** [July 16, 2018, 3:24am UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/5 "2018-07-16T03:24:10Z")

</div>

will it break when updating ghost app?  
that’s a concern…

but it’s nicer if casper theme(default theme) already have service worker…

by the way, since i saw there is a planned idea on paid subscription,  
this service worker would help…

just like this forum (that base on discourse), it has service worker, and very smooth on mobile

---

<div class="post-metadata">

**Author:** ![vikaspotluri123](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/vikaspotluri123/32/24_2.png) [@vikaspotluri123](https://forum.ghost.org/u/vikaspotluri123)\
**Post date:** [July 16, 2018, 3:33am UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/6 "2018-07-16T03:33:22Z")

</div>

Having a theme service worker shouldn’t break any updates from ghost, if that’s what you’re asking

---

<div class="post-metadata">

**Author:** ![Jehan\_Musa](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jehan_musa/32/539_2.png) [@Jehan\_Musa](https://forum.ghost.org/u/Jehan_Musa)\
**Post date:** [July 16, 2018, 12:01pm UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/7 "2018-07-16T12:01:52Z")

</div>

oh i see,theme won’t effect…noted  
i thought it was like wordpress where update also can break the website…

by the way, is there any way to update ghost instead of using command line?  
what i mean is a more user friendly…command line is more on developer i guess

---

<div class="post-metadata">

**Author:** ![vikaspotluri123](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/vikaspotluri123/32/24_2.png) [@vikaspotluri123](https://forum.ghost.org/u/vikaspotluri123)\
**Post date:** [July 16, 2018, 3:34pm UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/8 "2018-07-16T15:34:23Z")

</div>

> [@Jehan\_Musa](#):
>
> i thought it was like wordpress where update also can break the website

In wordpress, themes have the same level of access as the WP-core. This means the theme is free to do whatever it wants. Conversely, in Ghost, themes only have access to basic logic execution, and minor retrieval requests. This means the theme is extremely limited in what it can do and how it can mess with your Ghost installation.

> [@Jehan\_Musa](#):
>
> by the way, is there any way to update ghost instead of using command line?  
> what i mean is a more user friendly…command line is more on developer i guess

Not at the moment. As ghost is still quite young, there’s a lot of work being done to make Ghost more functional. There is some sparse work being done to make it possible, but it hasn’t gone way to far

---

<div class="post-metadata">

**Author:** ![kamranicus](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/kamranicus/32/4468_2.png) [@kamranicus](https://forum.ghost.org/u/kamranicus)\
**Post date:** [October 2, 2019, 3:32pm UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/10 "2019-10-02T15:32:06Z")

</div>

Came here searching for PWA support. This is something I’m really interested in, I follow a few blogs that are PWAs and one great thing is the prompt to pin to your home screen. The big benefit could be basic offline support where posts or some amount of posts are cached (amp?).

This is something I may look at contributing to Casper in the future or at least providing a plug-in or add on to do it, because I think this is just a really nice performance and benefit to get out of the box.

---

<div class="post-metadata">

**Author:** ![Metta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/metta/32/4856_2.png) [@Metta](https://forum.ghost.org/u/Metta)\
**Post date:** [October 25, 2019, 1:47am UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/11 "2019-10-25T01:47:17Z")

</div>

+1 for PWA version of Ghost!

Exactly what I’ve been looking for. 🙂

---

<div class="post-metadata">

**Author:** ![brightthemes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/brightthemes/32/25099_2.png) [@brightthemes](https://forum.ghost.org/u/brightthemes)\
**Post date:** [May 6, 2020, 12:40pm UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/12 "2020-05-06T12:40:08Z")

</div>

We just transformed one of our themes into a Progressive Web App.  
[Auden Ghost Theme](https://auden.bironthemes.com)

Also released a tutorial how it can be done for any Ghost theme:  
[Ghost Theme as a Progressive Web App](https://bironthemes.com/blog/ghost-as-progressive-web-app/)

---

<div class="post-metadata">

**Author:** ![vibhi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/vibhi/32/6733_2.png) [@vibhi](https://forum.ghost.org/u/vibhi)\
**Post date:** [May 6, 2020, 7:02pm UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/13 "2020-05-06T19:02:10Z")

</div>

Can You Upload your theme folder somewhere, You can remove theme files for sure as its look premium?

I Just wanna look into the structure can you? Please 😀

---

<div class="post-metadata">

**Author:** ![brightthemes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/brightthemes/32/25099_2.png) [@brightthemes](https://forum.ghost.org/u/brightthemes)\
**Post date:** [May 6, 2020, 7:30pm UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/14 "2020-05-06T19:30:00Z")

</div>

What are you interested in specifically?

---

<div class="post-metadata">

**Author:** ![vibhi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/vibhi/32/6733_2.png) [@vibhi](https://forum.ghost.org/u/vibhi)\
**Post date:** [May 6, 2020, 7:47pm UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/15 "2020-05-06T19:47:58Z")

</div>

Where are all those files related to pwa and its related files.

---

<div class="post-metadata">

**Author:** ![brightthemes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/brightthemes/32/25099_2.png) [@brightthemes](https://forum.ghost.org/u/brightthemes)\
**Post date:** [May 6, 2020, 8:27pm UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/16 "2020-05-06T20:27:14Z")

</div>

In the linked blog post it’s explained, but as a summary:

- sw.js (root folder)
- manifest.webmanifest (root folder)
- icons in the assets folder (they are linked from the manifest file)
- default.hbs changed to link to the manifest file and register the service worker.

As I said, for details you can check the article, but let me know if you still have questions.

---

<div class="post-metadata">

**Author:** ![giacomosilli](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/giacomosilli/32/3403_2.png) [@giacomosilli](https://forum.ghost.org/u/giacomosilli)\
**Post date:** [May 7, 2020, 1:31pm UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/17 "2020-05-07T13:31:25Z")

</div>

hello @brightthemes I read the tutorial, the idea of making Ghost a PWA is interesting, I did the same thing more than a year ago, but I had problems.

An opinion from the staff would be interesting. Could making Ghost a PWA cause any problems?

---

<div class="post-metadata">

**Author:** ![giacomosilli](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/giacomosilli/32/3403_2.png) [@giacomosilli](https://forum.ghost.org/u/giacomosilli)\
**Post date:** [May 11, 2020, 4:40pm UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/18 "2020-05-11T16:40:00Z")

</div>

@brightthemes I turned Ghost into a PWA, then I modified some js and css. Changes are not seen until I clear the cache etc.

How to force the update without having to manually clear the cache?

---

<div class="post-metadata">

**Author:** ![brightthemes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/brightthemes/32/25099_2.png) [@brightthemes](https://forum.ghost.org/u/brightthemes)\
**Post date:** [May 11, 2020, 7:35pm UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/19 "2020-05-11T19:35:28Z")

</div>

In the tutorial there is a cache first strategy, but you could adapt the logic to always fetch and return the network response (when available) and only return the last cached response when offline(as fallback). I am planning on updating the post with this information.

Another thing you could try is implementing a cache expiration, you can find information about that. [Here is an example](https://phyks.me/2019/01/manage-expiration-of-cached-assets-with-service-worker-caching.html)

---

<div class="post-metadata">

**Author:** ![giacomosilli](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/giacomosilli/32/3403_2.png) [@giacomosilli](https://forum.ghost.org/u/giacomosilli)\
**Post date:** [May 11, 2020, 11:04pm UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/20 "2020-05-11T23:04:16Z")

</div>

Unfortunately I think this service worker is not correct for Ghost, I was unable to find a working (or ready to use) one on the Web.

We need to modify the service worker for `/ghost/*` path, otherwise 500 errors will be encountered. `/ghost/*` should never be cached

I have had the opportunity to try for some time, but I have not been able to obtain the optimal configuration, something still creates problems for me.

Regarding the frontend, I can trigger the update of cached files changing the constants in the service worker

```
const PRECACHE = 'myApp-v1.0.1';
const RUNTIME = 'myApp-v1.0.1';

```

But, this only works locally, probably in production with Nginx, the operation is different.

---

<div class="post-metadata">

**Author:** ![z00md](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/z00md/32/19082_2.png) [@z00md](https://forum.ghost.org/u/z00md)\
**Post date:** [September 13, 2020, 9:17am UTC](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013/21 "2020-09-13T09:17:24Z")

</div>

Just checked out the idea and referred Biron’s article to add PWA support to my ghost blog too. I also faced issues as reported by you. For me these two steps worked

1. **New content not visible** - Updated the service worker to use `Network first` strategy which means show cached files only when network call fails. And present an offline page if both fail.
2. **500 Erros in ghost admin** - Added a check in the service worker to ignore all admin calls

More details on my article [https://cybercafe.dev/add-progressive-web-app-support-to-ghost-theme/](https://cybercafe.dev/add-progressive-web-app-support-to-ghost-theme/)

[Next page](https://forum.ghost.org/t/progressive-web-app-version-of-ghost-blog-install-service-worker/2013.md?page=2)
