DEV Community

Cover image for How to build a PWA from scratch with HTML, CSS and JavaScript ?

How to build a PWA from scratch with HTML, CSS and JavaScript ?

Ibrahima Ndaw on January 31, 2020

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 ...
Collapse
 
therealgrinny profile image
Connor

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!

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

I'm glad you find value on it.

Collapse
 
tygari profile image
Tygari

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.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
kenbellows profile image
Ken Bellows • Edited

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.

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

But suddenly we're including manifest.json, service workers, asset caching?

Most definitions of PWA include a manifest and service workers.

Collapse
 
snehavalabailu profile image
Sneha Valabailu

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

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

Amazing! I'm flattered and glad you like it.

Collapse
 
vitale232 profile image
Andrew Vitale

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?

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw • Edited

No it's not needed. Service worker runs in the browser not in the server.

Collapse
 
badrecordlength profile image
Henry 👨‍💻

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.

Collapse
 
emptyother profile image
emptyother

WebExtension API and PWAs uses a deceptively similar manifest.json file, it seems. That is useful knowledge.

Collapse
 
badrecordlength profile image
Henry 👨‍💻

Yep, I stand corrected haha. Either way this post gave me the push I needed to making my first PWA, got it installable today.

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

I think you need to check The Web App Manifest Docs first.

Collapse
 
unspokenkash profile image
Accha thik ha

Now how do I run this on a localhost?

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

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.

Collapse
 
unspokenkash profile image
Accha thik ha

I tried to modify it a bit. I downloaded your src code and tried to remove some coffee pictures.But its not working

Thread Thread
 
ibrahima92 profile image
Ibrahima Ndaw

If you remove the images you'll need to update

  • app.js
const coffees = [
  { name: "Perspiciatis", image: "images/coffee1.jpg" },
  { name: "Voluptatem", image: "images/coffee2.jpg" },
  { name: "Explicabo", image: "images/coffee3.jpg" },
  { name: "Rchitecto", image: "images/coffee4.jpg" },
  { name: " Beatae", image: "images/coffee5.jpg" },
  { name: " Vitae", image: "images/coffee6.jpg" },
  { name: "Inventore", image: "images/coffee7.jpg" },
  { name: "Veritatis", image: "images/coffee8.jpg" },
  { name: "Accusantium", image: "images/coffee9.jpg" },
]

To show your images first then, to cache your new images you'll to update the assets array on the service worker file.

  • serviceWorker.js
const staticDevCoffee = "dev-coffee-site-v1"
const assets = [
  "/",
  "/index.html",
  "/css/style.css",
  "/js/app.js",
  "/images/coffee1.jpg",
  "/images/coffee2.jpg",
  "/images/coffee3.jpg",
  "/images/coffee4.jpg",
  "/images/coffee5.jpg",
  "/images/coffee6.jpg",
  "/images/coffee7.jpg",
  "/images/coffee8.jpg",
  "/images/coffee9.jpg",
]

self.addEventListener("install", installEvent => {
  installEvent.waitUntil(
    caches.open(staticDevCoffee).then(cache => {
      cache.addAll(assets)
    })
  )
})
Thread Thread
 
unspokenkash profile image
Accha thik ha

Thank you so much.

Thread Thread
 
unspokenkash profile image
Accha thik ha

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

Thread Thread
 
unspokenkash profile image
Accha thik ha

let numbers = [7];
const x = numbers.map(number => number* (for(i=0;i<10;i++));

Somewhat in this manner?

Collapse
 
devmount profile image
Andreas

Awesome article! Many thanks!

There is a small typo in the second paragraph of the web app manifest: It's manifest.json instead of manifest.jon 😅

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

typo's demon😂, now it's fixed

Collapse
 
labibllaca profile image
labibllaca

kudos for your article and the for the smart idea of the toc's in the beginning.

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

I'm glad you like it.

Collapse
 
ashygoyal profile image
Ashish Goyal

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.

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

typo's demon😂, now it's fixed

Collapse
 
idam_okechukwu profile image
Dean

Can we get the github link to this?

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

For sure, you can check it here

Collapse
 
idam_okechukwu profile image
Dean

Thanks

Collapse
 
vbelolapotkov profile image
Vasily Belolapotkov

Great post @ibrahima92 ! Thank you!

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

You're welcome and thanks for reading it

Collapse
 
bangmachiv profile image
Bhavanshu Saini • Edited

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.

Collapse
 
rustyingles profile image
RustyIngles

This is excellent, a great introduction to developing a PWA. Thanks for the details and for sharing!

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

Great. You're welcome

Collapse
 
3rchuss profile image
Jesus Abril

Thanks man! Really good explained, it helped my understanding little better PWA

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

Amazing! I'm glad you like it.

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Wow! Never thought I would be able to make a PWA with just HTML, CSS and JS! Thank you for letting us know. 😃

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

You're welcome

Collapse
 
miteshkamat27 profile image
Mitesh Kamat

This is fantastic to start with !!

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

Thanks

Collapse
 
raj2852 profile image
Rajdip Mondal

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.

Collapse
 
dule_martins profile image
Dule Martins

what a way to experince PWA thanks

Collapse
 
keomatherapper profile image
Keoma Mallett

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.

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

Wow, hopefully, this guide will lead you on your first PWA

Collapse
 
diek profile image
diek

Really really thank you :)

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

You're welcome

Collapse
 
2bona profile image
Okoli Bonaventure

What a lovely piece, thank you

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

You're welcome

Collapse
 
neerajpro profile image
Neeraj Goswami

Nicely put together and flow was smooth and simple..

Collapse
 
hibritusta profile image
Hibrit Usta

Thanks to you, I learned something new today.

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

Great. Thanks for reading it too

Collapse
 
xarala221 profile image
Ousseynou Diop

Thank you, very interesting.
I leaned a lot from this post.

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

i'm flattered and glad you find value on it

Collapse
 
johnodh58450097 profile image
John Odhiambo

A good lesson it is.
Learned alot from this

Collapse
 
alaelcio profile image
alaelcio

good morning, very good learn new things thank you !!

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

Amazing! you're welcome