Skip to content
This repository has been archived by the owner on Oct 12, 2021. It is now read-only.

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

Closed
somombo opened this issue Mar 29, 2017 · 34 comments
Closed

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

somombo opened this issue Mar 29, 2017 · 34 comments

Comments

@somombo
Copy link

somombo commented Mar 29, 2017

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
Copy link
Member

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
Copy link

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

@lacolaco
Copy link

lacolaco commented Apr 11, 2017

@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
Copy link

thanks @laco0416

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

@lautarobock
Copy link

any news? @webmaxru? someone?

@StefanKert
Copy link

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

@Together-Robots
Copy link

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

@mgechev
Copy link
Member

mgechev commented May 9, 2017

@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
Copy link
Member

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
Copy link
Author

somombo commented May 10, 2017

@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
Copy link
Member

@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
Copy link
Author

somombo commented May 10, 2017

Thanks!

@jo3d3v
Copy link

jo3d3v commented May 11, 2017

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
Copy link
Member

@jo3d3v
Very nice list!

Some comments:

@treyrich
Copy link

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)

@alxhub
Copy link
Member

alxhub commented May 12, 2017

Hey @jo3d3v, I agree with @webmaxru, that's a very cool feature list.

VAPID support for push

Implemented! @treyrich has a good point with #134, I will fix this next.

adding custom plugins by ngsw-manifest.json

This is likely not going to be supported. NGSW tries to draw a line between the SW's code and its configuration. Updates to code actually clear the whole set of caches, to ensure a SW never ends up in a broken state where a cache from an old version is incompatible with the new code.

Adding/removing plugins is a code change, and so I'd rather not hide it behind a change in configuration.

There is an additional complication that importScripts doesn't have the same behavior with regard to code changes & the update workflow as the main SW script does, so it's not always clear when imported scripts will update.

adding custom plugins for events like notificationclick

This is supported today by building your own SW using the process that @webmaxru shows, though I have some work to do to iron out typings in this case.

core plugins for notification events (click, actions, close)

Agreed, definitely needed.

update on server triggered push

I really want to do something like this too - stay tuned!

update through timer

This can be accomplished now with the NgServiceWorker API in the application - .checkForUpdates() and the .updates stream allow the app to both initiate the update check and to choose to update before NGSW would.

provide service worker for dev mode not only for prod for testing purpose

I agree, but we need to explore more what kind of experience a SW in dev mode would create.

@jo3d3v
Copy link

jo3d3v commented May 17, 2017

Thank you for giving a view into the future of service worker development. Sounds great!!! But there are still 2 questions:

  • What is planed to support by the mobile toolkit?
    • Only encapsulate service worker boilerplate code?
    • Or creating APIs beyond that? (Enhanced but outdated AppShell is a very good idea)
  • How can the community (including me) support this project to accelerate development speed?
    • Provide qualitative PRs in a coordinated way (a plan/roadmap is needed for that)
      • Demo App
      • Docs
    • ...
    • Review/Merging process for PRs

@alxhub
Copy link
Member

alxhub commented May 17, 2017

@jo3d3v,

The "mobile toolkit" as a container for mobile-related tooling will likely be going away. I'm planning on merging @angular/service-worker into the https://github.com/angular/angular repository. The application shell concept itself needs to be rethought and a proper solution will probably look very different.

As for the SW itself, I agree a proper roadmap, documentation site, PR review process, etc are all crucial missing pieces to the project. One of the main challenges with accepting community contributions currently is the lack of a working CI environment, for example. Moving to angular/angular greatly improves this situation.

I'm not sure what you mean by "only encapsulate service worker boilerplate code". It's possible to build your own version of NGSW today, with custom plugins, by running rollup over an entrypoint such as https://github.com/angular/mobile-toolkit/blob/master/service-worker/worker/src/worker/builds/basic.ts.

@aldo-roman
Copy link

TL;DR
For anyone not understanding how to use the mobile toolkit (like me), check:
https://bit.ly/pwa-angularsummit-2017

@somombo
Copy link
Author

somombo commented May 21, 2017

I'll just put this up
https://www.youtube.com/watch?v=C8KcW1Nj3Mw

Thanks for presenting this @alxhub at google I/O!

Looks like there are a lot of new tools like ng-pwa-tools that are meant to make the workflow easier, yet to be documented though 😉

Were there other Angular talks at google I/O ?

@webmaxru
Copy link
Member

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

@somombo
Copy link
Author

somombo commented May 21, 2017

@webmaxru look forward to seeing in cli

@jo3d3v
Copy link

jo3d3v commented May 22, 2017

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

@webmaxru
Copy link
Member

webmaxru commented Jun 6, 2017

/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

@alxhub
Copy link
Member

alxhub commented Jun 6, 2017

@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

@playground
Copy link

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

@somombo
Copy link
Author

somombo commented Sep 7, 2017

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.

@somombo
Copy link
Author

somombo commented Oct 1, 2017

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!

@somombo
Copy link
Author

somombo commented Nov 2, 2017

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.

@StephenFluin
Copy link

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

@somombo
Copy link
Author

somombo commented Nov 4, 2017

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

@webmaxru
Copy link
Member

webmaxru commented Nov 4, 2017

@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

@somombo
Copy link
Author

somombo commented Nov 5, 2017

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

@somombo
Copy link
Author

somombo commented Dec 9, 2017

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

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

@somombo somombo closed this as completed Dec 9, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests