How do I turn the app into a PWA?

Building a field data collection app using Noodl and our own backend.

Since quite a few of our projects are in rural areas with little or no connectivity when collecting data I want to make the app a progressive web app (PWA) so we can collect data when offline and sync when back online again.

Basically I’m trying to add service-worker and manifest files but how do I add them to my Noodl app?
I’m thinking I could easily add them if self-hosting, but is that the way to go?

Also, how do I add/run the service-worker registration script? Use a script node and run it on initial mount of the page? Something else?

Managed to get it working, including the service worker registration so it’s nice and installable.
Here’s the process I followed:

  • Used pwabuilder.com & Workbox to generate service-worker.js & manifest.json
  • Dragged the two files into Noodl
  • Added link to manifest in the Head Code
  • Added a script node and ran the service worker registration on Node.OnInit in the app component so it was in the of the app
  • Deployed app to sandbox
  • Tested on my android phone and got the question if I wanted to install it as i had hoped
  • App runs in fullscreen mode and looks like a native app
3 Likes

Hi Anders! It sounds like you’ve already solved this issue yourself, but let me know if there’s anything else you need help with :slight_smile: Great job, and thanks a lot for sharing your steps too! :slight_smile:

Best regards, Victor from Noodl

1 Like

Hi Anders - if your project becomes public and you’re up for sharing, we’d love to see it!

1 Like

awesome find Anders! dear noodl team, it would be great if you could make a How-To step by step for dummies like me, to make an app a native experience. would be a great addition to the docs. thanks so much!

Hi Arne, thanks for the feedback! I’ll bring that back to the docs team :slight_smile: