Upcoming version - 3.3.0

[jadjoubran]

Just before the final Angular 2 release, I'm working on an intermediary release that's focusing on one main aspect for Laravel & Angular 1

I'm trying to make it a Progressive Web App by providing support for the cool stuff that are recently made available in some browsers

It's still way too early in development, but everything's happening on branch feature-pwa Also some early planning is happening on trello

The goal is to have an architecture that is similar to the voice memos app (when you refresh, the main app shell is loaded from Service Workers allowing for a native like user experience) or any other Progressive Web App (http://pwa.rocks/)

I haven't seen any Angular 1 that's made into a progressive web app before, so it seems that it's challenging 😄 However Angular 2 can be configured to have a pwa support easily

The first step was to optimize the critical rendering path and by immediately painting the app shell.. which is kind of working but the fonts are still messing up

I will keep on pushing regular updates here, as usual feedback is highly appreciated (although it's barely usable right now) and we can always chat on gittr

[jadjoubran]

Things are still under construction, but I was able to make the whole page load in under 1 second on recurrent visits (with minified js and css). Service workers can now serve those resources instead of going to the network! 😄

If anyone would like to try it, you can follow these steps:

git clone this branch npm install gulp open first time recurrent visit should be super fast 🚀

[flick36]

Looking forward to this i'll try it in the next couple of hourse great job @jadjoubran !!

Just to anyone that wants to try it you also have to composer install and bower install before using gulp and of course fix credentials in .env as well as creating the app key with: php artisan key:generate :P

[jadjoubran]

hahaha yes indeed

[jadjoubran]

I'm really excited about this 😄

In the gif below, first refresh is a hard refresh (cmd + shift + r) then all the other subsequent refreshes are regular refreshes (cmd + r).. You can see how fast the first paint is happening the first time because I'm inlining the critical css (critical path rendering) and for recurrent refreshes, everything is being served from the service worker

I still have a couple of chores left before I start working on the developer experience and fixing the design (especially the fonts 🔥 )

I just realized that the gif is not continuous, so click on it to preview in a new tab

[flick36]

@jadjoubran Gif is broken i get Not Found

Ok i can see it now :laughing:

[jadjoubran]

New updates!! Even faster initial load is achieved by caching the initial request (this can be changed to networkFirst strategy depending on the app) First time the app loads, it shows a toast saying that the app is ready for offline use And then newer versions show a toast: A newer version of this app is available - Refresh I still have an issue with the fonts though :/

[milocosmopolitan]

OMG so excited!

[flick36]

What's wrong with the fonts? maybe i can help?

[jadjoubran]

@milocosmopolitan indeed :D @flick36 I wasn't able to load them without creating a FOUC (flash of unstyled content) or without blocking rendering which slows down things a lot on the initial load

That's why I left it to be the last task.. feel free to clone and give it a shot, but make sure to emulate 3g connections if you're on a fast one (I'm always on a slow connection here in my country 💩 )

[jadjoubran]

Fixed the fonts issue!

[flick36]

Wom im good hahaha xD what did you do?

[jadjoubran]

Haha, downloaded the files rather than using them off Google webfonts

[jadjoubran]

Here's a demo 😄 https://test.laravel-angular.io/ I'd love to get some feedback but not that it's not ready for prime time yet, lots of Developer Experience fixes need to be done

You can also try it from your phone, if you've got an android you can add it to homescreen and it'll behave like a native app (works offline) and later on you can configure it to send push notifications

[followtheart]

How can i add it to homescreen?

[jadjoubran]

@followtheart just like this

[jadjoubran]

Now you can generate your own manifest.json by just running artisan pwa:manifest 🚀

[jadjoubran]

So this should be stable by now 😄 Is anyone interested in testing this with me once I launch the beta?

[flick36]

:raising_hand: never done testing before, so i might not be that useful :v

[jadjoubran]

@flick36 awesome, no worries 😄 @hackur would you also be interested? It seems you're already trying it

[hackur]

Sure. I'll let you know if I run into any issues.

[jadjoubran]

Just tagged 3.3.0-beta, it would be great if you guys can tell me what can be improved in the process 😄

[jadjoubran]

I'm also working on a progressive web app based on this that I will open source later on as a demo

[followtheart]

Really need more demo project based on this project

[jadjoubran]

I'm developing a blog app to see what can be improved for 3.3.0 Here are the issues that I faced:

• It's annoying to re-run gulp when changing precache-config.json, so the swPrecache() task needs to read the documentation everytime rather than caching it. Also precache-config.json needs to be added to the watch path so that it picks up changes automatically
• For some reason, networkFirst or networkOnly are defaulting to cache.. I can't seem to figure out why
• Live reload doesn't work. Depends on #290

And btw Chrome canary makes it easier to use new features for service workers (I'll document that)

[jadjoubran]

Update: networkFirst and networkOnly are working, but chrome shows that they're being served by the service worker, because the server worker is handling them by forwarding them to the network.. so nothing is wrong for this 👍 This can be verified by watching the response time when choosing networkFirst or cacheFirst

[jadjoubran]

I will probably skip Live Reload over https because I can't seem to make it work.. unless someone has done it before Also, @hackur and @flick36 do you have any comments before the 3.3.0 release?

[hackur]

Nothing from me yet. I was able to generate the manifest without any issues. I just don't know enough about PWA's yet - so I'm probably going to have to give my input once I get a little bit better idea of how it's all suppose to work.

Can you suggest any additional resources I should read to learn more about your approach to PWA's?

I've mostly been referencing these: https://developers.google.com/web/progressive-web-apps/ https://developers.google.com/web/fundamentals/getting-started/?hl=en https://developers.google.com/web/updates/2015/11/app-shell?hl=en

[jadjoubran]

Those are the best resources, I'd add this one by @addyosmani https://medium.com/google-developers/instant-loading-web-apps-with-an-application-shell-architecture-7c0c2f10c73#.d9hypdfhz I'll also explain a lot of topics during the screencasts

[jadjoubran]

I've also watched all of 2015's Chrome dev summit Especially the below:

• https://www.youtube.com/watch?v=jCKZDTtUA2A&list=PLNYkxOF6rcICcHeQY02XLvoGL34rZFWZn&index=5
• https://www.youtube.com/watch?v=MyQ8mtR9WxI&list=PLNYkxOF6rcICcHeQY02XLvoGL34rZFWZn&index=10
• https://www.youtube.com/watch?v=g7f1Az5fxgU&list=PLNYkxOF6rcICcHeQY02XLvoGL34rZFWZn&index=11 (even though we're not using Polymer, this was very helpful with the App shell)

[flick36]

Hi @jadjoubran been really bussy to answer anything x.x i haven't found nothing strange yet, so my only comment for now would be AWESOME JOB!

[jadjoubran]

Just tagged 3.3.0-rc Feel free to send in your suggestions before I publish 3.3.0 😄 I'm also starting to work on the documentation & screencasts which are going to take some time

[jadjoubran]

3.3.0 has been released 😄 I started working on the documentation and I'll record screencasts soon

[mvpasarel]

@jadjoubran Great news!

[jadjoubran]

@mvpasarel did you have any comments so far? 😄

[mvpasarel]

@jadjoubran I haven't found any issues and it looks great! I managed to easily use it on what I had to do until now. But I haven't got to the part where I need to use business logic, I only implemented some HTML templates which worked like a charm without too much setup.

[jeslomo]

Oooh! Great!! @jadjoubran

I've a comment (or sugggest).

I've change reference in the index.blade.php to css/js.

I use apache for serve the app, and when use localhost/ the dependences crash because the route it's absolute. I fix it using : asset function of laravel.

I've problem too with CORS because the .htaccess not woring if use php artisan serve (this is the motive for put the app in apache folder).

[jadjoubran]

ah true.. that's a problem that we also faced here in #337 Didn't you also have to change the generated code for components? because it starts with an absolute path..

I just published the Progressive Web App docs for 3.3.0, I'm now drafting the upgrading guide and changelog 😄

[jadjoubran]

First progressive web app tutorial for version 3.3 😄 https://www.youtube.com/watch?v=qe5dJdPYvfA