/pwa-for-production

Demo app for Smashing TV "PWA For Production In 1-2-3" course

Primary LanguageJavaScript

Demo of Workbox-driven (v4) bundled service worker

Slides

Sending the Angular app into deep, deep offline with Workbox

Prerequisites

  1. Latest stable versions of node, npm installed.
  2. Static web server with SPA support:
  • serve. Recommended and pre-configured.
  • superstatic. Use this as a fallback option.

Install

  1. Clone the repo
git checkout workbox-v4-bundle
npm install

Install/update Angular CLI

npm uninstall -g angular-cli
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

Check the version:

npm list @angular/cli version -g

The output should be at least 6.x.x

Checking the app

  1. In the terminal
ng serve
  1. Open http://localhost:4200/. You should see the page with PWA For Production header.
  2. "Ctrl-C" to stop the app.

Creating a production build and serving it via external web server

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.