WITH

Build a real-time PWA

WITH Build a real-time PWA AND

By Ouadie LAHDIOUI

	if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('./sw-test/sw.js')
	.then((reg) => {
	// registration worked
	console.log('Registration succeeded. Scope is ' + reg.scope);
	}).catch((error) => {
	// registration failed
	console.log('Registration failed with ' + error);
	});
	}

	if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('./sw-test/sw.js')
	.then((reg) => {
	// registration worked
	console.log('Registration succeeded. Scope is ' + reg.scope);
	}).catch((error) => {
	// registration failed
	console.log('Registration failed with ' + error);
	});
	}

	self.addEventListener('install', (event) => {
	event.waitUntil(
	caches.open('v1').then((cache) => {
	return cache.addAll([
	'/sw-test/index.html',
	'/sw-test/style.css',
	'/sw-test/app.js',
	'/sw-test/logo.jpg',
	]);
	})
	);
	});

	self.addEventListener('install', (event) => {
	event.waitUntil(
	caches.open('v1').then((cache) => {
	return cache.addAll([
	'/sw-test/index.html',
	'/sw-test/style.css',
	'/sw-test/app.js',
	'/sw-test/logo.jpg',
	]);
	})
	);
	});

	self.addEventListener('fetch', (event) => {
	event.respondWith(
	caches.match(event.request).then((response) => {
	return response \|\| fetch(event.request);
	})
	);
	});

	self.addEventListener('push', function(event) {
	const title = 'PWA man!';
	const options = {
	body: 'Hey Devoxxians!',
	icon: 'images/devoxx.png'
	};
	event.waitUntil(self.registration.showNotification(title, options));
	});

	Installed packages for tooling via yarn.
	CREATE ngsw-config.json (585 bytes)
	CREATE src/manifest.webmanifest (1063 bytes)
	CREATE src/assets/icons/icon-128x128.png (1253 bytes)
	CREATE src/assets/icons/icon-144x144.png (1394 bytes)
	CREATE src/assets/icons/icon-152x152.png (1427 bytes)
	CREATE src/assets/icons/icon-192x192.png (1790 bytes)
	CREATE src/assets/icons/icon-384x384.png (3557 bytes)
	CREATE src/assets/icons/icon-512x512.png (5008 bytes)
	CREATE src/assets/icons/icon-72x72.png (792 bytes)
	CREATE src/assets/icons/icon-96x96.png (958 bytes)
	UPDATE angular.json (3574 bytes)
	UPDATE package.json (1350 bytes)
	UPDATE src/app/app.module.ts (604 bytes)

	{
	"$schema": "./node_modules/@angular/service-worker/config/schema.json",
	"index": "/index.html",
	"assetGroups": [
	{
	"name": "app",
	"installMode": "prefetch",
	"resources": {
	"files": [
	"/favicon.ico",
	"/index.html",
	"/*.css",
	"/*.js"
	]
	}
	}, {
	"name": "assets",
	"installMode": "lazy",
	"updateMode": "prefetch",
	"resources": {
	"files": [
	"/assets/**",
	"/*.(eot\|svg\|cur\|jpg\|png\|webp\|gif\|otf\|ttf\|woff\|woff2\|ani)"
	]
	}
	}
	]
	}

	@NgModule({
	declarations: [
	AppComponent
	],
	imports: [
	BrowserModule,
	AppRoutingModule,
	ServiceWorkerModule.register(
	'ngsw-worker.js',
	{ enabled: environment.production }
	)
	],
	providers: [],
	bootstrap: [AppComponent]
	})
	export class AppModule { }

	@Injectable()
	export class updateService {

	constructor(updates: SwUpdate, toastr: ToastrService) {

	updates.available.subscribe(event => {
	toastr.refresh('A new version is available');
	});

	}

	}

	constructor(private swPush: SwPush) {}

	subscribeToNotification() {
	this.swPush.requestSubscription({
	serverPublicKey: this.VAPID_PUBLIC_KEY
	})
	.then(sub => this.sendSubcriptionToBackend(sub))
	}

	handleNotification() {
	this.swPush.notificationClicks.subscribe( event => {
	const dataFromBackend = event.notification.data;
	doSemthing(dataFromBackend);
	});
	}

	ng add apollo-graphql

	CREATE src/app/graphql.module.ts (628 bytes)
	UPDATE package.json (1728 bytes)
	UPDATE tsconfig.json (572 bytes)
	UPDATE src/app/app.module.ts (1702 bytes)

	const uri = 'https://myapp.io/graphql';
	export function createApollo(httpLink: HttpLink) {
	return {
	link: httpLink.create({uri}),
	cache: new InMemoryCache(),
	};
	}

	@NgModule({
	exports: [ApolloModule, HttpLinkModule],
	providers: [
	{
	provide: APOLLO_OPTIONS,
	useFactory: createApollo,
	deps: [HttpLink],
	},
	],
	})
	export class GraphQLModule {}

	const GET_USERS = gql`users { email firstName lastName }`;

	constructor(private apollo: Apollo) { }
	getUsers() {
	this.apollo
	.watchQuery({
	query: GET_USERS,
	})
	.valueChanges
	.subscribe(result => {
	this.data = result.data && result.data.users;
	this.loading = result.loading;
	this.error = result.error;
	});
	}

	const CREATE_USER = gql`mutation createUser(user: CreateUserInput!) {
	createUser(user: $user) {id email firstName lastName}
	}`;

	constructor(private apollo: Apollo) { }
	createUser({ email, firstName, lastName }) {
	this.apollo.mutate({
	mutation: CREATE_USER,
	variables: {
	user: { email, firstName, lastName }
	}
	})
	.subscribe(
	user => this.user = user
	);
	}

	const CREATE_USER = gql`subscription {onUpdateTopic { id name active }}`;

	constructor(private apollo: Apollo) { }
	subscribeToUpdate({ email, firstName, lastName }) {
	return this.apollo
	.subscribe({
	query: gql`${subscription}`,
	})
	.subscribe(
	topic => this.topic = topic
	);
	}

	import { AUTH_TYPE, AWSAppSyncClient } from 'aws-appsync';
	import { environment } from 'src/environments/environment';

	@NgModule({
	exports: [ApolloModule, HttpLinkModule],
	})
	export class GraphQLModule {
	constructor(apollo: Apollo) {
	const client: any = new AWSAppSyncClient({
	url: environment.aws.aws_appsync_graphqlEndpoint,
	region: environment.aws.aws_project_region,
	auth: {
	type: AUTH_TYPE.API_KEY,
	apiKey: environment.aws.aws_appsync_apiKey
	}
	});
	apollo.setClient(client);
	}
	}

	$ npm install -g @aws-amplify/cli

	$ amplify init

	$ amplify add api
	? Please select from one of the below mentioned services: GraphQL
	..
	? Do you have an annotated GraphQL schema? Yes
	? Provide your schema file path: src/schema.graphql
	GraphQL schema compiled successfully.

	$ amplify push
	√ Downloaded the schema
	√ Generated GraphQL operations successfully and saved at src\graphql
	√ Code generated successfully and saved in file src\app\API.service.ts

	GraphQL endpoint: https://xxxx.appsync-api.us-east-1.amazonaws.com/graphql
	GraphQL API KEY: da2-xxxxx