Progressive

Web Apps

using the Angular Mobile Toolkit

Maxim Salnikov

@webmaxru

  • Google Developer Expert in Angular

  • AngularJS Oslo Meetup organizer

  • ngVikings conf organizer

Products from the future

UI Engineer at ForgeRock

Google Experts are a global network of experienced product strategists, designers, developers and marketing professionals actively supporting developers, startups and companies changing the world through web and mobile applications.

Google Developer

Experts

https://developers.google.com/experts/

https://ngvikings.org

Websites timeline

Static

 

Dynamic

 

AJAX

 

RWD

 

PWA

Progressive Web App

https://en.wikipedia.org/wiki/Progressive_web_app​

... Progressive Web App can be seen as an evolving hybrid of regular web pages (or websites) and a mobile application...

PWA?

  • Progressive
  • Discoverable
  • Linkable
  • App-like
  • Responsive
  • Connectivity-independent
  • Re-engageable
  • Installable
  • Fresh
  • Safe

AppShell

Service

Worker

Manifest

Push

Service worker

  • Make the website function offline

  • Increase online performance by reducing network requests for certain assets

  • Provide a customized offline fallback experience

of PWA

Involved APIs

  • Promises

  • Cache API

  • Fetch API

  • Notifications API

  • Push API

CanIUse?

https://jakearchibald.github.io/isserviceworkerready/​

Mobile Toolkit

https://mobile.angular.io

Mobile Toolkit

https://cli.angular.io

ng new myApp --mobile

The --mobile flag has been disabled temporarily while we await an update
of angular-universal for supporting NgModule. Sorry for the inconvenience.

Mobile Toolkit

https://cli.angular.io

Mobile Toolkit

https://www.npmjs.com/~angular​

App Shell

App Shell

https://www.npmjs.com/package/@angular/app-shell

<html>
  <body>
    <app-root-component>
      <h1>Loading...</h1>
    </app-root-component>
  </body>
</html>
<html>
 <body>
    <app-root-component>
      <style>...</style>
      <div class="md-header">
        <h3>Angular2Paris</h3>
      </div>
      <div class="md-progress-bar"></div>
    </app-root-component>
 </body>
</html>

App Shell

https://www.npmjs.com/package/@angular/app-shell

<html>
 <body>
    <app-root-component>
        <md-toolbar color="primary">

        <span>{{title}}</span>

        </md-toolbar>

        <md-progress-bar mode="indeterminate"></md-progress-bar>
    </app-root-component>
 </body>
</html>

App Shell

https://www.npmjs.com/package/@angular/app-shell

<html>
  <style>md-toolbar { display: flex; box-sizing: border-box;...</style>

  <body>
      <app-root-component _nghost-cb4a-1="">

      <md-toolbar _ngcontent-cb4a-1="" color="primary" class="md-primary" ng-reflect-color="primary">
        <div class="md-toolbar-layout">
          <md-toolbar-row> 
            <span _ngcontent-cb4a-1="">Angular2Paris</span>
          </md-toolbar-row>
        </div>
      </md-toolbar>

      <md-progress-bar _ngcontent-cb4a-1="" aria-valuemax="100" aria-valuemin="0" mode="indeterminate" role="progressbar" _nghost-cb4a-3="" ng-reflect-mode="indeterminate" aria-valuenow="0"> <div _ngcontent-cb4a-3="" class="md-progress-bar-background"></div> <div _ngcontent-cb4a-3="" class="md-progress-bar-buffer"></div> <div _ngcontent-cb4a-3="" class="md-progress-bar-primary md-progress-bar-fill" ng-reflect-ng-style="[object Object]" style="transform:scaleX(0);"></div> <div _ngcontent-cb4a-3="" class="md-progress-bar-secondary md-progress-bar-fill"></div> </md-progress-bar>

    </app-root-component>
  </body>
</html>

App Shell

https://www.npmjs.com/package/@angular/app-shell

import { UniversalModule } from 'angular2-universal';

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    AppModule,
    UniversalModule.withConfig({
      ...
    }),
})
export class AppShellModule {}

platformUniversalDynamic()
  .serializeModule(ShellModule)
  .then(html => console.log(html));

App Shell

https://www.npmjs.com/package/@angular/app-shell

# Install app-shell utility from github.com/angular/mobile-toolkit
$ npm install --save @angular/app-shell
// App code
import {AppShellModule} from '@angular/app-shell';

// In NgModule used for Universal prerendering:
AppShellModule.prerender()

// At runtime:
AppShellModule.runtime()

App Shell

https://www.npmjs.com/package/@angular/app-shell

@Component({
  selector: 'app-root-component',
  template: `
    <!-- Only show loading indicator in the shell -->
    <loading-indicator *shellRender>
    </loading-indicator>

    <!-- Hide a dynamic view until runtime -->
    <dynamic-view *shellNoRender>
    </dynamic-view>
    `
})
export class AppRootComponent {}

Service Worker

Service Worker

@angular/service-worker/bundles

@angular/service-worker/build

@angular/service-worker/companion

@angular/service-worker/worker

@angular/service-worker/plugins

