Welcome to Day 15 of #30DaysOfPWA! New to the series? Three things you can do to catch up:
- Read the kickoff post below for context.
- Watch the GitHub Repository for updates.
- Bookmark #30DaysOfPWA Blog for resources.
This is a shortened version of this canonical post for the #30DaysOfPWA.
About The Author
Today's post is authored by Justin Willis – a member of the PWABuilder team at Microsoft. Follow Justin at @justinwillis96 or here on dev.to.
Welcome to day week 3 day 1 of the 30 Days of PWA series! Today's blog post will introduce new tools from the PWABuilder project – including PWA Studio and PWA Starter. We'll use these tools to create a new PWA with just a few clicks, then dive into some of the tools behind this process.
Introduction
Hello! For today’s post on the 30 Days of PWA series, we will be getting started with some new tooling from the PWABuilder Project! The PWABuilder team has been working on tools for developers at any step of the building process, from starting a brand new PWA to packaging your existing PWA for the app stores.
In this article, we will focus on PWA Studio, a new VSCode Extension from the PWABuilder project, and the PWA Starter, also from the PWABuilder team, a codebase template to help you get started with building new PWAs.
Getting Started + Demo
Let's start building a new Progressive Web App using PWA Studio! PWA Studio's Start a new App feature creates your app using the PWA Starter.
- [1] Install PWA Studio from the VSCode Marketplace.
- [2] Once installed, click the PWABuilder Icon on the left side of VSCode
- [3] You should now see a
Start new PWAbutton in the bottom bar of VSCode. Click this button to start generating a PWA.
- [4] Enter your repository name when prompted, this is normally the name of your app.
- [5] Your PWA will be generated using the Starter and all of your dependencies will be installed!
- [6] At this point, you are now ready to start coding! Click
F5or ClickRunandStart Debuggingat the top of VSCode. Your new PWA will now open in dev mode, with auto-reload, in its own App window. Enabling you to build your PWA in an app-first manner.
Under the Hood
PWA Starter
The PWA Starter is a code template, similar to what tools like create-react-app or the Angular CLI can generate.
With the PWA Starter, you get an app that:
- Has no build system to set up and no boilerplate code to add. Everything is included out of the box.
- Has a Service Worker system using Workbox
- Scores close to 100 on Lighthouse, out of the box
- Uses the Fluent Web Components, you can build native looking PWAs on Windows
- Has everything needed to be installable in the browser
- Is ready to be packaged for the app stores using PWABuilder
PWA Studio
PWA Studio is an extension that brings everything you need to build PWAs to VSCode. When you install PWA Studio, you can:
- Start building a new PWA in seconds using the PWABuilder pwa-starter.
- Learn how to publish your app to the Web with Azure Static Web Apps
- Add a Web App Manifest and Service Worker to your existing web app
- Package your PWA for the Microsoft Store, Google Play, and Apple App Store
- Generate Icons for your PWA
- Validate that your PWA is installable in the browser and is ready to publish to the app stores
- Learn more about using the Web App Manifest to enable new features in your PWA
- Use the snippets to implement native features that can improve the User Experience of your PWA.
And that was how we use the new PWA Studio VSCode Extension and the PWA Starter to start building a PWA with just a few button clicks!
In tomorrow's post, we'll dive into converting our existing website to a PWA!
Resources
Want to read more content from Microsoft technologists? Don't forget to follow Azure right here on dev.to: