DEV Community

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 ...

Read full post

Connor • Feb 1 '20

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!

Ibrahima Ndaw • Feb 1 '20

I'm glad you find value on it.

Tygari • Feb 1 '20

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.

Comment deleted

Ken Bellows • Feb 1 '20 • 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.

Aleksandr Hovhannisyan • Feb 1 '20

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

Most definitions of PWA include a manifest and service workers.

Sneha Valabailu • Feb 4 '20

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

Ibrahima Ndaw • Feb 5 '20

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

Andrew Vitale • Feb 1 '20

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?

Ibrahima Ndaw • Feb 1 '20 • Edited

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

Henry 👨‍💻 • Feb 1 '20

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.

emptyother • Feb 3 '20

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

Henry 👨‍💻 • Feb 3 '20

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

Ibrahima Ndaw • Feb 2 '20

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

Accha thik ha • Feb 3 '20

Now how do I run this on a localhost?

Ibrahima Ndaw • Feb 4 '20

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.

Accha thik ha • Feb 4 '20

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

Ibrahima Ndaw • Feb 4 '20

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)
    })
  )
})

Accha thik ha • Feb 4 '20

Thank you so much.

Accha thik ha • Feb 7 '20

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

Accha thik ha • Feb 7 '20

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

Somewhat in this manner?

Andreas • Feb 5 '20

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 😅

Ibrahima Ndaw • Feb 5 '20

typo's demon😂, now it's fixed

labibllaca • Feb 1 '20

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

Ibrahima Ndaw • Feb 1 '20

I'm glad you like it.

Ashish Goyal • Feb 4 '20

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.

Ibrahima Ndaw • Feb 5 '20

typo's demon😂, now it's fixed

Dean • Jan 31 '20

Can we get the github link to this?

Ibrahima Ndaw • Feb 1 '20

For sure, you can check it here

Dean • Feb 3 '20

Thanks

Vasily Belolapotkov • Feb 8 '20

Great post @ibrahima92 ! Thank you!

Ibrahima Ndaw • Feb 1 '20

You're welcome and thanks for reading it

Bhavanshu Saini • Jun 27 '20 • 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.

RustyIngles • Feb 2 '20

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

Ibrahima Ndaw • Feb 2 '20

Great. You're welcome

Jesus Abril • Feb 4 '20

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

Ibrahima Ndaw • Feb 5 '20

Amazing! I'm glad you like it.

Vaibhav Khulbe • Feb 1 '20

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

Ibrahima Ndaw • Feb 1 '20

You're welcome

Mitesh Kamat • Feb 4 '20

This is fantastic to start with !!

Ibrahima Ndaw • Feb 4 '20

Thanks

Rajdip Mondal • Apr 10 '21

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.

Dule Martins • Feb 5 '20

what a way to experince PWA thanks

Keoma Mallett • Feb 25 '20

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.