PWA VS Code

Build Progressive Web Apps in VS Code on the go and like a pro. We have Workbox Support fully stacked too.

Advanced Progressive Web Apps Features

Workbox is a set of libraries to help you write and manage service workers and caching with the CacheStorage API.

Requirements

   "vscode": "^1.8.0"

Installation

Install vscode-pwa. It's available in Visual Studio Marketplace! OR

Launch VS Code Quick Open ( Ctrl + P ), paste the following command and press enter.

   ext install mayeedwin.vscode-pwa

Setting up the App Manifest and registering the Service Worker

Write the Service Worker and App Manifest really quick and like a pro!

Command	Purpose and where to type
`register.service.worker`	register service worker in your landing page say `index.html`
`add.web.manifest`	link `app.webmanifest` to your pages in the `head tag`
`theme.color`	add theme color in your pages head tag
`app.manifest`	add manifest meta data in your empty `app.webmanifest` file

Simple basic Service Worker

Command	Purpose and where to type
`basic.service.worker`	create simple service worker for simple static sites

Commands to type in your editor for Workbox CDN

NOTE : Use and refer to workbox developer docs while using the following commands for e.g the most used and critical one, workbox routing

Command	Purpose and where to type
`workbox.cdn`	import workbox cdn version
`workbox.registerRoute`	set caching routes
`workbox.assets`	cache assets i.e styles, js, workers, in your service worker
`workbox.images`	cache images, in your service worker
`workbox.external`	cache external resources from external orgins e.g fonts, in your service worker
`workbox.debug`	workbox config for debug or production builds, in your service worker
`workbox.window`	add faster new service worker installs and refresh, in your landing page

Setting up Workbox pre-cache

Command	Purpose and where to type
`workbox.precache`	workbox precache config code snippet in your say `sw-config.js` file

Commands to type in your editor for Workbox packages, using a bundler

Excerpt : When using a bundler to create your service worker, you install the Workbox packages you want to use from npm, and then you use import statements to directly reference the Workbox modules you want to use.

Adding Project Fugu APIs

API / Feature	Command	Where to type
Web Share Target API	`web.share.basic`	in your app manifest
Web Share Target API - Accepting application changes	`web.share.app`	in your app manifest
Web Share Target API - Accepting files	`web.share.files`	in your app manifest
Web Share Target API - Accepting text	`web.share.text`	in your app manifest
App Screeshots Preview before PWA Installation	`pwa.screenshots`	in your app manifest

Demo with PWA VS Code in play (With the old version)

Load preview in your browser here

Known Issues

All good to go with ^ v0.5-beta!

Release Notes

This beta version allows you to import Workbox and use cache strategies like a pro already!

Latest release of vscode-pwa beta!

Enjoy 😊 🐥 and thanks for checking it out. Let's connect on twitter @mayeedwin1 : )

Maye Edwin