Ionic Utah
July 2023 Meetup
PWA Notifications*
Engage your users with well-placed popups & badges
* Local notifications today. Scheduled and push notifications (with firebase cloud messaging) next time
Website to PWA, why?
App-like experience on the web
- Intalls to homescreen - pick a great name and icon
- Notifications
- Built with web stack, instead of Android and iOS native languages
- Skip the app store hassles, easy to update
Ionic Utah
July 2023 Meetup
Website to PWA, how?
Add a few PWA files to your website
- webmanifest.manifest
- serviceworker.js
- icon.png
- splash.png
Fairly easy to create manually, but tools make it even easier
Ionic Utah
July 2023 Meetup
Ionic Vue
- ionic start
-
npm i -D vite-plugin-pwa @vite-pwa/assets-generator
- Add pwa-assets.config.ts
- Add package.json scripts
- Add pwa section to vite.config.ts
-
npm i @vueuse/core
- Add code to send notifications
- Tweak code for iOS and Android
- Add code to update app badge
Ionic Utah
July 2023 Meetup
Ionic Angular
- ionic start
- TBD
Ionic Utah
July 2023 Meetup
Links to everything
- Can I use NOTIFICATIONS? https://caniuse.com/?search=notification
- PWA requirements https://developer.mozilla.org/...#progressive_web_apps
- Install the Ionic CLI https://ionicframework.com/docs/intro/cli
- Vue add PWA https://ionicframework.com/docs/vue/pwa
- based on the Vite PWA plugin https://vite-pwa-org.netlify.app/
- Vite PWA assets generator https://github.com/vite-pwa/assets-generator
- Angular add PWA https://ionicframework.com/docs/angular/pwa
- Demo Vue PWA repo https://github.com/dolthead/vueBadger
- Ionic Discord https://discord.gg/4qTYcaEn
- Ionic Vue Forum https://forum.ionicframework.com/c/ionic/vue/29
- Ionic Angular Forum https://forum.ionicframework.com/c/ionic/angular/27
-
Free Ionic Angular & React components https://codemyionic.com/
- Free Ionic Vue components https://ionic-vue-components.web.app/
- MTech Dev Course https://mtec.edu/programs/web-programming-development/
- Teach at MTech jfaga@mtec.edu
- Work @Verisk https://careers.smartrecruiters.com/Verisk
Ionic Utah
July 2023 Meetup
Q & A
Ionic Utah
July 2023 Meetup
Who is Todd?
-
Graduated with programming honors from HS in Silicon Valley
-
BS in Computer Science from BYU
-
QA Engineer for 8 years at Novell
-
Full-stack developer at Xactware/Verisk since 2000
-
Trained in UI/UX (BYU, UIE conf, Fluent conf, ng-conf)
-
Specialized in Accessibility, Internationalization, Mobile & Usability
-
Manager of native project (Android & iOS) until 2015
-
Migrated native to Ionic PWA in 2015, maintained until 2021
-
Part-time instructor at MTech (Angular & Ionic modules)
-
Ionic Developer Expert
-
Husband, dad, stepdad, grandpa, Christian, stoic philosophizer, 🏀 🏐, stereogram creator
Ionic Utah
July 2023 Meetup
PWA Notifications in Vue and Angular
By Todd Hale
