Write the Service Worker and Web Manifest really quick and on the go by typing familiar progressive web apps key words in your editor.



Installation, setup

Install the VS Code Extension from the Visual Studio Market Store here first OR Launch VS Code Quick Open ( Ctrl + P ), paste the following command and press enter.

ext install mayeedwin.vscode-pwa

Type the following say in your head tag or bottom page of your index page to register the service worker.


register service worker

Type the following in your empty service-worker.js file to import Workbox and add cache strategies to it, press enter to get the snippet.


import workbox

workbox.strategies

Add workbox window to your index page to help with faster service worker registration by typing the following at the bottom of your index page as well.

workbox window

Best for static sites and most probably web apps that do not have a huge production scale need, type the following keyword in the empty service-worker.js and press enter to get the snippet.


basic service worker

Now type the following in your empty app.webmanifest file and press enter to get the snippet. Remember to have your icons already as shown in the app.webmanifest


manifest

Now remember to add web manifest to everyone of those pages in your web app by typing the following in the head tags.

add web manifest to pages

Add theme color to the same pages in the head tag to using the keyword below

theme color

Preset code snippet to cache all your javascript and css assets for a faster page load with staleWhileRevalidate strategy. Do this in your service-worker.js


cache assets


Developer Notes

Find more code snippets command and latest release updates on the vs code market place here


You want to join our developer program?