Add PWA to web app #1175
Add PWA to web app #1175
Conversation
|
@luis-c465 is attempting to deploy a commit to the jeffvli's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
kgarner7
left a comment
There was a problem hiding this comment.
Thanks for the update. The problem appears to be the way that index.html is generated, where it still tries to load from ./sw.js
<script id="vite-plugin-pwa:inline-sw">if('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('./sw.js', { scope: '/' })})}</script>It looks like you should change https://vite.dev/config/shared-options.html#base (./assets).
To test this, I recommend using the docker build and making sure it works
docker build -t feishin .
docker run -d --name feishin -p 9180:9180 feishin(You may need to do this over https, as service worker registration is very picky)
|
TLDR, I tried for a long time to get the VitePWA plugin working while the sw.js and manifest are in the assets directory though could not get it to work. Instead, make a one line change to the nginx template config to allow files to be served from the root. I had initially tried to get the PWA working while putting the manifest and the sw in the assets directory though that lead to 2 issues:
While the 2 issues above could be fixed by finicking with configuration till it works, it may be better to make an exception for both of those files and allow them to live at the root of the site. To allow that I removed a remove the Testing this with docker the app is working as expected and no errors are shown in the console, even when the network is disabled in the developer console. |
|
Ah, I actually apologize greatly; your prior fix did work (I hadn't pulled it). That has a minimal set of changes, so it's preferable. |
This reverts commit 4c27d92.
|
@kgarner7 I reverted the commit to put the sw and manifest at the root. |
This PR adds PWA functionality for the web version of feishin.
The PWA functionality allows the app to be downloaded and added to the desktop as a normal desktop app, creating its own window when opened. Though it will use the browser that the user downloaded the PWA from to run the web app.
Why not just use the normal desktop app
In my case there are a couple or reasons:
The changes
To add the PWA a development dependency is added vite-plugin-pwa.
This plugin handles creating both the manifest file for the PWA, and the service worker which allows the servers assets (HTML, CSS, JS) to be cached on the device.
When the web version is built, the plugin will create both the manifest file and the service worker file and place them in the assets' directory.
As a final change, since the PWA manifest needs both icons and a screenshot preview of the app, some icons and media screenshots are included in the final build.
Notes