DEV Community

Convert any website into a PWA in just 3 simple steps

Tharun Shiv on May 20, 2020

This will be a do-as-you-read article, where I will provide you the base code and the code that you can use to try it along to build a basic PWA. ...

Read full post

venkat anirudh • May 20 '20

Works! Thank you

Tharun Shiv • May 20 '20

Glad it helped you🙂

Marvelous Afolabi • May 20 '20

Thank you 😀

Tharun Shiv • May 20 '20

Glad it helped.. thank you🙂

𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝 • Jun 14 '20 • Edited

Do you have any tips for debugging why the "Add to homescreen" button may not appear on mobile? As that's the issue I'm having :(

Nvm - sorted it! Apparently htaccess rewrite's stop the "Add to homescreen" from appearing.

#RewriteCond %{REQUEST_FILENAME} !-d
#RewriteCond %{REQUEST_FILENAME}\.html -f
#RewriteRule ^(.*)$ $1.html [NC,L]

Tharun Shiv • Jun 15 '20

Ah I see.. then what should we do to resolve it?

𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝 • Jun 15 '20

Just comment any redirects out like I have and it works :) Worth noting I'm not using any js framework, my PWA was very basic - haha.

Tharun Shiv • Jun 15 '20

Even I build PWAs without any framework. That doesn't mean it's basic, it means you know to do stuff without the help of a framework. 🙂 Good work 👍

praveenreddy1798 • May 20 '20

Good start to PWA, looking forward for more articles on it.

Tharun Shiv • May 20 '20

Thank you 😊

umamaheswari.v • May 20 '20

Well written 💯

Tharun Shiv • May 20 '20

Thank you😊

Kalinda Pride • May 22 '20

Can you explain more - what does it mean for the website to be installed, and what will the user see as a result?

I'm thinking of Google Docs or Gmail, versus Steam or Zoom or Slack. If I understand correctly, all of these are PWAs. But Docs and Gmail always run in a browser tab, and they feel like websites that happen to still work if your internet connection goes down. Steam, Zoom, and Slack all run in their own windows, have their own icons in the start menu, and need to be explicitly installed by the user, even though their special desktop app looks like it's just a re-skinned web browser. You can run them in a browser tab without downloading, but the features are different. Often sign-in is only available in a browser tab, but other features (e.g. playing a Steam game or making a Zoom call) are only available in the desktop app. A common pattern is that the desktop app will automatically open a browser tab when you need to sign in, and the browser tab will prompt you to open the desktop app when you try to access desktop-only features. If I send you a link for a Zoom call, you can open it in your browser like a normal link, and then your browser will ask for permission to open the desktop app where you can actually join the call.

Tharun Shiv • May 23 '20 • Edited

Hi,
I have videos, where I demo you the installation of the PWA - Progressive Web Apps on both Mobile and Desktop. Hope it helps.

Installing on a Mobile

Installing on Desktop

To clarify further, Zoom, steam or slack need not be PWAs but can be a regular desktop app. A regular desktop app is downloaded by you from a website, in say .exe format for example, and you install it by using the Wizard.

Whereas a PWA is a single click away from installing , and is installed by the above methods.

Hope the video gives you more clarity. Let me know if you still didn't get it, would be happy to help 🙂

You can try installing on : bit.ly/stick-it-notes