Example for a super simple PWA with webpack.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 25327b4 Feb 11, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Fix typo Jan 31, 2017
images small bugfixes Jan 25, 2017
.gitignore Intitial commit Jan 25, 2017
README.md Fixed typo in README.md Feb 1, 2017
package.json allow to publish both version to gh-pages Jan 30, 2017
webpack.config.js improved SW caching Feb 10, 2017

README.md

webpack-pwa

Super simple webpack PWA(Progressive Web App) example featuring

  • Routing with On Demand Loading
  • Offline support
  • Fetching some data from network
  • Two approaches
    • App Shell
    • Page Shell
  • By intent: No framework, only simple JavaScript and DOM
    • Yes with innerHTML and innerText
    • Feel free to imagine your favorite framework here.

Build and Run it

npm install
npm run build-shell
cd dist
npm install node-static -g
static
open http://localhost:8080/dashboard.html

This builds the App Shell version.

To build the Page Shell version: replace npm run build-shell with npm run build-page.

Architecture

app shell vs page shell

App Shell

  • Total size is smaller
  • Initial load requests three files: login.html, shell-1234.js, 3456.js
  • Initial load needs to load: Shell + Router + content
  • The shell is visible earlier than with Page Shell approach.

Page Shell

  • Total size is bigger (i. e. dashboard content is in dashboard-1234.js and 4567.js)
    • App takes longer to be offline ready.
  • Initial load requests only two files: login.html, login-2345.js
  • Initial load needs to load: Shell + content
  • The shell + content is visible earlier than with App Shell approach.

A hybrid approach can be used where shell and content is separated in two requests (see admin page as example). This makes sense when content is much bigger than shell and shell should be visible earlier.