Originally posted on my blog
Progressive web apps are a way to bring native app feeling into normal or traditional web apps. Indeed, with PWAs we ...
For further actions, you may consider blocking this person and/or reporting abuse
This guide is fantastic! I've been looking for simple intro to PWAs for a while. Of course, I'd find it here. Thanks for the write-up!
I'm glad you find value on it.
This is a how not to do a teaching lesson. Lots of unnecessary code that goes off topic making it confusing. Shows no pictures or examples of run code to help someone trying to follow along make sure their doing it right. For expert programmers this may be a great discussion. But for amateur programmers this fails to get the information across.
The manifest, service worker, and asset caching are what make it a PWA. Without those it's just a web app, not a PWA
And I mean, you don't need any of those things for a SPA. Every SPA doesn't need to be a PWA. But there are big advantages to PWAs, and this article shows that the few most important extra steps really aren't that hard.
Most definitions of PWA include a manifest and service workers.
I have been reading articles on this website for quite sometime now. Today I registered just to thank you for this article. While quite a few things in this tutorial flew over my head here, it gave me a much better picture of what a PWA is and how it is implemented. Thank you ! #beginner
Amazing! I'm flattered and glad you like it.
This is great. Thanks for sharing!
Question for you... If you were to integrate a service worker into an app that's served behind an NGINX proxy, would you reconfigure the proxy to add a 'Cache control: no-cache' header?
No it's not needed. Service worker runs in the browser not in the server.
Hi, nice post! Just want to point out that you forgot to include the "manifest_version" and "version" keys in manifest.json, which are mandatory.
WebExtension API and PWAs uses a deceptively similar
manifest.json
file, it seems. That is useful knowledge.Yep, I stand corrected haha. Either way this post gave me the push I needed to making my first PWA, got it installable today.
I think you need to check The Web App Manifest Docs first.
Now how do I run this on a localhost?
With PWA, you need a server to be able to launch it. If you try to launch
index.html
, it will not work though.If you're on Visual Studio Code, you can use the Live server extension or the equivalent with other IDE.
I tried to modify it a bit. I downloaded your src code and tried to remove some coffee pictures.But its not working
If you remove the images you'll need to update
To show your images first then, to cache your new images you'll to update the
assets
array on the service worker file.Thank you so much.
Sir, I wanted to ask you if we can print the table of a number, e.g =7
Without using for loop. Only by using higher order functions in js
let numbers = [7];
const x = numbers.map(number => number* (for(i=0;i<10;i++));
Somewhat in this manner?
Awesome article! Many thanks!
There is a small typo in the second paragraph of the web app manifest: It's
manifest.json
instead ofmanifest.jon
😅typo's demon😂, now it's fixed
kudos for your article and the for the smart idea of the toc's in the beginning.
I'm glad you like it.
Hi @ibrahima92 , thank you for this wonderful step by step guide.
Just one typo - Now we know, what a web manifest is, let's create a new file named manifest.jon (you've to name it like that) in the root directory, and add this code block below.
typo's demon😂, now it's fixed
Can we get the github link to this?
For sure, you can check it here
Thanks
Great post @ibrahima92 ! Thank you!
You're welcome and thanks for reading it
I just signed up on this platform to comment: everyone who is teaching any new technology which is beyond html+css+js should teach only with these three, no fourth thing already being there. As proven by this post, teaching code via first principles : is possible. You do not need a guy recording videos for it.
This is excellent, a great introduction to developing a PWA. Thanks for the details and for sharing!
Great. You're welcome
Thanks man! Really good explained, it helped my understanding little better PWA
Amazing! I'm glad you like it.
Wow! Never thought I would be able to make a PWA with just HTML, CSS and JS! Thank you for letting us know. 😃
You're welcome
This is fantastic to start with !!
Thanks
Hello! I just followed your excellent guide towards making a PWA out of my website but due to some unfortunate reason, it is not working. Could you please give me a go through and help me fix my error. Here's the link to my GitHub repo: github.com/raj2852/Mediheal
Thanks in advance.
what a way to experince PWA thanks
This is a gem of a guide. Thank you so much for sharing it! I was not looking for a guide on PWA's, but this is a pleasant surprise that has sparked serious interest.
Wow, hopefully, this guide will lead you on your first PWA
Really really thank you :)
You're welcome
What a lovely piece, thank you
You're welcome
Nicely put together and flow was smooth and simple..
Thanks to you, I learned something new today.
Great. Thanks for reading it too
Thank you, very interesting.
I leaned a lot from this post.
i'm flattered and glad you find value on it
A good lesson it is.
Learned alot from this
good morning, very good learn new things thank you !!
Amazing! you're welcome