Future of mobile-toolkit for angular v4+ and cli v1+

[somombo]

I am interested in how all this affects the Mobile-toolkit Project.

Correct me if I'm wrong, but it seems that the mobile-toolkit was stagnated, in part, by dependency on angular-cli (--mobile flag removed) and angular-universal (used for app-shell)(used for app-shell).

So now that @angular/platform-server@4.0.0 merged the angular-universal core.. I am curious about the future of the mobile-toolkit.

I haven't seen any major new commits or updates to the angular-universal repo since the platform-server update. Does anyone here know the angular-universal repo/project discontinued? If so, does that mean the mobile-toolkit is as well?

Thanks

[webmaxru]

The return of --mobile flag is on hold. It's connected with architecting the more general idea of different platform types support in the CLI. It's under design at the moment. But the absence of this flag is not a blocker for using Mobile Toolkit.

The Mobile Toolkit contains 2 packages at the moment: @angular/service-worker and @angular/app-shell. Let me explain what's happening there.

@angular/app-shell
It called App Shell, but in the context of PWA it's actually "Advanced" App Shell. It's not about just providing a simple offline version of the app UI, but optimizing it for the first load (via server-side rendering) and providing better developer experience (by shellRender and shellNoRender directives). Unfortunately, this functionality is not yet integrated into CLI. But you can make it working by the manual setup. Bottomline: @angular/app-shell is not integrated into CLI yet, but we can build an actual, say, classic App Shell using...

@angular/service-worker
Now the adding of Angular Service Worker (NGSW) to your angular app is done by adding
"serviceWorker": true to .angular-cli.json, "apps[0]"
manually or via ng set apps.0.serviceWorker=true

Please notice, this way the idea was changed: instead of initial scaffolding --mobile app, now it's adding the PWA functionality to your existing (of newly generated) app.

After this setting, you have the App Shell of your app ready. Everything is done automatically (the offline version of your UI).

In addition to Static content cache (the base of App Shell idea), NGSW exposes useful methods for you to cover some other aspects of PWA (Push and Dynamic content caching at the moment). And it's under active development.

I'll present on this topic at ng-conf Automatic Progressive Web Apps using the Angular Mobile Toolkit - there will be a livestream available.

There is my Angular Mobile Toolkit workshop doc available with more details (a bit outdated, though).

Lack of fresh NGSW documentation is the main issue. I'm working on PR with the updated instructions.

[lautarobock]

Right now is not working. I cant import APP_SHELL_DIRECTIVES or providers.

[lacolaco]

@lautarobock FYI, this is my example repo of Angular 4 w/ platform-server and app-shell, and it works well.

https://github.com/laco0416/angular-plarform-server-example
Demo: https://laco0416.github.io/angular-plarform-server-example/

Currently, shellRender and shellNoRender are provided by AppShellModule. See https://github.com/laco0416/angular-plarform-server-example/blob/master/src/app/app.module.ts and https://github.com/laco0416/angular-plarform-server-example/blob/master/src/app/app.module.server.ts

import { AppShellModule } from '@angular/app-shell';

[lautarobock]

thanks @laco0416

Now I'm trying to use workers for caching data retrived from an endpoint.
Is that possible right now?

[lautarobock]

any news? @webmaxru? someone?

[StefanKert]

Also curious about the current status here. Is there a roadmap for mobile kit?

[Together-Robots]

waiting anxious for more documentation. I find the ngsw.manifest auto generation with webpack a bit difficult to understand.

[mgechev]

@Together-Robots you can follow this Google I/O talk for more information https://events.google.com/io/schedule/?section=may-18&sid=5bd70da9-c3b6-4b39-85c2-a8fbe140b7f2.

It's not much but should be a good start. After that we can follow up with more documentation.

[webmaxru]

Another workshop document covering all the current functionality of Mobile Toolkit (except server-side rendered app shell):
https://bit.ly/pwa-angularsummit-2017
I'm working on converting this 52-pages doc to set of Medium articles + set of PRs to the official documentation.

[somombo]

@webmaxru Just so I won't have to wade through all the 52 pages.. could you comment on what the differences are between this new doc and the one you posted earlier #138 (comment)

Thank you very much for all this by the way!

[webmaxru]

@somombo I added:

• Ignore option in Static content cache plugin
• Updated settings for Routing plugin
• External plugin
• Dynamic content cache plugin
• Workflow completely changes (from 3 to 9 steps)
• Fixed inconsistencies, mistakes

[somombo]

Thanks!

[jo3d3v]

I think this project has great implemented starting points to get an angular app to work as pwa with a minimum of configuration. There isn't an equal libary to cover the boilerplate code for creating a pwa with angular.
Really good parts:

• integration with angular-cli
• could be used as webpack plugin
• plugin concept with well written plugins:
  • dynamic
  • static auto generated and auto merged ngsw-manifest.json
  • push
  • ...
• companion service
• bedirectional messaging channels companion <-> service worker

But I miss a roadmap and some continuous implementation progress in the last year. With the release of angular 2 the angular mobile toolkit was announce as the upcoming pwa toolbox for angular. But currently it is marked as experimental.
What are the goals (architectural and functional) of the mobile toolkit and how can they be achieved?

I tested the mobile toolkit for a messenger app and I missed some features. Some of them are allready present as PR (#122, #137, #104). How can the merge process be accelerated?

Missed features:

• VAPID support for push
• adding custom plugins by ngsw-manifest.json
• adding custom plugins for events like notificationclick
• core plugins for notification events (click, actions, close)
• update on server triggered push
• update through timer
• provide service worker for dev mode not only for prod for testing purpose

What is the best way to support this project? (Under the condition it gets a roadmap...)

[webmaxru]

@jo3d3v
Very nice list!

Some comments:

• Support for VAPID landed a couple of hours ago 950f99f :)
• Adding custom plugins/events is possible (in a bit hackish way though), check the last step of my workshop: https://bit.ly/pwa-angularsummit-2017

[treyrich]

I think that the vapid support having been added is good, but there's still a lot of work to do to make this library actually usable for push notifications. One of the major things is to refactor the way that events happen to avoid warnings/issues like I raised in #134.

I know that @alxhub is busy, so I don't blame him for the slow progress, but I agree that for this project to succeed there's got to be a better way to contribute. I'd happily contribute in a large way towards making push notifications useful, but all issues/PRs I've opened have effectively been ignored so I'm not sure what course to take to speed things along. (Sorry @alxhub don't mean to be duplicative, but this is probably a better venue to discuss these issues than where we were last talking)