Skip to content

PWA Configuration

Jump to bottom
David Graham edited this page Jun 26, 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-pizza",
  "short_name": "Vue Pizza",
  "icons": [
    {
      "src": "/app/static/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/app/static/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/app/index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

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-pizza',   // <-- 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

Github pages now offers HTTPS. You can read more here: 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.

Install Banners and Add to Home Screen

You can read about install banners and "Add to Home Screen" here (includes notes on "testing" for them as well): https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/

Basically, it's just a popup indication from the mobile device that allows users to more easily add your app to their homescreen (allows for shortcut and opens without a browser bar). The restrictions are:

  • Has a web app manifest file with:
    • a short_name (used on the home screen)
    • a name (used in the banner)
    • a 144x144 png icon (the icon declarations must include a mime type of image/png)
    • a start_url that loads
  • Has a service worker registered on your site.
  • Is served over HTTPS (a requirement for using service worker).
  • Is visited at least twice, with at least five minutes between visits.

Clone this wiki locally