chore!: remove service worker altogether

it was just too complicated

Author: johannschopplich

.env.development.example

@@ -8,7 +8,6 @@ KIRBY_DEV_PORT=8080
 KIRBY_DEV_PROTOCOL=http
 VITE_DEV_PORT=3000
 
-VITE_SERVICE_WORKER=false
 VITE_STALE_WHILE_REVALIDATE=false
 
 # API slug to fetch JSON-encoded page data from

.env.production.example

@@ -8,7 +8,6 @@ KIRBY_DEV_PORT=8080
 KIRBY_DEV_PROTOCOL=http
 VITE_DEV_PORT=3000
 
-VITE_SERVICE_WORKER=false
 VITE_STALE_WHILE_REVALIDATE=false
 
 # API slug to fetch JSON-encoded page data from

.github/kirby-vue-3-cache-and-store.png

@@ -22,4 +22,3 @@ vendor
 # Build assets
 /public/assets
 /public/dist
-/public/service-worker.js

.gitignore

@@ -22,7 +22,6 @@
 - 🔍 SEO-friendly: [server-side generated](https://github.com/johannschopplich/kirby-extended/blob/main/docs/meta.md) meta tags
 - 🌐 [Multi-language](#multi-language) support
 - ♿ Accessible frontend routing
-- 🚝 [Offline-first](#caching--offline-capability-with-service-worker)
 - 💫 [Stale-while-revalidate](#stale-while-revalidate) page data
 
 ## Alternatives
@@ -60,12 +59,6 @@ kirby-vue3-starterkit/
 |   |   # Kirby's media folder for thumbnails and more (not tracked by Git)
 |   └── media/
 |
-|   # Various development-related Node scripts
-├── scripts/
-|   |
-|   |   # Service worker generator (optional)
-|   └── buildServiceWorker.js
-|
 |   # Kirby's core folder containing templates, blueprints, etc.
 ├── site/
 |   ├── config/
@@ -116,9 +109,6 @@ kirby-vue3-starterkit/
 |   |   |   # Returns page data for the current path, similarly to Kirby's `$page` object
 |   |   ├── usePage.js
 |   |   |
-|   |   |   # Various service worker methods like registering
-|   |   ├── useServiceWorker.js
-|   |   |
 |   |   |   # Returns a object corresponding to Kirby's global `$site`
 |   |   └── useSite.js
 |   |
@@ -137,8 +127,7 @@ kirby-vue3-starterkit/
 |   |
 |   ├── App.vue
 |   ├── index.css
-|   ├── index.js
-|   └── serviceWorker.js
+|   └── index.js
 |
 |   # Contains everything content and user data related (not tracked by Git)
 ├── storage/
@@ -160,20 +149,12 @@ kirby-vue3-starterkit/
 
 </details>
 
-## Caching & Offline Capability With Service Worker
+## Caching
 
-Even without a service worker installed, the frontend will store pages between individual routes/views. When the tab get reloaded, the data for each page is freshly fetched from the API once again.
-
-For offline capability of your Vue app, you can choose to activate the included [service worker](src/serviceWorker.js).
-
-A visual explanation of both methods can be found in the following flow chart:
+The frontend will store pages between individual routes/views. When the tab get reloaded, the data for each page is freshly fetched from the API once again.
 
 ![Caching for Kirby and Vue 3 starterkit](./.github/kirby-vue-3-cache-and-store.png)
 
-The service worker precaches all CSS & JS assets required by the Vue app and caches the data of every requested page. All assets are versioned and served from the service worker cache directly.
-
-Each JSON request will be freshly fetched from the network and saved to the cache. If the user's navigator turns out to be offline, the cached page request will be returned.
-
 ## Stale-While-Revalidate
 
 The stale-while-revalidate mechanism for the [`usePage`](src/composables/usePage.js) hook allows you to respond as quickly as possible with cached page data if available, falling back to the network request if it's not cached. The network request is then used to update the cached page data – which directly affects the view after lazily assigning changes (if any), thanks to Vue's reactivity.
@@ -292,14 +273,6 @@ Then, visit the panel and add new languages by your liking. The Panel **automati
 
 Language data is provided by the global `site` object, which can be accessed via the `useSite()` hook.
 
-### Service Worker
-
-To enable the **service worker** which precaches essential assets and page API calls for offline capability, set:
-
-- `VITE_SERVICE_WORKER` to `true`
-
-> ⚠️ Don't change the `CONTENT_API_SLUG` once you deployed your app publicly and thus a service worker is installed on clients. Otherwise fetch requests will fail and a blank page will show until the new service worker is activated, which then is only possible by closing the tab/PWA.
-
 ### Stale-While-Revalidating
 
 To keep page data fresh with **stale-while-revalidate**, set:

README.md

@@ -4,7 +4,7 @@
   "scripts": {
     "kirby": "env-cmd --use-shell \"php -S \\$KIRBY_DEV_HOSTNAME:\\$KIRBY_DEV_PORT -t public vendor/getkirby/cms/router.php\"",
     "dev": "shx touch src/.lock && concurrently \"npm:kirby\" \"vite\"",
-    "build": "shx rm -f src/.lock && vite build && node scripts/buildServiceWorker.mjs",
+    "build": "shx rm -f src/.lock && vite build",
     "lint": "eslint \"src/**/*.{js,vue}\"",
     "lint:fix": "npm run lint -- --fix",
     "format": "prettier --write \"src/**/*.{js,vue}\""
@@ -19,13 +19,11 @@
     "@types/node": "^18.7.4",
     "@vitejs/plugin-vue": "^3.0.3",
     "concurrently": "^7.3.0",
-    "consola": "^2.15.3",
     "dotenv": "^16.0.1",
     "env-cmd": "^10.1.0",
     "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-vue": "^9.3.0",
-    "nanoid": "^4.0.0",
     "prettier": "2.7.1",
     "shx": "^0.3.4",
     "unplugin-vue-components": "^0.22.4",

package-lock.json

@@ -9,7 +9,6 @@
     </main>
   </div>
 
-  <UpdateNotification />
   <Footer />
 </template>
 

package.json

@@ -18,7 +18,7 @@ import { useSite } from "~/composables";
 const site = useSite();
 </script>
 
-<style>
+<style scoped>
 .footer {
   padding: 1.5rem 5vw 10vh;
   text-align: center;

scripts/buildServiceWorker.mjs

@@ -27,7 +27,7 @@ const site = useSite();
 const route = useRoute();
 </script>
 
-<style>
+<style scoped>
 .header {
   margin-bottom: 1.5rem;
 }

src/App.vue

@@ -6,7 +6,7 @@
   </header>
 </template>
 
-<style>
+<style scoped>
 .intro {
   padding: 10vh 0;
   text-align: center;

src/components/Footer.vue

@@ -1,10 +1,5 @@
 <template>
-  <a
-    ref="skipLink"
-    href="#main"
-    class="skip-to-content-link"
-    @click.prevent="navigate()"
-  >
+  <a ref="skipLink" href="#main" class="skip-link" @click.prevent="navigate()">
     Skip to content
   </a>
 </template>
@@ -30,15 +25,15 @@ function navigate({ target }) {
 }
 </script>
 
-<style>
-.skip-to-content-link {
+<style scoped>
+.skip-link {
   position: absolute;
   top: 0;
   left: 50%;
   padding: 0.5rem;
   transform: translate(-50%, -100%);
 }
-.skip-to-content-link:focus {
+.skip-link:focus {
   transform: translate(-50%, 0);
   /* Copy the browser's native focus styles */
   outline: 5px auto Highlight;

src/components/Header.vue

@@ -2,5 +2,4 @@ export { default as useAnnouncer } from "./useAnnouncer";
 export { default as useKirbyApi } from "./useKirbyApi";
 export { default as useLanguages } from "./useLanguages";
 export { default as usePage } from "./usePage";
-export { default as useServiceWorker } from "./useServiceWorker";
 export { default as useSite } from "./useSite";

src/components/Intro.vue

@@ -54,15 +54,6 @@ export default (path) => {
         router.replace({ path: "/error" });
         return;
       }
-
-      // Redirect to offline page if page hasn't been cached either in-store or
-      // by the service worker and the offline fallback JSON was returned
-      // Note: data for `home` and `offline` pages are always available since they
-      // are precached by the service worker
-      if (data.__isOffline) {
-        router.replace({ path: "/offline" });
-        return;
-      }
     }
 
     // Append page data to reactive page object

src/components/SkipToContentLink.vue

@@ -1,5 +1,4 @@
 import { createApp } from "vue";
-import { useServiceWorker } from "./composables";
 import App from "./App.vue";
 import "./styles/main.css";
 
@@ -12,6 +11,3 @@ for (const m of Object.values(
 }
 
 app.mount("#app");
-
-const { initSw } = useServiceWorker();
-initSw();