Build Progressive Web Apps in VS Code on the go and like a pro. We have Workbox Support fully stacked too.
About pwafire.org
Our mission is to make your webdev environment fully stacked up for best web development practices with Progressive Web Apps.
We have an Official Developer Guide published here and updated with latest update for this Extension.
Setting up the PWA Development Environment
We have a pwadev tips repo available here to help guide you if you're just starting up or want to have your setup checklist done right.
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 |
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
Demo with PWA VS Code in play
Load preview in your browser here
Known Issues
All good to go with 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 : )
Top comments (0)