Update (7th July): Just got back from AngularCamp in Barcelona and with these experiences in mind, I held a workshop for people eager to learn Ionic and PWAs. Here is the talk and the repo of what we built.
Just wanted to share my experience with building a PWA with ionic. I had no prior knowledge of PWAs, service workers or ionic above v2. I’d like to make ionic better and more approachable for newcomers that want to quickly shoot out a PWA themselves - therefore this post.
It’s basically a list of TIL I wrote down whenever something got clear to me:
- VirtualScroll
- PopoverComponent
- @Input
- ionic resources
- index.html: cordova.js
- index.html: service-worker.js
- –prod releases
- hosting: firebase caching issue
VirtualScroll
I thought this would solve all my problems, because I’m displaying over 1000 items (big music player).
The issue wasn’t the scrolling, it was the initial load performance. It somehow initialized all items internally before showing them and that caused a lot of time.
=> ended up replacing VirtualScroll with InfiniteScroll and never looked back
PopoverComponent
- popover components need to be declared in
declarationsandentryComponents - popover position will be done simply passing the click event and it positions itself around the event.target
@Input
- when using @Input wait for it to be fully initialized in ngOnInit and not construct
ionic resources
-
ionic resourcescan’t be used if there is no android or iOS - assets/icon/favicon.ico doesn’t get created
- created it myself over http://www.favicon-generator.org/
index.html: cordova.js
- was at first unsure if I’d need this because the “Browser Plugins” are in it and loaded
- in these “Browser Plugins” there also was the Splash Screen plugin
=> ended up removing the cordova.js section completely and manually edited the manifest.json correctly with help of lighthouse to guide me in the right direction what to edit for the native PWA splash screen to appear.
index.html: service-worker.js
- fell into a trap of caching everything while in development mode and lost some time figuring out that what it was and how to fix it
- didn’t fully understand the sw-toolbox and sw-precache and their caching strategies at first (basically I’d like to have been pointed out that there are 2 experiences: 1) everything is cacheFirst and you load the PWA instantly without checking for newer versions 2) you load the PWA with checking first if there are newer resources but isn’t instant load and is still fail-safe for offline circumstances)
=> was pretty blunt and checked for hostname localhost to register the service-worker.js
=> after some time I figured out how to create an “update notification toast”, in case the service-worker.js file has been changed since it’s last registration
–prod releases
I was aware of ionic run ios or ionic build ios but I didn’t know how it works with a PWA only webapp.
In the end I figured out that I can do ionic run browser that will then apply --prod flags to it and I can simply take the content of ./platforms/browser/www and upload it.
It felt weird to use the browser platform.
hosting: firebase caching issue
since I used caching in my service-worker, everything has been cached and I didn’t quite know how to update this at first. when I understood, that I simply need to change one bit in the service.worker.js file, it seemed clear to me.
After some time of no success, I realized that my service-worker.js has been served with a max-age header. So I simply changed the firebase.json config to serve this one specific file with max-age=0 and it worked.
To summarize: I was glad to have picked ionic for a quick and streamlined developer experience to shoot out my very first PWA.
btw the actual PWA: https://gamemusicplayer.io
and its repo: https://github.com/zwacky/game-music-player
