search

angular / mobile-toolkit

Tools for building progressive web apps with Angular
MIT License
1.34k stars 175 forks source link

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

Closed somombo closed 6 years ago

somombo commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

lacolaco commented 7 years ago

@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 commented 7 years ago

thanks @laco0416

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

lautarobock commented 7 years ago

any news? @webmaxru? someone?

StefanKert commented 7 years ago

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

Together-Robots commented 7 years ago

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

mgechev commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

@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 https://github.com/angular/mobile-toolkit/issues/138#issuecomment-290423194

Thank you very much for all this by the way!

webmaxru commented 7 years ago

@somombo I added:

somombo commented 7 years ago

Thanks!

jo3d3v commented 7 years ago

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:

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:

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

webmaxru commented 7 years ago

@jo3d3v Very nice list!

Some comments:

treyrich commented 7 years ago

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 commented 7 years ago

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

VAPID support for push

Implemented! @treyrich has a good point with https://github.com/angular/mobile-toolkit/issues/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 commented 7 years ago

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

alxhub commented 7 years ago

@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 commented 7 years ago

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

somombo commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

@webmaxru look forward to seeing in cli

jo3d3v commented 7 years ago

@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 commented 7 years ago

/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 commented 7 years ago

@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 commented 7 years ago

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

somombo commented 7 years ago

Update: looks like we are pretty much waiting on https://github.com/angular/angular/pull/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 commented 7 years ago

Update: Looks like a preliminary port of @angular/service-worker has been merged into the main angular repo see PR https://github.com/angular/angular/pull/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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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

webmaxru commented 7 years ago

@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 commented 7 years ago

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

somombo commented 6 years ago

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