DEV Community

loading...

Turn Your Website into a PWA

93lucasp profile image Luca Spezzano ・2 min read

According to this article by CNBC, Nearly three-quarters of the world will use just their smartphones to access the internet by 2025.

Considering these stats, if you are thinking of building a new website or redesign one, you should consider developing your website as PWA with no doubts.

Starting from a PWA could be the perfect start for your projects, you don’t need too much effort and you can build one application that works for all platforms!

What is a PWA?
A Progressive Web App (PWA) is a hybrid of a regular web page and a mobile application.
A PWA combines features offered by most modern browsers with the benefits of the mobile experience. They are built using standard web technologies, including HTML, CSS, and JavaScript.

The functionalities include working offline, push notifications, and device hardware access and enabling creating user experiences similar to native applications.
You can add them to the home of your phone exactly like a mobile app.

Why should you build a PWA?
A few weeks ago, I was looking for more information about PWA, and I found a very cool website pwastats.com, it shows the stats of all the most famous companies which are using PWA.
It was impressive to find out how the companies improved the performance of their website, mostly more than 100%.

A Progressive Web App can cut load times, allow users to navigate offline, increase the time spent on the website, increase revenue, can be much smaller than a mobile app, and much more.

Who is already using PWA?
It’s interesting to see the companies which already have a PWA, some of the world’s biggest company such as Twitter, Instagram, Uber, Pinterest, Forbes, Alibaba and much more.

To know how to turn your website in a PWA in 5 minutes read the article on medium https://medium.com/notonlycss/turn-your-website-into-a-pwa-6aaecb95f8b9

Discussion

pic
Editor guide
Collapse
bayuangora profile image
Bayu Angora

I have PWA installed with good score on Lighthouse. But when I check it here -> pwabuilder.com/

I got a warning on this part ->
X Service Worker has a pushManager registration

Can you give me the code to fix this issue?

Collapse
sohammondal profile image
Soham Mondal

Their website itself is not optimized for the mobile. 😒

Collapse
iceorfiresite profile image
Ice or Fire

Is pwabuilder completely free?

Collapse
bayuangora profile image
Bayu Angora

Yes, it's free. Just enter your domain and follow step by step to install it on your website.

Collapse
93lucasp profile image
Luca Spezzano Author

What do you mean for pwabuilder?

Collapse
93lucasp profile image
Luca Spezzano Author

Lighthouse gives you all checked?

Collapse
bayuangora profile image
Thread Thread
93lucasp profile image
Luca Spezzano Author

That's cool :) I think it is correct then, I don't know what other tools need!

Collapse
kaushalgautam profile image
Kaushal Gautam

This was like a click bait. It used up one of my premium stories for medium this month. I'm sure that was not the intention, but a warning/heads up would be nice.

Collapse
pavelloz profile image
Paweł Kowalski

Welcome to modern marketing and content distribution ;-)

PS. Not that i visit medium often, but just in case you do, this is an interesting open source project: github.com/manojVivek/medium-unlim...

--

After reading the article i must say it has very limited practical value.
Caching google fonts css in SW that has references to fonts? Writing manifest by hand? I guess its good enough if you are aiming at green checkmark in lighthouse.

Looks like a typical article written because thats what is trending in the tech world and will increase chance of "building audience" or "building the following".

Collapse
93lucasp profile image
Luca Spezzano Author

I don't think like that, don't you think that is useful to cache all the resources?

Thread Thread
pavelloz profile image
Paweł Kowalski

If you want to cache all the resources, open the css that you are caching in your article and see if you cached the fonts in there ;)

PS. Its much better to self-host fonts, you are reducing number of unique domains and one resolve, because you can define font-faces in your css, not ask google for it.

Thread Thread
93lucasp profile image
Luca Spezzano Author

thanks for the feedback :)

Collapse
93lucasp profile image
Luca Spezzano Author

medium.com/notonlycss/turn-your-we... you can read here also ;) Sorry but I can't change the rules of medium :)

Collapse
larsklopstra profile image
Lars Klopstra ⚡

Just use incognito 🙊

Collapse
byrro profile image
Renato Byrro

Exactly. Medium didn't think well about their pay wall.

Incognito solves my problem easily. But now I can't provide feedback on claps or comments, which only hurts their platform on many levels...

One of the dumbest monetization strategies I've seen recently.

Collapse
codemouse92 profile image
Jason C. McDonald

We encourage the entire article to be published on DEV.to (if you have proper rights), with a linkback if appropriate. Otherwise, we recommend original material, such as an original commentary on the article. From the Terms of Use:

Users must make a good-faith effort to share content that is...not designed primarily for the purposes of promotion or creating backlinks. Additionally, posts must contain substantial content — they may not merely reference an external link that contains the full post.

Posts that are simply intended to encourage readers to view an external resource are discouraged.

Thank you.