v0.5.4

v0.5.4

v0.4.1

Write the Service Worker and App Manifest really quick and like a pro!
Both for CDN and bundlers you love!

Installation : Get the extension for VS Code here

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 to pages	link app.webmanifest to your pages in the head tag
theme color	add theme color in your pages head tag
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 CDN Workbox

Command	Purpose and where to type
import workbox	import workbox in your service worker
workbox.strategies	add cache strategies in your service worker
cache assets	make your JS and CSS ⚡ fast by returning the assets from the cache, while making sure they are updated in the background for the next use in your workbox service-worker.js file
cache images	serve images quickly from the cache, while making sure you don’t cache them indefinitely, consuming your users' storage in your workbox service-worker.js file
cache fonts	rely on google fonts or other fonts being available offline after the user has visited your site
cache external orgins	cache external resources from external orgins for example boostrap css
workbox set config	workbox set config for debug or production builds
workbox window	add workbox window in your landing page for faster new service worker installs and refresh
workbox page reload	offer a page reload for users
workbox.cacheableResponse	cache based on numeric status code, the presence of a header with a specific value, or a combination of the two; learn more here

Setting up Workbox pre-cache

Command	Purpose and where to type
precache for npm	workbox precache config code snippet in your say sw-config.js file
workbox-cli devDependencies	adding workbox cli de dependancies in your package.json file
workbox injectManifest	add precache versioned urls config in your workbox service-worker.js file

Commands to type in your editor for NPM Workbox, 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.

Read more here

Command	Purpose and where to type
import workbox npm modules	import all workbox npm modules in your workbox service-worker.js file
workbox register route for npm	matching a route with a string, basically a block of a complete cache route for a resource(s)
workbox google analytics for npm	add offline google analytics in your workbox service-worker.js file, at the bottom.

Advanced Progressive Web Apps Features

Add Background Sync - To your javascript source folder, create an empty backgroundSync.js file and type the following
keyword in it to add backgroud sync

Command	Purpose and where to type
background sync	add background sync in your new backgroundSync.js file