nuxt-font-loader VS pwa-module

I'm using https://github.com/ivodolenc/nuxt-font-loader to load my local webfont files. In production, the font renders inconsistently, randomly either rendering or falling back to the sans-serif fallback declaration. Refreshing the page multiple times will give a 50/50 chance of either displaying or not, yet the CSS is loading correctly and the font files are being fetched correctly in inspector.

My go-to is https://pwa.nuxtjs.org/ + pwabuilder. You can have the barebones scaffolding made in 1 minute. Then just add your custom UI/logic, and deploy, and point the PWA Builder at the deployed Nuxt site, and it will generate your App store package.

In terms of stack I would recommend taking a look at Vue and Nuxt. There is a PWA module for Nuxt, which handles everything for you, so you literally only need to add 5 lines of config (implementing service workers yourself can be tedious).

Note that if your original project is built with Nuxt (a Vue meta-framework), you have a better-suited solution readily available in the Nuxt PWA module. Nuxt and its ecosystem of plugins are a bit much to tackle in the scope of this post, but the same PWA general principles we’ll cover here apply there, too. The difference is how the config options are entered. So, while the concepts translate, if you’re using Nuxt, I’ll refer you to the Nuxt PWA module docs for the details.

Documentation

The stack behind Journalistic is Django and Nuxt. The nuxt/pwa module takes care of everything PWA-related on the app side: manifest, service worker, etc. Easy peasy.

It's Nuxt.js with @nuxtjs/pwa, BTW.

Nuxt.js modules: Progressive Web App (PWA)