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.
Background#
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.
Tech stack#
Simple HTML and CSS! 🎉
Ok with a bit of JavaScript for the absolutely necessary bits, like service worker registration, code highlighting and analytics.
Notion#
All content is being extracted from a Notion page that I have created and is where I consolidate all my notes on PWAs.
After the html is extracted, I run a JavaScript snippet within Chrome DevTools that is adding some custom styling to the page and some extra features like code highlighting, copy-to-clipboard buttons and some Accessibility and SEO fixes.
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.
Once the script is over I simply run an npm command (npm run deploy) that builds the page with Webpack and deploys to Github Pages.