https://github.com/johnpapa/vscode-pwa
VS Code Extension for PWA Tools
https://github.com/johnpapa/vscode-pwa
Last synced: about 1 month ago
JSON representation
VS Code Extension for PWA Tools
- Host: GitHub
- URL: https://github.com/johnpapa/vscode-pwa
- Owner: johnpapa
- License: mit
- Created: 2017-06-11T01:20:21.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-06-14T15:17:42.000Z (over 8 years ago)
- Last Synced: 2024-12-29T09:32:08.995Z (10 months ago)
- Language: TypeScript
- Size: 737 KB
- Stars: 39
- Watchers: 5
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: code_of_conduct/LICENSE
Awesome Lists containing this project
README
# VS Code Extension for PWA Tooling
VS Code Extension for PWA Tools
This extension for Visual Studio Code adds snippets and JSON schema for a `manifest.json` for creating Progressive Web Apps (PWA).
**THIS IS AN ALPHA VERSION**
See the [CHANGELOG](CHANGELOG.md) for the latest changes
## Usage
Type part of a snippet, press `enter`, and the snippet unfolds.
### JavaScript / TypeScript Snippets
```javascript
pwa-custom-service-worker // create a service worker file which can be extended
pwa-register // function that registers the service worker
```
### JavaScript Snippets
```javascript
// Helpful for build processes that generate service worker code
pwa-inject-precache // inject precache list into service worker
pwa-generate-service-worker // generate a service worker with a precache manifest
// Event listeners
pwa-event-push // create a event listener for push
pwa-event-sync // create a event listener for sync
pwa-event-notificationclick // create a event listener for notificationclick
pwa-event-pushsubscriptionchange // create a event listener for pushsubscriptionchange
pwa-event-load // create a event listener for load
pwa-event-activate // create a event listener for activate
pwa-event-install // create a event listener for install
pwa-event-fetch // create a event listener for fetch
```
### HTML Snippets
```javascript
pwa-manifest-link // create the link to the manifest.json
pwa-apple-mobile-web-capable // add the meta tag for apple mobile web capable
```
### JSON Snippets
```javascript
pwa-manifest // create the contents of `manifest.json`
```
Alternatively, press `Ctrl`+`Space` (Windows, Linux) or `Cmd`+`Space` (OSX) to activate snippets from within the editor.
## Installation
1. Install Visual Studio Code 1.10.0 or higher
2. Launch Code
3. From the command palette `Ctrl`-`Shift`-`P` (Windows, Linux) or `Cmd`-`Shift`-`P` (OSX)
4. Select `Install Extension`
5. Choose the extension `PWA-Tools`
6. Reload Visual Studio Code
## Try it Out
Let's take a PWA for a spin. Using the Angular CLI, let's generate a new app and add PWA features.
Before we begin, install the Angular CLI and lite-server, if you haven't already done so, by running `npm i @angular/cli lite-server -g`
1. Create an Angular app with `ng new my-app --routing` and open the app in VS Code
1. Create `src/manifest.json`
1. Use the `pwa-manifest` snippet
1. Open `src/index.html` and use the `pwa-manifest-link` snippet (in the element)
1. Use the pwa-apple-mobile-web-capable snippet (in the element)
1. Create `generate-sw.js`
1. Run `cd my-app` and then `npm i workbox-build` (add --save if you're using npm < 5.x)
1. Use the pwa-generate-service-worker in `generate-sw.js`
1. Add "manifest.json" to the `apps[0].assets` array in `.angular-cli.json`
1. Open `src/app/main.ts` and run `pwa-register` at the bottom
1. Call `.then(() => registerServiceWorker());` after bootstrapping
1. Run `ng build --prod && node generate-sw.js && cd dist && lite-server`
**Now test it!**
Your app should be running in the browser. Open the developer tools, go to the `Application` tab, and select `Service Workers`. Inspect the service worker, and try to go offline and refresh.