AWS Amplify Ionic PWA

auth.scss

page-auth {

	.amplify-authenticator {
	  @extend .card;
	  padding-bottom: 1em;
	}

	.amplify-form-input {
	  @extend .text-input;
	  @extend .text-input-md;
	  padding: 1em 0;
	}

	.amplify-form-body {
	  padding: 1.5em;
	}

	.amplify-form-row {
	  display: 'flex';
	}

	.amplify-form-cell-left {
	  float: left;
	  margin: 8px 0 8px 8px;
	}

	.amplify-form-cell-right {
	  float:right;
	  margin: 8px 8px 8px 0;
	}

	.amplify-form-link {
		@extend .button;
		@extend .item-button;
	}

	.amplify-form-button {
	  @extend .button-md;
	}

	.amplify-footer {
	  clear: both;
	}

	.amplify-form-message-error {
	  margin: 0.5em 0 0.5em 2em;
	  clear: both;
	  color: orangered;
	}

	.amplify-greeting {
		padding: 1em;
	}

	/** Storage Components **/

	.amplify-photo-picker-container {
	  width: 100%;
	  margin: 0 auto;
	  padding: 1em;
	}

	.amplify-photo-picker-preview {
	  width: 90%;
	}

	.amplify-album-container {
	  width: 100%;
	  margin: 0 auto;
	  padding: 1em;
	}

	.amplify-image-container {
	  width:100%;
	}

	.amplify-image {
	  width:100%;
	}

}

service-worker.js

/**
 * Check out https://googlechromelabs.github.io/sw-toolbox/ for
 * more info on how to use sw-toolbox to custom configure your service worker.
 */


'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/vendor.js',
    './build/main.css',
    './build/polyfills.js',
    'index.html',
    'manifest.json'
  ]
);

addEventListener('push', (event) => {
	console.log('[Service Worker] Push Received.');
	console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);

	if (!(self.Notification && self.Notification.permission === 'granted')) {
    	return;
  	}
	var data = {};
  	if (event.data) {
  		try {
    		data = event.data.json();
    	} catch(error) {
    		data = {
    			'title': 'Push Notifications',
    			'message': event.data.text()
    		}
    	}
	}
	var title = data.title || "Web Push Notification";
	var message = data.message || "New Push Notification Received";
	var icon = "images/notification-icon.png";
	var badge = 'images/notification-badge.png';
  	var options = {
    	body: message,
		  icon: icon,
		  badge: badge
	};
	event.waitUntil(self.registration.showNotification(title,options));
});

addEventListener('notificationclick', (event) => {
	console.log('[Service Worker] Notification click: ', event);
	event.notification.close();
	event.waitUntil(
		clients.openWindow('https://aws.github.io/aws-amplify')
	);
});

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

// 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;