New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Progressive web apps #535

Open
JeroenVinke opened this Issue Mar 10, 2017 · 22 comments

Comments

Projects
None yet
@JeroenVinke
Member

JeroenVinke commented Mar 10, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Thanood

Thanood Mar 10, 2017

Contributor

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

Contributor

Thanood commented Mar 10, 2017

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

This comment has been minimized.

Show comment
Hide comment
@EisenbergEffect

EisenbergEffect Mar 10, 2017

Member
Member

EisenbergEffect commented Mar 10, 2017

@eriklieben

This comment has been minimized.

Show comment
Hide comment
@eriklieben

eriklieben Mar 14, 2017

Member

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.

Member

eriklieben commented Mar 14, 2017

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

This comment has been minimized.

Show comment
Hide comment
@KernowCode

KernowCode Mar 15, 2017

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

KernowCode commented Mar 15, 2017

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

@Thanood

This comment has been minimized.

Show comment
Hide comment
@Thanood

Thanood Mar 16, 2017

Contributor

@KernowCode
BrowserSync has an https option. 😃

Contributor

Thanood commented Mar 16, 2017

@KernowCode
BrowserSync has an https option. 😃

@obedm503

This comment has been minimized.

Show comment
Hide comment
@obedm503

obedm503 Jul 31, 2017

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

obedm503 commented Jul 31, 2017

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

@eriklieben

This comment has been minimized.

Show comment
Hide comment
@eriklieben

eriklieben Aug 23, 2017

Member

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.

Member

eriklieben commented Aug 23, 2017

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

This comment has been minimized.

Show comment
Hide comment
@djedi

djedi Sep 21, 2017

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.

djedi commented Sep 21, 2017

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

This comment has been minimized.

Show comment
Hide comment
@eriklieben

eriklieben Sep 21, 2017

Member

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)
image

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

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.

Member

eriklieben commented Sep 21, 2017

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)
image

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

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

This comment has been minimized.

Show comment
Hide comment
@aligneddev

aligneddev Dec 29, 2017

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.

aligneddev commented Dec 29, 2017

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

This comment has been minimized.

Show comment
Hide comment
@eriklieben

eriklieben Dec 29, 2017

Member

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.

Member

eriklieben commented Dec 29, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Alexander-Taran

Alexander-Taran Mar 24, 2018

Member

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

Member

Alexander-Taran commented Mar 24, 2018

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

@obedm503

This comment has been minimized.

Show comment
Hide comment
@obedm503

obedm503 Mar 24, 2018

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

obedm503 commented Mar 24, 2018

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

@Alexander-Taran

This comment has been minimized.

Show comment
Hide comment
@Alexander-Taran

Alexander-Taran Mar 24, 2018

Member

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

Member

Alexander-Taran commented Mar 24, 2018

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

@obedm503

This comment has been minimized.

Show comment
Hide comment
@obedm503

obedm503 Mar 24, 2018

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>

obedm503 commented Mar 24, 2018

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

This comment has been minimized.

Show comment
Hide comment
@aligneddev

aligneddev Mar 26, 2018

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/

aligneddev commented Mar 26, 2018

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

This comment has been minimized.

Show comment
Hide comment
@jpsala

jpsala Apr 9, 2018

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?

jpsala commented Apr 9, 2018

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

This comment has been minimized.

Show comment
Hide comment
@obedm503

obedm503 Apr 9, 2018

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

obedm503 commented Apr 9, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@jpsala

jpsala commented Apr 11, 2018

Thanks @obedm503

@fmonroe

This comment has been minimized.

Show comment
Hide comment
@fmonroe

fmonroe Apr 24, 2018

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

fmonroe commented Apr 24, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@aligneddev

aligneddev Apr 24, 2018

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.

aligneddev commented Apr 24, 2018

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

This comment has been minimized.

Show comment
Hide comment
@eriklieben

eriklieben Apr 28, 2018

Member

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

Member

eriklieben commented Apr 28, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment