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?

Thanks

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.

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

@lautarobock

@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';

thanks @laco0416

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

@webmaxru

any news? @webmaxru? someone?

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

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

@Together-Robots

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

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.

@webmaxru

@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!

@somombo

@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

Thanks!

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

@jo3d3v

@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

@alxhub

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)

@somombo

@somombo Some clarifications: CLI-way (serviceWorker: true) will remain the main way to add NGSW to the application. ng-pwa-tools most likely will be baked into CLI as well as remain the separate tools for the cases when CLI is not an option.

@webmaxru

@webmaxru look forward to seeing in cli

@alxhub

@alxhub,

Thank you for the clarification. Now, I have an idea for the future of mobile toolkit. Once all preparations have be done for development of @angular/service-worker in https://github.com/angular/angular, please propagate it to the community (maybe this issue thread).

With "only encapsulate service worker boilerplate code" I meant all the code you have to write every time for a new PWA to register listeners, create communication channel between service worker and clients... and so on.

/slightly_offtopic: Everyone is welcome to continue this and many other PWA discussions in dedicated PWA slack team with almost 200 developers from different companies (incl. all major browsers and PWA libs): https://bit.ly/pwa-slack

@jo3d3v

@jo3d3v, et al, I have a preliminary port of @angular/service-worker into the Angular main repo on this branch: https://github.com/alxhub/angular/tree/service-worker

@alxhub

@alxhub is there an example for server push with express using ng-pwa-tools?

@alxhub

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.

@alxhub

Update: Looks like a preliminary port of @angular/service-worker has been merged into the main angular repo see PR angular/angular#19274. This is available now starting Angular v5.0.0-rc.0

It indroduces/includes:

@angular/service-worker: a library for use within Angular client apps to communicate with the service worker.

@angular/service-worker/gen: a library for generating ngsw.json files from glob-based SW config files.

@angular/service-worker/ngsw-worker.js: the bundled service worker script itself.

@angular/service-worker/ngsw-cli.js: a CLI tool for generating ngsw.json files from glob-based SW config files.

Thank you @alxhub! 🎉

Look forward to seeing some guidance on how we can start playing with these!

@alxhub

Final Angular v5 has officially been released See changelog. And it includes the @angular/service-worker package!

Now we wait patiently for some documentation/guidance from @alxhub

@StephenFluin, I found it odd that the official blog post announcement for the v5 release did not mention service-worker or pwa. Hopefully the team is still focused on making easy pwa dev a reality.

@somombo

@somombo We are definitely focused on making easy PWA dev a reality. We didn't announce the service worker changes because they have not yet landed with CLI support. Stay tuned!

@StephenFluin

@StephenFluin we really appreciate it! great work and thanks for your timely and continued feedback.

@somombo

@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):
https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7
https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-2-practice-3221471269a1

@webmaxru

@webmaxru That's great! Will be sure to check this out. Thanks for the feedback!

@webmaxru

Hi everyone, service worker and app-shell have landed stable support in @angular/cli v1.6+
Here are some useful resources:

Official Service worker docs https://angular.io/guide/service-worker-intro
Tutorial by @webmaxru https://alligator.io/angular/service-workers/
Updated .angular-cli.json schema https://github.com/angular/angular-cli/blob/master/packages/@angular/cli/lib/config/schema.json

I will now close this issue out. Feel free to comment on the future of app-shell and service worker in the main angular and angular-cli repos

Navigation Menu

Repository navigation

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

5 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

webmaxru commented on Mar 30, 2017

lautarobock commented on Mar 31, 2017

lacolaco commented on Apr 11, 2017

lautarobock commented on Apr 12, 2017

lautarobock commented on Apr 17, 2017

StefanKert commented on May 5, 2017

Together-Robots commented on May 9, 2017

mgechev commented on May 9, 2017

webmaxru commented on May 10, 2017

somombo commented on May 10, 2017

webmaxru commented on May 10, 2017

somombo commented on May 10, 2017

jo3d3v commented on May 11, 2017

webmaxru commented on May 11, 2017

treyrich commented on May 12, 2017

5 remaining items

webmaxru commented on May 21, 2017

somombo commented on May 21, 2017

jo3d3v commented on May 22, 2017

webmaxru commented on Jun 6, 2017

alxhub commented on Jun 6, 2017

playground commented on Jun 11, 2017

somombo commented on Sep 7, 2017

somombo commented on Oct 1, 2017

somombo commented on Nov 2, 2017

StephenFluin commented on Nov 4, 2017

somombo commented on Nov 4, 2017

webmaxru commented on Nov 4, 2017

somombo commented on Nov 5, 2017

somombo commented on Dec 9, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions