Skip to content

Latest commit

 

History

History
50 lines (36 loc) · 4.04 KB

README.md

File metadata and controls

50 lines (36 loc) · 4.04 KB
Raw

Build A Progressively Enhanced Mood Journal Web App

Overview

Have you heard about Progressive Web Apps (PWA) in the latest web development trends? Do you want to build web apps that can be installed across different platforms, be network-independent, work offline, and take advantage of platform-specific capabilities such as notifications? In this workshop, we will take you through the journey from how to get started building a Progressive Web App to deploying it to the Microsoft Store. 🧠

Goals

Goal Build an awesome progressively enhanced mood journal web app
What will you learn Build, audit, and package your first Progressive Web App
What you'll need A modern web browser like Microsoft Edge. A code editor such as Visual Studio Code. Git. Node.js.
Duration 1 - 1.5 hours
Microsoft Cloud Topics taught Azure Static Web Apps
Just want to try the app or see the solution? Repose
Slides Powerpoint
Author Beth Pan

Prerequisites

  • Basic knowledge of HTML, CSS, and JavaScript. If you need to brush up on your web skills, you can checkout this Microsoft Learn Module or this workshop.
  • A modern web browser like Microsoft Edge. PWAs are supported on most modern browsers but to facilitate this workshop we will be using Microsoft Edge.
  • A code editor such as Visual Studio Code.
  • An Azure account if you want to deploy your app to a secure endpoint.
  • Git to clone sample solutions.
  • Node.js to run the sample solutions.
  • A Microsoft account that you can register as a developer account to publish your app to the Microsoft Store. You will need to pay $19 for account services to publish your app to the Microsoft Store. Note that if you have Visual Studio Enterprise subscription, you get a promo code to publish your apps for free.

What you will learn

By the end of this workshop, you will create a mood journal web app that can be installed across different platforms, be network-independent, work offline, and take advantage of platform-specific capabilities such as notifications.

image of completed project

Steps of the workshop

  1. Set up your environment
  2. Create a new Progressive Web App using PWA Studio (solution: 01-starter)
  3. Add functionalities such as mood tracking and journaling (solution: 02-repose)
  4. Make the PWA secure - deploy the PWA to an HTTPS endpoint (solution: 03-repose-PWA)
  5. Make the PWA installable - add a web app manifest to the PWA (solution: 03-repose-PWA)
  6. Make the PWA network-independent and work offline - register a service worker for the PWA (solution: 03-repose-PWA)
  7. Make the PWA engaging - enable push notifications (solution: 04-notifications)
  8. Audit and package the PWA to distribute to app stores

Feedback

Be sure to give feedback about this workshop!

Code of Conduct