VSCode Your Next PWA

This post has been republished via RSS; it originally appeared at: Channel 9.

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!

Alpha Testers Wanted for Progressive Web App Tools for VS Code

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".

[Click through for the entire post]

PWA Tools

VS Code Extension for PWA Tools

This extension for Visual Studio Code adds snippets and JSON schema for a manifest.json for creating Progressive Web Apps (PWA).

...

Usage

Type part of a snippet, press enter, and the snippet unfolds.

JavaScript / TypeScript Snippets

pwa-custom-service-worker         // create a service worker file which can be extended
pwa-register                      // function that registers the service worker 

JavaScript Snippets

// 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 

HTML Snippets

pwa-manifest-link                 // create the link to the manifest.json
pwa-apple-mobile-web-capable      // add the meta tag for apple mobile web capable 

JSON Snippets

pwa-manifest                      // create the contents of `manifest.json` 

Alternatively, press Ctrl+Space (Windows, Linux) or Cmd+Space (OSX) to activate snippets from within the editor.

Installation

1. Install Visual Studio Code 1.10.0 or higher
2. Launch Code
3. From the command palette Ctrl-Shift-P (Windows, Linux) or Cmd-Shift-P (OSX)
4. Select Install Extension
5. Choose the extension PWA-Tools
6. 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

1. Create an Angular app with ng new my-app --routing and open the app in VS Code

... [Click through for more]

Follow @CH9
Follow @coding4fun
Follow @gduncan411