Progressive Web Apps are user experiences that have the reach of the web, and are:

• Reliable – Load instantly and never show the downasaur, even in uncertain network conditions.
• Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.
• Engaging – Feel like a native app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.

Do PWAs only work on mobile? Or desktop?

Will PWAs kill native apps?

What is this Service Worker thing?

• What Web Can Do Today to see what behaviors are supported.
• is Service Worker ready? to see the browser support.

• They are JavaScript Workers, so they cannot access the DOM directly. Instead, a service worker can communicate with the pages it controls by responding to messages sent via the postMessage interface, and those pages can manipulate the DOM if needed.
• It is terminated when not in use and restarted when it is next needed, so you cannot rely on global state within a service worker’s onfetch and onmessage handlers. But, if there is information that you need to persist and reuse across restarts, service workers do have access to the IndexedDB API.
• Service Workers make extensive use of promises, so if you are new to promises, I recommend checking out this excellent blog post.
• They only run on HTTPS connections. During development you will be able to use service worker through localhost, but to deploy it on a site you will need to have HTTPS setup on your server. This is because using a service worker you can hijack connections, fabricate, and filter responses. Powerful stuff. So you might use that stuff to better your app, but a man-in-the-middle attack might not.

How do I create links? After all, it is a web app.

PWA, here we come!

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js')
      .then(() => console.log('service worker installed'))
      .catch(err => console.log('Error', err));
  }
</script>

Further Optimizations

<!-- cordova.js required for cordova apps -->
<!--<script src="cordova.js"></script>-->

import { Component } from '@angular/core';
import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = TabsPage;

  constructor() {}
}

Web Manifest and Service Worker

{
  "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"
}

• "name": "Ionic", => This is the name of our application.
• "short_name": "Ionic", => This is our short name, used when there’s not enough space for the name. It is most commonly used when the user adds the application to the home screen.
• "start_url": "index.html", => This is the URL the app is going to open to.
• "display": "fullscreen", => Defines the developer’s preferred display mode for the web application. When using fullscreen all of the available display area is used, and no browser chrome is shown.
• The icons object lets you set the icons your app will use depending on the resolution of the screen. The highest resolution icon (512×512) will also be shown on the splash screen of the application

"icons": [{
  "src": "assets/imgs/logo.png",
  "sizes": "512x512",
  "type": "image/png"
}]

• "background_color": "#4e8ef7", => Defines the expected background color for the web application.
• "theme_color": "#4e8ef7" => Defines the default theme color for an application. This will affect things such as the notification bar color on Android.

'use strict';

importScripts('./build/sw-toolbox.js');

self.toolbox.options.cache = {
  name: 'ionic-cache'
};

// pre-cache our key assets
self.toolbox.precache(
  [
    './build/main.js',
    './build/main.css',
    './build/polyfills.js',
    'index.html',
    'manifest.json'
  ]
);

// dynamically cache any other local assets
self.toolbox.router.any('/*', self.toolbox.cacheFirst);

// for any other requests go to the network, cache,
// and then only use that cached resource if your user goes offline
self.toolbox.router.default = self.toolbox.networkFirst;

Deploying

npm run ionic:build -- --prod