reply View all Tutorials & Projects

How to Create a Progressive Web App (PWA) with HTML, CSS and JavaScript

In this tutorial, you'll build a simple Progressive Web Application (PWA) for the web. Progressive Web Applications are simply web apps that behave like native applications, and are typically "offline-first" meaning we can take advantage of Service Workers and the Cache API to display the app while the network is down.

Video Tutorial

Source Code

You can find the source code for this video below. Alternatively, browse it on GitHub.

README.md
# Getting Started with Progressive Web Apps (PWA)
Contains starting code for my tutorial on creating PWAs, check it out here:\
https://www.youtube.com/watch?v=WbbAPfDVqfY
images/logo192.png
(image file)
images/logo512.png
(image file)
index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>PWA</title>
        <link rel="stylesheet" href="src/master.css">
    </head>
    <body>
        <p>Hi my name is Dom</p>
        <script src="src/index.js"></script>
    </body>
</html>
src/index.js
src/master.css
body {
    background: #eeeeee;
}

If you have any questions about this code, please leave a comment on the video.