In my last post I explored a few ideas for using desktop native webviews to contain a webapp. There are some pros and cons to said approach, off the top of my head I'd say the pros are smaller app sizes (than what I'm going to share later in the post) and portability of the app; you can distribute it. A con of that approach might be if you just need a PWA you can open chrome > click more tools > create shortcut. This approach will yield a very small app size, but no portability.
So let's explore an interesting tool I found that might be the right solution for your use case. PWABuilder
From what I gather is using a somewhat similar approach, using native code like swift on macos to power a view on the os. It's pretty nifty that you can go to the site enter any url and poof you get a PWA for desktop or android.
Well not exactly, you will get varying mileage from the url you enter depending on how well it's setup as a PWA. something like mobile.twitter.com will work very well, where other sites will need some help. I won't cover too much of setting up a PWA in this post but something like this https://tomitm.github.io/appmanifest/ will get you most of the way; plus serving your site over https and having a service worker.
Next steps are to Build your PWA!
Well not exactly, whichever platform you choose to download, I tried android, windows, and macos; the instructions are kind of missing.
MacOS
You can use Xcode to build this package to produce an app that runs on MacOS.Windows
You'll get a side-loadable version of your PWA (requires Win10 in dev mode) to test your PWA right away. To generate an AppX PWA package and submit to the Microsoft Store, click here
Ok for macOS you can open /projects/mac/MacOSpwa.xcodeproj with xcode you will also need to move the manifest.json (/projects/mac/source/app/src/main/assets/) and files into a folder called PWAinfo, since there is a bug currently https://github.com/pwa-builder/PWABuilder/issues/1008 I found that out the hard way. Click the > arrow to build and run the project. A .app file is also generated for you.
For windows there was a few more steps missing. Firstly you need to enable "Developer mode" I never heard of that before. What helped me with the rest of the steps was this post You will need to run test_install.ps1 in powershell, you will 100% get an error "Missing AppxManifest.xml" open the .ps1 file and update the location of AppxManifest.xml to the full path C:/Users... run the script again and you should have a sort of PWA on windows.
I haven't tried it but theroeticlly if you have a windows developer license you can skip all the above and submit it to the store directly from PWA builder by clicking generate under the the download section and filling out the fields.
Comments and Questions are appreciated! https://twitter.com/cactusanddove/status/1291086540672774145
Top comments (0)