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" [email protected] wrote:

See also #399 https://github.com/aurelia/cli/issues/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 https://github.com/aurelia/cli/issues/535#issuecomment-285787599, 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.

[eriklieben]

I am not a webpack expert/ for me webpack is a black box :-), but as far as I understand it the current version of workbox-webpack-plugin has no support for usage together with webpack-dev-server.

They have an alpha package that works with it. I will try that and try to write a blog post about it with the setup instructions, etc.

With the current version, you need to start webpack in dev mode so that it generates files on disk.

[Alexander-Taran]

workbox webpack plugin is updated to support webpack 4 and docs hint that dev-server is supported also

[obedm503]

i've been using the workbox plugin with webpack 4 and dev server. It works really well.

[Alexander-Taran]

@obedm503 dont be shy to share relevant parts of configs (-;

[obedm503]

it's really not much

new WorkboxPlugin({
  globDirectory: './dist',
  globPatterns: ['**/*.{html,js,css,woff,woff2,ttf,svg,eot,jpg}'],
  swDest: './dist/sw.js',
  clientsClaim: true,
  skipWaiting: true,
})

then in the index.ejs

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
      .then(function(registration) { return registration.update(); })
      .catch(console.error);
  }
</script>

[aligneddev]

I had to: npm install workbox-webpack-plugin --saveDev then use new WorkboxPlugin.GenerateSW({ instead of new WorkboxPlugin in the webpack.config.js to get au build to build.

Thanks for the info.

Maybe @obedm503 is using an older Workbox version? I have "workbox-webpack-plugin": "^3.0.1", and got a au build WARNING in You're using the following Workbox configuration options: [globDirectory, globPatterns]. In Workbox v3 and later, this is usually not needed. Please see https://goo.gl/EQ4Rhm for more info.

https://webpack.js.org/guides/progressive-web-application/

[jpsala]

Thanks, it's working fine, except that after building the app the page is updated after refresh a second time, does someone know's what's happening?

[obedm503]

@jpsala I think that's the expected behabior. the service worker updates in the background and will serve the new files on the next refresh.

[jpsala]

Thanks @obedm503

[fmonroe]

@aligneddev @eriklieben So, has there been a blog post written (as per your comments above)? Can Aurelia be used to build real PWAs? I think that would be a great blog post! Thank you kindly!

[aligneddev]

I agree :-). I unfortunately haven't found/made the time to actually build one and do a good write up about it.

It should be "easy" to get one running with webpack 4 and Aurelia.

[eriklieben]

I didn't have/ made the time yet to look into it or write a blog post about it.

[BStrickland01]

Hey, Any news on a Aurelia PWA tutorial?

[EisenbergEffect]

What exactly are you looking for that is Aurelia-specific in a PWA tutorial? You should be able to turn an Aurelia app into a PWA by following any article on service-worker and other PWA "umbrella" web features. If you can talk a bit more about what specifically you are looking for in an article, we can see about writing up a tutorial.

[Jenselme]

Jumping a bit late but it still may be of interest to folks: it is perfectly doable to build a PWA with Aurelia and you don't need to adapt or go around the framework to do it. I wrote a small article on that and created a MIT license example to support my sayings.