DEV Community

Cover image for Turn existing website to PWA in 1 minute using PWAinit
Saurabh Daware ๐ŸŒป
Saurabh Daware ๐ŸŒป

Posted on

Turn existing website to PWA in 1 minute using PWAinit

PWAinit logo

So what is PWAinit?

PWAinit is a command line tool that can be installed using npm install -g pwainit. PWAinit lets you initiate a new Progressive Web App or you can even add PWA features like Service Worker, Web App Manifest, PushAPI into your existing website to turn it into a complete progressive web app.

Installation & Usage

Download NodeJS if you haven't already have it in your machine

# Check if npm is installed using `npm -v` then..
npm install -g pwainit
Enter fullscreen mode Exit fullscreen mode

Now cd to your existing website and run command pwainit add

cd existingWebsite
pwainit add
Enter fullscreen mode Exit fullscreen mode

Just answer the questions and thats it!๐ŸŽ‰
If you choose to add push api backend you would have to do absolutely zero configurations!!

Demo :

Alt Text

Run PushAPI backend

cd pushapi-backend/
node index.js
Enter fullscreen mode Exit fullscreen mode

PWAinit Docs: https://saurabhdaware.github.io/pwainit
Github: https://github.com/saurabhdaware/pwainit
NPM: https://npmjs.org/package/pwainit
Youtube Demo: https://www.youtube.com/watch?v=bje85AdBOgs

Top comments (4)

Collapse
 
nomangul profile image
Noman Gul

Cool one ๐Ÿ˜

Collapse
 
saurabhdaware profile image
Saurabh Daware ๐ŸŒป

Thank you so much :)

Collapse
 
makeavoy2 profile image
Snicholas SnackAvoy

Ooooh great idea!! I was thinking of doing something similar because configuring PWAs seems like a hassle but pretty cut and paste for the most part. If this implemented icon generation for all the platforms too it could be a one stop shop!

Collapse
 
saurabhdaware profile image
Saurabh Daware ๐ŸŒป

Yeah exactly even i felt like Service workers have this basic code which hardly changes. It is on my github by the way so you can check out the source code and yes it creates basic place holder icon when you 'pwainit create projectname'.
But yes maybe i can take their projectname and generate a simple icon with that text in it. It would be super cool to implement