VS Code Extension for PWA Tooling

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

THIS IS AN ALPHA VERSION

See the CHANGELOG for the latest changes

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
2. Create src/manifest.json
3. Use the pwa-manifest snippet
4. Open src/index.html and use the pwa-manifest-link snippet (in the element)
5. Use the pwa-apple-mobile-web-capable snippet (in the element)
6. Create generate-sw.js
7. Run cd my-app and then npm i workbox-build (add --save if you're using npm < 5.x)
8. Use the pwa-generate-service-worker in generate-sw.js
9. Add "manifest.json" to the apps[0].assets array in .angular-cli.json
10. Open src/app/main.ts and run pwa-register at the bottom
11. Call .then(() => registerServiceWorker()); after bootstrapping
12. Run ng build --prod && node generate-sw.js && cd dist && lite-server

Now test it!

Your app should be running in the browser. Open the developer tools, go to the Application tab, and select Service Workers. Inspect the service worker, and try to go offline and refresh.