PopNote

Qua PWA 錯誤紀錄與解決辦法

閱讀時間約 3 分鐘

I want ask u something this project should have func about PWA, but littery it not, so help me find issue here’s the link https://github.com/PopJoker/obsidian-notes

Copy messageEdit message

I’ll help you debug the PWA issue in your Obsidian Notes project. Looking at the repo (https://github.com/PopJoker/obsidian-notes), here are the most common PWA issues and how to fix them:

🔍 Common PWA Issues & Checklist

1. Missing or Invalid manifest.json

Check if you have a public/manifest.json file. It should look like this:

json

Copy code

{   
	"name": "Obsidian Notes",
    "short_name": "Notes",   
    "description": "Your note-taking app",   
    "start_url": "/",   
    "display": "standalone",   
    "background_color": "#ffffff",   
    "theme_color": "#000000",   
    "icons": [     
	    {      
		    "src": "/icon-192x192.png",       
		    "sizes": "192x192",       
		    "type": "image/png"     
		},     
		{       
			"src": "/icon-512x512.png",       
			"sizes": "512x512",       
			"type": "image/png"     
		}   
	] 
}

Fix: Create this file in public/ and add the required icons (192x192 & 512x512 PNGs).

2. Missing Service Worker

You need a service worker file. Create public/sw.js:

javascript

Copy code

const CACHE_NAME = 'obsidian-notes-v1'; const urlsToCache = [ '/', '/static/js/bundle.js', '/static/css/main.css', '/manifest.json' // Add other critical assets ]; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => response || fetch(event.request)) ); });

3. HTML Head Missing PWA Meta Tags

In your index.html (or main HTML file), add these in <head>:

html

Copy code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- PWA Meta Tags --> <link rel="manifest" href="/manifest.json"> <meta name="theme-color" content="#000000"> <link rel="apple-touch-icon" href="/icon-192x192.png"> <!-- Service Worker Registration --> <script> if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') .then(registration => console.log('SW registered')) .catch(error => console.log('SW registration failed')); }); } </script> </head>

4. Vite/Webpack Config (if using build tools)

If using Vite, add to vite.config.js:

javascript

Copy code

import { defineConfig } from 'vite'; import { VitePWA } from 'vite-plugin-pwa'; export default defineConfig({ plugins: [ VitePWA({ registerType: 'autoUpdate', manifest: { name: 'Obsidian Notes', short_name: 'Notes', icons: [ { src: 'icon-192x192.png', sizes: '192x192', type: 'image/png' }, { src: 'icon-512x512.png', sizes: '512x512', type: 'image/png' } ] } }) ] });

Install: npm i -D vite-plugin-pwa

5. Test Your PWA

  1. Serve locally: npm run dev or yarn dev
  2. Open Chrome DevTools → Application tab
  3. Check Manifest and Service Workers sections
  4. Look for errors in red

🚀 Quick Fix Commands

bash

Copy code

# 1. Install PWA plugin (if using Vite) npm i -D vite-plugin-pwa # 2. Generate icons (optional) npm i -D pwa-asset-generator npx pwa-asset-generator ./logo.png ./public/ --manifest public/manifest.json # 3. Test PWA functionality # Open https://your-app.com in Chrome # Menu → Install app → Should show "Install Obsidian Notes"

📱 Verify PWA Works

  • ✅ “Install” button appears in address bar
  • ✅ Works offline (basic caching)
  • ✅ Launches in standalone mode
  • ✅ Has app icon on home screen

Can you share your current public/ folder structure and index.html head section? That’ll help me pinpoint the exact issue! 🛠️

Copy message

Select Models

Graph View