Build Progressive Web Apps in VS Code on the go and like a pro

Build Progressive Web Apps in VS Code on the go and like a pro with this vs code extension stacked with workbox library

05/05/2021

pwa, pwafire

Advanced Progressive Web Apps Features

This extension has Workbox Support fully stacked. Workbox is a set of libraries to help you write and manage service workers and caching with the CacheStorage API. Get started : how to use Workbox here

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 in your service worker
`workbox.registerRoute`	determine whether the request being worked on matches your criteria, in your service worker
`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.

Command	Purpose and where to type
`workbox.packages`	import all workbox npm modules in your custom workbox service worker config` file
`workbox.registerRoute`	determine whether the request being worked on matches your criteria, and if so, apply a caching strategy to it
`workbox.analytics`	add offline google analytics in your workbox `service-worker.js` file, at the bottom.