Migrating Collecto to PWA

Collecto is one of my two “pet project” apps (With UrzaGatherer).

I recently decided to move it from UWP to PWA because I wanted to use it on mobile devices as well (not just desktop as it is right now). My goal was also to develop once but use it everywhere,

You can find the current version here: https://www.collecto.app

And here is a quick demo reel of the app: https://youtu.be/BUhDcvvfts4

The web can definitely do as good as native apps

I was a bit worried at the beginning because I wanted to get as close as possible to the look and feel of my native app. It turned out that it was not a real problem as the Web is clearly mature now.

If you like gory tech details, here is a list of web features / tools I used and why:

  • React: The main reason I picked React among the gazillions other framework was clearly because I wanted to learn it 🙂
  • TypeScript: Creating a complete app without a strong typed language could prove to be really challenging and I was not really up to that challenge
  • Service workers: They are the key of the PWA ecosystem. They let you hook the network calls and thus they provide a way to work online / offline by letting you cache your assets locally
  • IndexedDB / Local storage: IDB and local storage are used to store user preferences as well as the user’s collection in case there is a network issue
  • OneDrive SDK: Collecto does not store any user data on a server but instead uses the user OneDrive to store his collection
  • History API: I used the JavasScript history API to control the navigation inside the app
  • CSS Grid layout and CSS Flex: The UI is made of a composition of both grids and flex boxes
  • CSS animations and transitions: In order to bring the same feeling of smoothness that I had on my native app, I tried to use transitions and animations as much as I can.
  • CSS filter: Well because it is just fun (I used to to blur the app when a wait ring is displayed for instance)
  • Webpack: I use webpack to bundle all my JavaScript (compiled from TypeScript), CSS, fonts and all other resources into a single .js file usable on any modern browser.
  • VSCode: What else could it be?

Deploying your PWA

Once ready, your PWA can be directly used as is by just sharing its URL. It will work on all mordern desktop and mobiles browsers (Do not forget to test on all browsers if you see what I mean). On Android devices you can even add them to your home screen where they will be indistinguishable from a native app.

If you also want to enlist your app in various app stores (to get more visibility for instance), I would recommend to use www.pwabuilder.com which will prepare for you all the packages you need to submit an app on Windows Store, iOS App Store and Google Play Store.