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

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

[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

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

[Accha thik ha]

Thank you so much.

[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

[Accha thik ha]

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

Somewhat in this manner?