Update develop.md sw docs

turns out http://localhost runs service workers just fine on all desktop
browsers 🤷
pull/751/head
nimbleghost 2023-06-14 23:41:57 +02:00
parent 83eb4c39e5
commit fa418eef16
2 changed files with 2 additions and 39 deletions

View File

@ -267,37 +267,8 @@ Reference: <https://stackoverflow.com/questions/34160509/options-for-testing-ser
- Set the `web_push_public_key` correctly. - Set the `web_push_public_key` correctly.
4. Run `ENABLE_DEV_PWA=1 npm run start` - this enables the dev service worker 4. Run `npm run start`
5. Set your browser to allow testing service workers insecurely:
- Chrome:
Open Chrome with special flags allowing insecure localhost service worker testing insecurely
```sh
# for example, macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
--user-data-dir=/tmp/foo \
--unsafely-treat-insecure-origin-as-secure=http://localhost:3000,http://localhost
```
- Firefox:
See here: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
> Note: On Firefox, for testing you can run service workers over HTTP (insecurely); simply check the Enable Service Workers over HTTP (when toolbox is open) option in the Firefox Devtools options/gear menu
- Safari, iOS:
There doesn't seem to be a good way to do this currently. The only way is to serve a valid HTTPS certificate.
This is beyond the scope of this guide, but you can try `mkcert`, a number of reverse proxies such as Traefik and Caddy,
or tunneling software such as [Cloudflare Tunnels][cloudflare_tunnels] or ngrok.
[cloudflare_tunnels]: https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/do-more-with-tunnels/trycloudflare/
6. Open <http://localhost:3000/>
#### With a built package #### With a built package
1. Run `make web-build` 1. Run `make web-build`

View File

@ -3,13 +3,6 @@ import { defineConfig } from "vite";
import react from "@vitejs/plugin-react"; import react from "@vitejs/plugin-react";
import { VitePWA } from "vite-plugin-pwa"; import { VitePWA } from "vite-plugin-pwa";
// please look at develop.md for how to run your browser
// in a mode allowing insecure service worker testing
// this turns on:
// - the service worker in dev mode
// - turns off automatically opening the browser
const enableLocalPWATesting = process.env.ENABLE_DEV_PWA;
export default defineConfig(() => ({ export default defineConfig(() => ({
build: { build: {
outDir: "build", outDir: "build",
@ -18,7 +11,6 @@ export default defineConfig(() => ({
}, },
server: { server: {
port: 3000, port: 3000,
open: !enableLocalPWATesting,
}, },
plugins: [ plugins: [
react(), react(),
@ -27,7 +19,7 @@ export default defineConfig(() => ({
injectRegister: "inline", injectRegister: "inline",
strategies: "injectManifest", strategies: "injectManifest",
devOptions: { devOptions: {
enabled: enableLocalPWATesting, enabled: true,
/* when using generateSW the PWA plugin will switch to classic */ /* when using generateSW the PWA plugin will switch to classic */
type: "module", type: "module",
navigateFallback: "index.html", navigateFallback: "index.html",