VS Code Extension for PWA Tools
MIT License
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
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`
Alternatively, press Ctrl
+Space
(Windows, Linux) or Cmd
+Space
(OSX) to activate snippets from within the editor.
Ctrl
-Shift
-P
(Windows, Linux) or Cmd
-Shift
-P
(OSX)Install Extension
PWA-Tools
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
ng new my-app --routing
and open the app in VS Codesrc/manifest.json
pwa-manifest
snippetsrc/index.html
and use the pwa-manifest-link
snippet (in the element)generate-sw.js
cd my-app
and then npm i workbox-build
(add --save if you're using npm < 5.x)generate-sw.js
apps[0].assets
array in .angular-cli.json
src/app/main.ts
and run pwa-register
at the bottom.then(() => registerServiceWorker());
after bootstrappingng 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.