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

I believe ghost does not have this feature yet, so i post this as an idea
since my previous topic 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

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… :sweat_smile:

image below is for reference
image

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

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.

1 Like

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

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?

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

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

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

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.

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

1 Like

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.

+1 for PWA version of Ghost!

Exactly what I’ve been looking for. :slightly_smiling_face:

1 Like

We just transformed one of our themes into a Progressive Web App.
Auden Ghost Theme

Also released a tutorial how it can be done for any Ghost theme:
Ghost Theme as a Progressive Web App

2 Likes

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 :grinning:

What are you interested in specifically?

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

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.

1 Like

hello @bironthemes 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?

@bironthemes 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?

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

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.

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/