https://github.com/webmaxru/pwa-for-production
Demo app for Smashing TV "PWA For Production In 1-2-3" course
https://github.com/webmaxru/pwa-for-production
Last synced: about 1 year ago
JSON representation
Demo app for Smashing TV "PWA For Production In 1-2-3" course
- Host: GitHub
- URL: https://github.com/webmaxru/pwa-for-production
- Owner: webmaxru
- Created: 2019-03-04T07:37:20.000Z (over 7 years ago)
- Default Branch: part-1-init
- Last Pushed: 2022-12-30T06:53:25.000Z (over 3 years ago)
- Last Synced: 2025-03-28T23:11:24.259Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://www.smashingmagazine.com/smashing-tv/pwa-1/
- Size: 1.98 MB
- Stars: 7
- Watchers: 2
- Forks: 3
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Demo of Workbox-driven (v4) bundled service worker
## Slides
[Sending the Angular app into deep, deep offline with Workbox](https://slides.com/webmax/angular-workbox/)
## Prerequisites
1. Latest stable versions of `node`, `npm` installed.
2. Static web server with SPA support:
- [serve](https://www.npmjs.com/package/serve). Recommended and pre-configured.
- [superstatic](https://www.npmjs.com/package/superstatic). Use this as a fallback option.
## Install
1. Clone the repo
2.
```bash
git checkout workbox-v4-bundle
npm install
```
## Install/update Angular CLI
```bash
npm uninstall -g angular-cli
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest
```
Check the version:
```bash
npm list @angular/cli version -g
```
The output should be at least `6.x.x`
## Checking the app
1. In the terminal
```bash
ng serve
```
2. Open [http://localhost:4200/](http://localhost:4200/). You should see the page with `PWA For Production` header.
3. "Ctrl-C" to stop the app.
## Creating a production build and serving it via external web server
```bash
npm run build-pwa-bundle
```
The `dist/pwa-for-production` folder should be created.
- If you use `serve`: Run `serve` and open `http://127.0.0.1:5000` in your browser.
You should see the page with `PWA For Production` header.
## We are ready to start the workshop! Follow the trainer instructions.