[PWA] My experience creating a PWA with Ionic from scratch to deployment


#1

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 declarations and entryComponents
  • 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 resources can’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


#2

Wow this is actually beautiful, gonna star the repo for reference


#3

if i using cordova plugin which only work on device or emulator
how to implement for on pwa?


#4

Not only that was a good info the music are awesome hell i am going to use it in my mobile @zwacky, that musics are rocking
Edit:
BTW do you have any plan to extend this pwa?


#5

Hey @Thavarajan, really cool you like the music too!

I was thinking of this PWA as a playground to use great technologies.
That said, I just came back from AngularCamp in Barcelona and got inspired & introduced to so many new things like ngrx store’s effects. I also had the idea of being able to have a little info page that tells the user what the game is about.
If you want to bring in your ideas, no problem - that’s the great thing about OSS :rocket:


#6

cordova plugins do work per se in the browser, but they mostly have only implementations for Android and iOS. Browser platform will only have stub functions.

Also usually the cordova plugins solve use cases for native devices (e.g. rate my app, camera, file directory, etc). Things that your PWA can’t support so you’d have to code around it or take out / alter certain functionality if you have ios, android and PWA.