Skip to content

PWA Configuration

Jump to bottom
David Graham edited this page May 1, 2018 · 7 revisions

In this section of the tutorial we'll discuss what's involved in a PWA...

Understanding PWA

There's lots of information available on the Web about PWA's so I won't try to duplicate that here. Here's some of the links you can take a look at:

In summary, a PWA is an app that can easily be added to the homescreen and used without a browser bar. PWA's can also be tuned to do more offline. The app feels and acts more like a Native app.

Manifest

The Manifest file is used to configure your PWA (not to be confused with your Webpack Chunk Manifest file). The file gets copied from your static folder (and also the icons in static/img/):

static/manifest.json

{
  "name": "vue-example-project",
  "short_name": "example",
  "icons": [
    {
      "src": "/vue-example-project/static/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/vue-example-project/static/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/vue-example-project/",
  "scope": "/vue-example-project/",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#00d1b2"
}

Service Worker

The Service Worker allows for offline mode and is generated by the Webpack plugin:

build/webpack.prod.conf.js

// ...

  plugins: [

    // ...

    // service worker caching
    new SWPrecacheWebpackPlugin({
      cacheId: 'vue-example-project',   // <-- Update this id for your app.
      filename: 'service-worker.js',
      staticFileGlobs: ['dist/**/*.{js,html,css}'],
      minify: true,
      stripPrefix: 'dist/'
    })

After you npm run build for production you'll see it appear in your /dist folder.

The View Port

The proper view port (so that both desktop and mobile devices scale correctly) has been set via a meta tag in index.html.

index.html

<meta name="viewport" content="width=device-width, initial-scale=1">

Setting Up HTTPS

To take full advantage of a PWA (so that mobile devices will correctly consider your app a PWA and service works can work) you will need to serve your app over HTTPS.

Create your own Self-Signed SSL for testing on your localhost

You can read how to set up SSL on your localhost nginx server here: https://www.digitalocean.com/community/tutorials/how-to-create-a-self-signed-ssl-certificate-for-nginx-in-ubuntu-16-04.

Github Pages HTTPS

https://blog.github.com/2018-05-01-github-pages-custom-domains-https/

CloudFlare Free HTTPS

CloudFlare offers free HTTPS. Here are the steps you'll need to take:

  1. Make sure you setup your github.io (ie. prograhammer.github.io) to allow for your domain name (ie. prograhammer.com). You'll go to settings in your github.io repo and add www.your-domain.com (ie. www.prograhammer.com) there. You'll also need to add a file named CNAME that contains www.your-domain.com (ie. www.prograhammer.com).
  2. Sign up for free CloudFlare account for www.your-domain.com
  3. Go to CloudFlare's DNS tab:
    -- Copy CloudFlare's nameservers and go to your registrar (where you purchased your-custom-domain) and add them there so your registrar will now point to CloudFlare's NameServers to resolve.
    -- Add a flat CNAME rule, for example: CNAME * prograhammer.github.io
  4. Make sure you have turned on SSL. See the section "Domain Summary" in the Overview tab. Make sure you have it set for full.
  5. Go to CloudFlare's Page Rules tab and add the rule http://*.your-domain.com/* with settings as Always Use HTTPS.
  6. Wait for a few hours (up to 24) and then Github should pick it up and it should work.
  7. Turn off CloudFlare caching temporarily by turning on "Dev" mode so you can see changes immediately reflected online.
Clone this wiki locally