Progressive Web App Functionality

[tayambamwanza]

It would be great to have this as an installable web app, I can implement this for you if you want.

• Create dev branch

• Create dev firebase project for a test hosting site "angular-checklist-dev"?

• ng add @angular/pwa

• add service worker to app.component.ts

• automatic update logic

• manual update logic

• manual update button

[KwintenP]

Hi,

This is definitely something that's on our mind. I wanna be really careful here though as I know there have been some issues before with PWA in Angular.

I want to make sure that people always get the latest version if new items are added. And I've had first hand experience with this not working for some project that I did.

Don't know if the benefit of having a PWA is worth the potential errors it brings 🤔. Or am I being to conservative here @d3lm?

[tayambamwanza]

@KwintenP, that is true, I had these issues myself but this has pretty much been the story of Angular as well 😆 initially it was rough around the edges and had some inconsistencies but it's matured very nicely and I've managed to use it in a fashion that's reliable in my latest project which is why I'm volunteering to do it.

You can make a new project called dev-angular-checklist on firebase hosting and deploy the app there temporarily to test, then you don't risk affecting the main site.

[d3lm]

@tayambamwanza Hey there, thanks for showing interest in contributing to this project!

As @KwintenP said, we were also thinking about making the Angular Checklist a PWA but I can also agree that it's still rough around the edges and from first hand experience I can tell that there are still a bunch of issues.

I am not sure how beneficial it would be for the checklist. I do see the benefit of the being available offline but we'd need to make sure that the version the user has is always up-to-date as the content is really important and I don't want people to stay on old versions just because the SW is not updating properly.

So if we can figure out how to deal with this and implement it in a reliable way, I'd be up for this! I think the main focus shouldn't be mobile here but rather offline availability. But we have to keep in mind, that at some point we want to integrate Firebase and sync the data to a database.

@KwintenP, you're definitely not too conservative about this. It's just that we both had to face several issues in the past. Also I don't want the UX to suffer. The app was build to provide a great UX and I want to keep it that way.

Again, if we can find a way to make this work reliably, sure, why not.

We can for sure have a dev-branch where we experiment with new features and continuously deploy that to firebase. Sounds like a good idea anyways. This way we don't break our live system if we try out new features.

@KwintenP Thoughts?

[d3lm]

Ok, so I think we should try it out in a dev branch and see how it's working. But if we have a proper update mechanism in place it shouldn't be a problem.

It would be really nice to have this offline as well cause if you're on a train or on a plane for example, you can still work with the checklist if you want.

[tayambamwanza]

Thanks for the responses, I'd be willing to help out with setting this up, so let me know if you'd be willing to see what I come up with after you set up the dev branch & dev firebase project.

One of the fail-safes that I implemented was having an actual button to "check for updates" somewhere in my app (normally at the bottom of the sidenav) so it would force the service worker to get the latest version if the automatic update failed somehow.

[KwintenP]

Hi,

I think the dev branch idea is a very good one. I'm all for it. I can set up the dev branch + deployment.

@tayambamwanza if you could implement the PWA, that would be awesome. Although, I'm still quite skeptical on this 😂. Always seeing the latest data is way more important than offline available AFAIAC. But if it works, I would be very happy to add it!

[d3lm]

@tayambamwanza I like that safety net of having a button for the worst case. Cause one problem with PWA's is that if you forget to build in an interval that is polling for updates, users are stuck for a cached version of the app. One can seriously screw up here 😆 But having that button sounds like a really good idea.

[d3lm]

Yep agreed @KwintenP. If we get this up and running and that users will always be on the latest version and update if their is a new version available, definitely!

[tayambamwanza]

Alright great then, i'll be on standby i'll make a checklist if you don't mind :)

[d3lm]

I will go ahead and set up the dev branch. @KwintenP will then take care of setting up a Firebase project that is used to deploy the branch.

[KwintenP]

I'll try to set this up asap.

[KwintenP]

Misclicked 🙈

[d3lm]

@tayambamwanza We have now set up a develop branch and the continuous deployment is also working. If you want, you can go ahead and send PR against develop and we keep an eye on the dev environment to see if everything is working as expected. Please make sure to extensively test this. We will do the same before anything goes into the master branch.

Can't already wait to see how you implement this. I am very curious what you come up with to make this more reliable.

[tayambamwanza]

@d3lm Awesome, thank you very much I'll get to work on it 👍

[tayambamwanza]

@d3lm , I'm almost setup but when I try to build I get this error:

ERROR in ./src/app/checklist/state/checklist.reducer.ts Module not found: Error: Can't resolve '../../../assets/content.json' in '~/angular-checklist/src/app/checklist/state'

[KwintenP]

Also reachable from https://dev.angular-checklist.io/projects from now on (certificate is still generating on firebase hosting).

[d3lm]

@tayambamwanza Did you run yarn start? It seems that you only ran the app but not the script that builds the content. The start script does both.

[tayambamwanza]

@d3lm Thanks I left out the step.

[d3lm]

Any progress update on this one?

[tayambamwanza]

Not yet, I've been away but back now so I'll start work on it soon

[d3lm]

No worries! I just wanted to check for any updates to make sure this is still being worked on and not stale.

[tayambamwanza]

Don't worry about it, hasn't gone stale 😄

[tayambamwanza]

I installed the @angular/pwa package without making changes. I need icons now, would you be able to send me something?

[d3lm]

Yep I can generate those for you. Will do that next week.

[tayambamwanza]

Fantastic, much appreciated

[d3lm]

Here you go. I have just uploaded a zip containing the icons for various platforms. Let me know if they work for you. Can't wait to see what you come up with. PWA would be a great feature to have.

[tayambamwanza]

@d3lm Thanks haha, didn't realise you'd send it already, appreciate it.

[tayambamwanza]

@d3lm Quick question: Should I include the meta tags for iOS Safari or just support android?

I normally use this tool to generate the iOS specific icons with the appropriate names and html tags Favicon Generator

I just did a quick google and found this article as well PWA Web App Manifest support for iOS!

[d3lm]

I'd say that we support both iOS and Android as those have a huge market coverage.

[tayambamwanza]

#39
@d3lm @KwintenP Apologies for the delay I submitted a pull request for this just now, things got a bit hectic and still are but I thought I'd try sort this out. Any adjustments and suggestions are welcome.

[GregorBiswanger]

What is the current status on this? As a PWA app would be great!