PWA Wiki website
The PWA Wiki website is hosted at pwa.js.org and it was a personal project that aimed to list common and advanced PWA features along with guides when developing PWAs.
I have been using this incredible note taking and project management tool called Notion, for about 3 years now.
The project was the result of my life-long notes on Progressive Web Apps and it includes things like:
- Implementation guides
- Tools & resources
- Common pitfalls
- Troubleshooting guides
- and more...
Once the Notion page got massive, I thought 'hmm 🤔 how can I share this with the world?' and I immediately turned on the sharing on the web option within Notion. The Notion page is available here.
But that wasn't enough now wasn't it? The website itself was not a PWA. How odd.
And so I started exploring other options of publishing this page as a website but in a way that I could add more customisations to it like a service worker, copy-to-clipboard buttons on headings and of course dark mode!
Continue reading below to see how I pulled this off.
Simple HTML and CSS! 🎉
All content is being extracted from a Notion page that I have created and is where I consolidate all my notes on PWAs.
I finally download all files from the browser and I run another script, this time a bash script within a terminal. This script is essentially fixing the links in the document, adding analytics and replacing any references to external files that were added by the browser while downloading all files.