PWA with Progressier

Wappler General Need Help
1

Its been recommended a few times in these forums to use progressier for PWA apps. It looks like exactly what I need and I am ready to jump into it.

However, I have a question on initial set up. Wappler is not listed as a supported app builder. SO what do you choose for frameworks? Just 'HTML/CSS/JS'?

Screenshot 2025-05-17 at 1.07.07 PM
Screenshot 2025-05-17 at 1.07.07 PM1070×944 39.2 KB

2

I've been using Progressier for quite some time now, yup, all you need to do is select HTML/JS/CSS, then setup your service worker and manifest link, and you're all set!

1 Like
3

Thanks! :beers:

4

You're welcome!
Also, remember to add your localhost or internal ip(if you're using any devices on your local network) to additional domain list, you then can install your application from localhost and test push notifications and other features. :slight_smile:

Also let me know whether you need a script to attach user's information to the progressier's notification subscriber list! Makes it much easier to target specific users via tags, email,etc.

1 Like
5

Thank you so much. I am sure I will have more questions as I get started. Nice tip about local host. I will definitely do that!

6

I had Claude do the heavy lifting for me. This included

  1. Install Buttons: The site includes "Install App" buttons (both desktop and mobile versions) that allow users to add the website to their home screen
  2. Web App Manifest: The /assets/images/icons/site.webmanifest file defines how the app appears when installed (icons, colors, name)
  3. Installation Detection: JavaScript automatically detects when the app can be installed and shows/hides the install buttons accordingly
  4. Service Worker: Implements caching strategies to make content available even without an internet connection
  5. Cache Management: Stores essential assets, pages, and images for offline access
  6. Update Notification: "Update Available" buttons appear when a new version of the site is available
  7. Cache Clearing: Clicking the update button clears the old cache and loads fresh content