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.
Steps of the workshop
- Set up your environment
- Create a new Progressive Web App using PWA Studio (solution: 01-starter)
- Add functionalities such as mood tracking and journaling (solution: 02-repose)
- Make the PWA secure - deploy the PWA to an HTTPS endpoint (solution: 03-repose-PWA)
- Make the PWA installable - add a web app manifest to the PWA (solution: 03-repose-PWA)
- Make the PWA network-independent and work offline - register a service worker for the PWA (solution: 03-repose-PWA)
- Make the PWA engaging - enable push notifications (solution: 04-notifications)
- Audit and package the PWA to distribute to app stores
Feedback
Be sure to give feedback about this workshop!