Pre-fetching and caching

https://www.npmjs.com/package/@angular/service-worker

# First, install the Angular Service Worker
$ npm install --save @angular/service-worker
<script type="text/javascript">
  // Require worker-basic.min.js copied to deploy directory from
  // node_modules/@angular/service-worker/bundles 

  // Feature detection guards against older browsers that don't
  // support service workers.
  if (navigator.serviceWorker) {
    navigator.serviceWorker.register('/worker-basic.min.js');
  }
</script>

Pre-fetching and caching

https://www.npmjs.com/package/@angular/service-worker

ngsw-manifest.json:

{
  "static": {
    "urls": {
      "/index.html": "ae543...",
      "/app.js": "9ff18...",
      "/logo.png": "0e33a...",
      ...
    }
  }
}
/**
 * Gulp tasks that generates a basic Angular service worker manifest.
 */
gulpGenerateManifest()
gulpAddStaticFiles(files, options)
/**
 * Webpack plugin that generates a basic Angular service worker manifest.
 */
AngularServiceWorkerPlugin(manifestFile, manifestKey)

Dynamic Caching

https://www.npmjs.com/package/@angular/service-worker

{
  ...,
  "dynamic": {
    "match": [{
      "url": "/api",
      "prefix": true,
      "strategy": "fastest"
      "invalidate": [...]
    }]
  }
}

Coming soon

Companion

import {ServiceWorkerModule} from '@angular/service-worker';

@NgModule({
    declarations: [
        DashboardComponent
    ],
    exports: [
        DashboardComponent
    ],
    imports: [
        ...
        ServiceWorkerModule
    ],
    providers: []
})

Companion

import {NgServiceWorker} from '@angular/service-worker';

constructor(public sw: NgServiceWorker) {
    sw.log().subscribe(message => this.log.push(message));
}
this
    .sw
    .checkForUpdate()
    .subscribe(res => {
        this.result = JSON.stringify(res);
    });
this
    .sw
    .ping()
    .subscribe(res => {
        this.result = JSON.stringify(res);
    });

Worker

import {bootstrapServiceWorker} from '../bootstrap';
import {StaticContentCache} from '../../plugins/static';
import {RouteRedirection} from '../../plugins/routes';
import {Push} from '../../plugins/push';

bootstrapServiceWorker({
  manifestUrl: '/ngsw-manifest.json',
  plugins: [
    StaticContentCache(),
    RouteRedirection(),
    Push(),
  ],
});

Push notifications

Backend

Push Service

Service worker

Push notifications

ngsw-manifest.json:

{
  ...,
  "push": {
    "showNotifications": true
  }
}
manifest.webapp

{
  ...,
  "gcm_sender_id": "12345"
}

Push notifications

# web-push package nicely handles details of pushing data
$ npm install --save web-push
const webPush = require('web-push');
webPush.setGCMAPIKey(...);

let payload = {
  notification: {
    title: 'Hello from the server', body: '...', icon: '/icon.png'
  }
};
webPush.sendNotification({
  payload: new Buffer(JSON.stringify(payload)), …
});

Web Push Protocol

Push notifications

const webPush = require('web-push');
webPush.setGCMAPIKey(...);
webPush.setVapidDetails(
  'mailto:salnikov@gmail.com',
  'BHe82datF...',
  's-zBxZ1Kl...'
);

Push notifications

import {NgServiceWorker} from '@angular/service-worker';


// Inject an API for communicating with the Angular service worker
export class PushService {
  constructor(worker: NgServiceWorker) {

    worker.registerForPush().subscribe(endpoint => {
      // Send endpoint data to the server to complete registration
    };

    worker.push.subscribe(payload => {
      // Process payload
    });

  }
}

Mobile Toolkit

http://angularconnect.com​

Hold On!

Merci beaucoup!

@webmaxru

Maxim Salnikov

Progressive Web Apps using the Angular Mobile Toolkit

By Maxim Salnikov

Made with Slides.com

Progressive Web Apps using the Angular Mobile Toolkit

The term Progressive Web App refers to a group of technologies, such as service workers, and push notifications, that can bring native-like performance and user experience to web apps. Progressive Web Apps are interesting because in some ways they represent a coming of age for the Web. The Angular Mobile Toolkit makes it easy to build snappy Web apps that load instantly on any device, even without an internet connection. Take advantage of the searchability, shareability, and no-install-required-ability of the Web without compromise. During this 100% hands-on session we'll have a look on recent tools and guides from Angular team to help us build Progressive Web Apps. We'll have a look at Angular CLI and plugins/libraries for App Shell, Service Worker, and Application Manifest supporting us in fast and easy creation of installable, offline-capable, mobile-network-friendly apps. Agenda Introduction to PWA and Workshop Setup Introduction to Angular Mobile Toolkit Create an installable mobile web app with Angular CLI Make the App Installable with Web App Manifest App Shell Architecture Add an app shell component to the App Deep dive into Service Workers Add basic offline capabilities with Service Worker Adding Splash Screen Sending Push Notifications Questions and answers

  • 3,698

More from Maxim Salnikov