Progressive web apps

[JeroenVinke]

I'm submitting a feature request
At the Amsterdam meetup a question was asked whether new aurelia cli apps could (and should) be progressive web apps by default.

cc @eriklieben

[Thanood]

See also #399.
Personally, I'd like this as an option as it's more boilerplate code. Currently, the CLI creates a minimal project. If I want a minimal project, I can get it right now. 😃

[EisenbergEffect]

I'd like for us to add it as an option. Anyone want to pr that?

…

On Mar 10, 2017 1:20 PM, "Daniel Bendel" ***@***.***> wrote: See also #399 <#399>. Personally, I'd like this as an option as it's more boilerplate code. Currently, the CLI creates a minimal project. If I want that, I can get it right now. 😃 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#535 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAIBnSDuKTO-WKQ3yU8sZJR1ljiFMAtIks5rkb6NgaJpZM4MZ3jH> .

[eriklieben]

Jeroen, thanks!

I can look into this as soon as my energy level is back to normal again, not spending that much time behind a keyboard during evenings / after work last weeks.

I think it should be an option in the CLI and only be applied once you pick it, because it doesn't make sense to add it for every project/ not every project needs it.

What we can do is once you pick the option to enable PWA, is:

• install deps for sw-precache (save-dev dep) & sw-toolkit (save dep)
• install a extra build step for sw-precache to generate the sw.js file
• add ref from index.html to manifest.json and and a minimal manifest.json configuation.
• add a generate task to generate a full manifest.json file by answering questions, with one question to provide a default icon image, for which we can generate all the different sizes required by the different browsers so you don't need to do that by hand (that's most of the work).

The last step requires a dev dependency on something like Jimp to do someting like this:

    const iconImage = await Jimp.read(iconPath);
    iconImage.resize(384, 384).quality(60).write("chrome-splashscreen-icon-384x384.png");
    iconImage.resize(256, 256).quality(60).write("icon-256x256.png");
    iconImage.resize(192, 192).quality(60).write("chrome-touch-icon-192x192.png");
    iconImage.resize(152, 152).quality(60).write("apple-touch-icon-152x152.png"); 
    iconImage.resize(144, 144).quality(60).write("ms-touch-icon-144x144.png");    
    iconImage.resize(128, 128).quality(60).write("icon-128x128.png");    
    iconImage.resize(96, 96).quality(60).write("icon-96x96.png");
    iconImage.resize(72, 72).quality(60).write("icon-72x72.png");
    iconImage.resize(32, 32).quality(60).write("favicon.png");

Only then not with a hard-coded file type.

This will allow you to get quickly up and running. And, at a later moment in time, still be able to reconfigure your pwa/manifest file. Or for example generate all your icons (which is most of the work, or the most boring work) once you got the basic project setup ready and the designer sends you the icon to use.

For me it doesn't feel right, if it requires you to have an icon ready when you perform au new.

[KernowCode]

As PWA is HTTPS only, I am also keen to know how to perform 'au run --watch' but over HTTPS and not http?

[Thanood]

@KernowCode
BrowserSync has an https option. 😃

[obedm503]

any updates on this? I would be really helpful the cli handled sw-precache stuff

[eriklieben]

It looks like sw-precache & sw-toolbox are replaced by google workbox.

Didn't look deeply into it yet, only played around to see if it was similar, but here is an example using workbox with a cli task: https://github.com/eriklieben/hn-aurelia-requirejs/blob/master/aurelia_project/tasks/service-worker.ts

I am only not sure yet what the generic parts of it would be / what would be expected to be a 'default' setup that would work for most and isn't something that would still require a lot of modifications to fit it to an application.

[djedi]

I'm just learning about PWA. I'm curious how much weight he aurelia framework adds to a PWA. I'm at Connect.tech in Atlanta and I went to a PWA workshop yesterday. They presenter recommended preact mainly because of how small it is and its ability to code split. I'd be curious to know how Aurelia compares.

[eriklieben]

Hi Dustin,

I don't know much about reducing the size of an Aurelia application, but there is a sample here https://github.com/jods4/aurelia-webpack-build/tree/master/demos/04-Small_ES6_build to minimize the size of an application with code splitting, etc which might help.

This is not an argument against or why Aurelia can be bigger or anything, but just a side note:

PWA apps are about more than only a very small bundle. It's important, but not the end of the world depending on your audience (for example, my 4G mobile internet is in most cases faster than a local public WIFI hotspot, but that differs from country to country). So if I am in a good area when downloading the app for the first time, I am okayish.

The size of the bundle/ application only applies to the first load for a user, because in most cases the second load comes from cache (otherwise it won't work offline), so size/ download time over the network isn't a thing anymore. Still, the user would need to wait long for a full view of your application the first time (if that occurs on a slow connection).

If you use the samples from the skeleton, then it will show a loading indicator and not an empty white screen (because it only needs to load a few bytes to load the index.html page). So it kinda shows at least something very fast.

This is the network tab on Fast 3G first load, with the url https://hn.kristoferbaxter.com/ (https://hnpwa.com/ Preact sample)

This is the network tab on Fast 3G first load, with the url https://aurelia-hn.azureedge.net/

The above is a CLI Aurelia app with a production build and still contains a bug, because it loads some files twice (once normal and once with cache busting) which I still need to fix. It loads a few kb to much I think.

But as you can see, on emulated fast 3G, the difference between almost 240kb and 30 kb isn't that huge as one might expect. So if bundle size is a big point might be questionable / there are more factors to it, then only bundle size.

Another side note, you could also create a PWA without any SPA framework at all :-)

Hope this helps.

[aligneddev]

I'm stuck trying to use Aurelia CLI and Workbox. Please see my question on StackOverflow.

I was hoping to figure this out to write a blog post detailing how to get a PWA running with Aurelia, but couldn't get past this. I've tried a few times in the past months.

I believe a walk-through, documentation and/or a blog post on the Aurelia website would be a great addition to help Aurelia move forward in adoption.