VSCode Your Next PWA
PWA, Progressive Web Apps, are the new application development shiny. Still new, first proposed by Google in 2015, PWA development is starting to gather some interest for early adopters. The issue, as with all shiny's, is the tooling, or lack there of, support.
John Papa, long time Friend of the Blog, felt the lack of tooling support and decided to do something about it!
I love the Web and I love tools that make creating awesome things for the Web easier! When creating Progressive Web Apps (PWAs) there are a lot of options. So it just makes sense to create an extension for VS Code to help design PWAs. As the title mentions, this is an alpha.
I'd love some of your help to test this extension. Give it a run through and see what we might want to change, add, remove, or document further. My first cut at this extension can be found here. Please refer to the GitHub repo to create any issues. I will iterate on this extension a few times, til I have something that is useful to the wider audience creating PWAs.
A few words about this extension's goals. The extension's snippets should:
I'm also working on some helpers to deploy PWAs to Azure.
Note that some of these are open issues in the GitHub repo. So feel free to help contribute to any issues that are marked "help wanted".
VS Code Extension for PWA Tools
This extension for Visual Studio Code adds snippets and JSON schema for a
manifest.jsonfor creating Progressive Web Apps (PWA).
Type part of a snippet, press
enter, and the snippet unfolds.
pwa-custom-service-worker // create a service worker file which can be extended
pwa-register // function that registers the service worker
// Helpful for build processes that generate service worker code
pwa-inject-precache // inject precache list into service worker
pwa-generate-service-worker // generate a service worker with a precache manifest
// Event listeners
pwa-event-push // create a event listener for push
pwa-event-sync // create a event listener for sync
pwa-event-notificationclick // create a event listener for notificationclick
pwa-event-pushsubscriptionchange // create a event listener for pushsubscriptionchange
pwa-event-load // create a event listener for load
pwa-event-activate // create a event listener for activate
pwa-event-install // create a event listener for install
pwa-event-fetch // create a event listener for fetch
pwa-manifest-link // create the link to the manifest.json
pwa-apple-mobile-web-capable // add the meta tag for apple mobile web capable
pwa-manifest // create the contents of `manifest.json`
Space(Windows, Linux) or
Space(OSX) to activate snippets from within the editor.
- Install Visual Studio Code 1.10.0 or higher
- Launch Code
- From the command palette
P(Windows, Linux) or
- Choose the extension
- Reload Visual Studio Code
Try it Out
Let's take a PWA for a spin. Using the Angular CLI, let's generate a new app and add PWA features.
Before we begin, install the Angular CLI and lite-server, if you haven't already done so, by running
npm i @angular/cli lite-server -g
- Create an Angular app with
ng new my-app --routingand open the app in VS Code
... [Click through for more]