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

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?


35 Answers

✔️Accepted Answer

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.

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...

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.

Other Answers:

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

@somombo you can start exploring the new NGSW right now: I've published 2 articles covering more or less everything in the Angular Service Worker v5 (including how to emulate Angular CLI 1.6 NGSW support):

Update: looks like we are pretty much waiting on angular/angular#17276 to be merged. I expect/hope that once that's done, the angular-cli project will take a fresh look at implementing basic service-worker/pwa scaffolding/flags in the cli.

Hopefully the PR will make it to Angular v5... i haven't seen anything about "pwa" or "service workers" in the latest Angular 5 beta changelogs. Should we still expect this to land in Angular 5, @alxhub ?

Thanks for all your hard work and patience.

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...)

Related Issues:

mobile toolkit Future of mobile-toolkit for angular v4+ and cli v1+
The return of --mobile flag is on hold It's connected with architecting the more general idea of dif...