Ionic Progressive Web App checklist

March 5, 2018, 8:05 am Categories:

Categories

From Service Workers to Web App Manifests our Ionic projects have pretty solid Progressive Web App (PWA) support by default.

That said there's always room for some adjustments and enhancements as well as steps we need to take when publishing our project as a production ready PWA - which is where the following checklist comes in.

1. Enable Service Workers

Within your project's src/index.html file uncomment the following <script> block to enable Service Workers on behalf of your Ionic PWA:

<!-- un-comment this code to enable service worker
<script>
  if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
      .then(() => console.log('service worker installed'))
      .catch(err => console.error('Error', err));
}
</script>-->

2. Optimise your Web App Manifest

The default Web App Manifest for the Ionic application - located at src/manifest.json - features the following configuration/values:

{
  "name": "Ionic",
  "short_name": "Ionic",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [{
    "src": "assets/imgs/logo.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "background_color": "#4e8ef7",
  "theme_color": "#4e8ef7"
}

We can optimise this default Web App Manifest file to include additional icons (you will need to supply the application icon file at 512 x 512 pixels) and further fields with the following online Manifest generator.

After using this tool our project Web App Manifest might, as the following example from the previous tutorial demonstrates, look like this (be sure to place all generated icon PNG files into the project's assets/imgs directory):

{
  "name": "Communicata",
  "short_name": "Communicata",
  "description": "A realtime chat application built with Ionic and Socket.io",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [
    {
      "src": "assets/imgs/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/imgs/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/imgs/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/imgs/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/imgs/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/imgs/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/imgs/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/imgs/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null,
  "orientation": "portrait",
  "background_color": "#2196f3",
  "theme_color": "#2196f3"
}

3. Optimise the Meta Viewport tag

The default meta viewport tag for an Ionic application is as follows:

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Unfortunately the Google Chrome Lighthouse plugin complains about this tag, when using this tool to perform an audit on the production ready PWA, with the following error warning:

Invalid properties found: {"viewport-fit":"cover"}

This warning can safely be ignored if you wish BUT if passing the Lighthouse audits matters then you can change the meta viewport tag to the following instead:

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

4. Remove Cordova scripting

A Progressive Web App has no need for Cordova support in the form of Ionic Native/Apache Cordova plugins so you can safely remove the following <script> tag from the project's src/index.html file:

<script src="cordova.js"></script>

5. Configure - if necessary - iOS specific meta tags

An Ionic project's src/index.html file includes the following iOS specific meta tags:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

These default values function perfectly well but if you felt inclined to change the apple-mobile-web-app-status-bar-style value you could always choose from the following options:

  • black - status bar is set to black with web content displayed underneath this
  • default - status bar is set to normal with web content displayed underneath this
  • black-translucent - web content is displayed on the entire screen and is partly obscured by the status bar

6. Run a production build

Once your Ionic project's codebase is ready for publishing simply run the following CLI command, at the root of the project, to generate a production ready PWA:

npm run ionic:build --prod

7. Publish to secure hosting

A PWA needs to be served from a secure server so choose a host that offers SSL certificates with their hosting packages (if you haven't already done so OR, if you're feeling brave, implement your own).

A good choice for Ionic PWAs is Firebase Hosting.

8. Audit your PWA

Use the Google Chrome Lighthouse plugin to test your Ionic PWAs, catch any errors, warnings or tips for best practice and ensure your application is performing optimally.

In Summary

Hopefully you found the above checklist useful for ticking off Progressive web App development tasks with Ionic and be sure to check out, if you haven't already done so, my previous tutorial on creating, publishing, hosting and testing an Ionic PWA.

If you've enjoyed what you've read and/or found this helpful please feel free to share your comments, thoughts and suggestions in the comments area below.

I explore different aspects of working with the Ionic framework in my e-book featured below and if you're interested in learning more about further articles and e-books that I'm writing please sign up to my FREE mailing list.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

Top