I built Pushpop - a PushBullet alternative for iOS using Nuxt3 with CapacitorJS
Tags: webdev, javascript, vue, firebase
Published: 2022-09-26 10:17:39

_If you'd just like to try it out, visit [getpushpop.com](https://getpushpop.com). To know the story, read on_

Late last year I moved to iOS. 'Twas a learning curve of course, but the hardest part? No PushBullet :(

I would use PushBullet daily on Android to move files, text and links from my phone to my laptop and vice-versa. I also used it as a kind-of "to-do" app for links or Reddit posts I find on mobile that I want to look into more. Yes I could bookmark it or add it to a todo list, but with Pushbullet I could just push it from my phone, and next time I open my laptop, it'll open up in my browser so I can read it, download it, or save for later in some form. It's great.

I wanted that on iOS, but it looks like it's just not economically viable for them to do it, as I found in [this Reddit post:](https://www.reddit.com/r/PushBullet/comments/eirc1m/not_available_on_ios/)

> For those not aware, fully updating our iOS app for the latest versions of Swift, iOS, etc and then adding Sign in with Apple is a huge amount of work. Sadly iOS is our least popular / used platform. It's also the platform we can to the least interesting things. As a result, we've chosen to unpublish it for the time being to focus on the platforms where we can do more interesting things.

Well, damn. What's a reasonably semi-capable developer to do, ay?

## Oh look, Nuxt3 just went into release candidate stage...
I love Vue, and have been using Nuxt for the "marketing" portion of a few of my side projects like [Reservadesk](https://reservadesk.com/), [Referextra](https://referextra.com/), and [Livedata.ninja](https://livedata.ninja/) to much success. I love how it builds to static HTML and gets those sweet sweet Lighthouse scores.

So of course, over a few nights and weekends I go and build the web app using Nuxt3. And it works pretty well (although I'll talk about some problems I had later). Before too long, I was able to get it to a minimum viable product, so to speak.

Then, we needed to get the app running on mobile devices. For this, I turned to [Capacitorjs](https://capacitorjs.com/). I was a bit worried at first, I know building cross-platform mobile applications can be a bit of a minefield, but I really like Capacitorjs. The documentation is great, the ecosystem of plugins is healthy, and I was able to achieve everything I wanted with it (although I'm still, as of time of writing, trying to get Android to work).

After some back and forth and some wrangling, I was able to publish the app on the app store, check it out here - [Pushpop](https://apps.apple.com/ie/app/pushpop/id1633893054).

## And it works!
Using my plucky little app, I'm now able to share anything on my phone to pushpop, and have it appear as a notification on my laptop, and vice versa. It makes sending links, screenshots, photos - anything - from one device to another easy.

It does not do some of the more fancier things that PushBullet can do on Android like SMS management etc, but I don't need that. And I'm the primary target market for this app 😂.

{% embed https://www.loom.com/embed/551c858e56284ec5b38cfc31c6cef154 %}


## Problems I found with Nuxt3
Sorry but I still cannot figure out how to use plugins like I did in the older version. Any plugins that have to render a html component I just couldn't get to work, like one of my favourites [vue-json-pretty](https://www.npmjs.com/package/vue-json-pretty). If someone knows, please enlighten me.

Another thing I was trying to do was build middleware which would automatically redirect the user to https if the request was http. I still haven't figured it out and am relying on the frontend to detect and redirect 🤮. I think I need to build a Nitro plugin to handle it but that's brand new as a technology it seems and is quite light on documentation and guides.

## What else did I learn?
Building for iOS is a certifiable nightmare. Why do Apple make things so unbelievably difficult?
- Terrible documentation like [this page](https://developer.apple.com/documentation/bundleresources/information_property_list/cfbundledocumenttypes/cfbundletypename) which is supposed to tell you what CFBundleTypeName is in your info.plist file. But no. It just tells you it's required, is a string, and its name is Document Type Name. Trying to cobble together what this value actually means is next to impossible.
- Bugs in Xcode where the Apple developer forum just recommends downgrading to an older version.
- The inability to test push notifications properly in the simulator
- App Store Connect which is an absolute nightmare to try and navigate and figure out where you are and what you're doing.

## Tools used
- Nuxt3
- TailwindCSS
- CapacitorJS
- Node
- Heroku
- Firebase

## Tools tried

- Tauri. I saw this on fireship's Youtube channel and wanted to give it a try. Turns out it's just a little too new so I turned to Electron
- Electron. Turns out your iOS app can run on mac. Who knew? :D

## What's next?
There are a few things I'd like to do next with the app:
- Get it running on Android and put it in the Play store
- Some UI/UX improvements to make it easier to navigate and quicker to share things from within the app itself
- Fix a bug where it's re-counting devices for some reason (I think on app update)
- Add a configuration so that when it's running on a desktop device, it can auto-open links and files in the browser when they're received.
- (Maybe) see if I can get it running in Electron again and build it for Windows, but when I looked at that last time the documentation seemed lacking and confusing.
- Find out who this app might be great for. Explore use cases and see if there's a market for this that could make me some beer money. 

If you've made it this far, I'd love your feedback. Comment below or check out [getpushpop.com/support](https://getpushpop.com) (yes it's a support form but just put in whatever you think is good/bad 🙂)