DEV Community

Cover image for Make any Jekyll site into a PWA

Make any Jekyll site into a PWA

Alok Prateek on August 05, 2019

A Progressive Web App, or PWA, uses modern web capabilities to deliver an app-like user experience. Any website can be made into a PWA. T...
Collapse
 
marklchaves profile image
mark l chaves

Super helpful. I've done AMP PWAs before. But, this was my first Jekyll PWA. I thought about using a Jekyll plugin. But, your instructions looks so simple. I'm glad I tried them!

I used the PWABuilder to generate my manifest file. I also created a separate offline.html page. Got everything up and running with an excellent Lighthouse score.

My Jekyll site installed flawlessly on my iPhone and Mac Book. My site can run completely offline after caching every page. Love it.

Thank you!

Collapse
 
thewhitewulfy profile image
Alok Prateek

Thank you Mark for your appreciation. It has given me the right nudge to finish my other drafts.😁

Collapse
 
bhupesh profile image
Bhupesh Varshney 👾

Hey this was a nice guide. 😃
I actually tried this long ago
But since then I am encountering problems.
My Service Worker seems to get registered but it's showing that(Add to Home Screen) option.
PS : my site is deployed on GitHub Pages.
Any suggestions?

Collapse
 
thewhitewulfy profile image
Alok Prateek

Hey Bhupesh,
I saw your site and its code on github, basically you are not using the register service worker function in your <head>. This might be root of your problems.

The manifest is fine.

The service worker has an empty fetch event so it won't do anything. Adding the index to cache is fairly easy.

Collapse
 
zeeshan profile image
Mohammed Zeeshan • Edited

Hi Alok(@thewhitewulfy ), can you tell where to add manifest.json file? I added it to the site root but it isn't detecting site variables like site.name, etc