Allow viewing offline PWA #31
Conversation
Cache all files locally includes fonts and images.
WalkthroughThe pull request introduces enhancements to the Astro project configuration, specifically for the Changes
Possibly related PRs
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
🔇 Additional comments (2)astro.config.ts (1)Line range hint The manifest configuration includes all necessary fields and follows PWA best practices. src/layouts/Layout.astro (1)Line range hint The PWA information is correctly imported and utilized in the layout template. Also applies to: 2-2 Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
✅ All tests successful. No failed tests found. Additional details and impacted files@@ Coverage Diff @@
## main #31 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 11 11
Lines 153 153
Branches 16 16
=========================================
Hits 153 153 ☔ View full report in Codecov by Sentry. |
🔦 Lighthouse Result
📊 Score Scale
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (1)
src/layouts/Layout.astro (1)
PWA configuration needs icon assets and manifest file
The PWA configuration is incomplete. While the service worker and PWA integration are properly set up in
astro.config.ts, critical assets are missing:
- No PWA icons found in the
public/icons/directory- No manifest file present in the
publicdirectory- The configuration references icons through
meta.icon, but the actual icon assets are not presentRequired actions:
- Add PWA icons in various sizes to
public/icons/- Ensure the manifest file is generated or present in the public directory
- Verify that
meta.iconpath in the configuration points to an existing icon🔗 Analysis chain
Line range hint
2-2: Verify PWA prerequisites are complete.Let's ensure all required PWA assets and configurations are in place.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify PWA configuration completeness # Check for manifest file echo "Checking for manifest file..." fd -e webmanifest -e json . public/ # Check for PWA icons echo "Checking for PWA icons..." fd -e png -e ico . public/ # Check for service worker configuration in astro config echo "Checking for service worker configuration..." rg "defineConfig|AstroPWA" -A 10 "astro.config" # Check for PWA types echo "Checking for PWA types..." rg "virtual:pwa" "src/env.d.ts"Length of output: 487
Script:
#!/bin/bash # Let's check for astro config with different extensions and manifest files in root echo "Checking for astro config..." fd "astro.config" . echo "Checking for manifest in root..." fd "manifest" . # Check for PWA-related imports and configurations echo "Checking PWA imports and configurations..." rg "import.*pwa|pwa.*import" . # Check for service worker registrations echo "Checking service worker..." rg "registerSW|serviceWorker" . # Check package.json for PWA dependencies echo "Checking PWA dependencies..." rg "@vite-pwa|@astrojs/pwa" package.jsonLength of output: 977
Script:
#!/bin/bash # Let's check the astro config for PWA configuration echo "Checking PWA configuration in astro.config.ts..." cat astro.config.ts # Check for manifest content echo "Checking for manifest content in public directory..." fd -e webmanifest -e json . public/ -x cat {} # Check for icon assets echo "Checking for icon assets..." fd -t f . public/icons/ || echo "No icons directory found"Length of output: 1844
🛑 Comments failed to post (3)
astro.config.ts (2)
23-25: 🛠️ Refactor suggestion
Review and adjust caching configuration for better offline experience.
The current configuration has several potential limitations:
- The 2.2MB cache size limit might be too restrictive for a PWA that needs to work offline
- The
globPatternsare missing critical file types like CSS, SVG, PNG, and other image formatsConsider applying these improvements:
- maximumFileSizeToCacheInBytes: 1024 * 1024 * 2.2, - globPatterns: ["**/*.{html,js,woff2}"], + maximumFileSizeToCacheInBytes: 1024 * 1024 * 5, // Increased to 5MB + globPatterns: ["**/*.{html,js,css,woff2,png,svg,jpg,jpeg,gif,ico}"],Also, consider creating a dedicated offline fallback page:
- navigateFallback: "/", + navigateFallback: "/offline.html",Committable suggestion skipped: line range outside the PR's diff.
26-32: 🛠️ Refactor suggestion
Optimize caching strategies for different resource types.
The current configuration uses a single NetworkFirst strategy with a misleading cache name for all resources. This approach isn't optimal for PWA performance.
Consider implementing different strategies for different resource types:
runtimeCaching: [ { - handler: "NetworkFirst", - options: { cacheName: "icon" }, - urlPattern: () => true, + urlPattern: /\.(png|jpg|jpeg|svg|gif|ico)$/i, + handler: "CacheFirst", + options: { + cacheName: "images", + expiration: { + maxEntries: 50, + maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days + } + } }, + { + urlPattern: /\.(js|css|woff2)$/i, + handler: "StaleWhileRevalidate", + options: { + cacheName: "static-resources", + expiration: { + maxEntries: 30, + maxAgeSeconds: 7 * 24 * 60 * 60 // 7 days + } + } + }, + { + urlPattern: /^https:\/\/api\./i, + handler: "NetworkFirst", + options: { + cacheName: "api-cache", + networkTimeoutSeconds: 10, + expiration: { + maxEntries: 50, + maxAgeSeconds: 24 * 60 * 60 // 1 day + } + } + } ],This configuration:
- Uses CacheFirst for images
- Uses StaleWhileRevalidate for static resources
- Uses NetworkFirst for API calls
- Adds appropriate cache expiration policies
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.runtimeCaching: [ { urlPattern: /\.(png|jpg|jpeg|svg|gif|ico)$/i, handler: "CacheFirst", options: { cacheName: "images", expiration: { maxEntries: 50, maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days } } }, { urlPattern: /\.(js|css|woff2)$/i, handler: "StaleWhileRevalidate", options: { cacheName: "static-resources", expiration: { maxEntries: 30, maxAgeSeconds: 7 * 24 * 60 * 60 // 7 days } } }, { urlPattern: /^https:\/\/api\./i, handler: "NetworkFirst", options: { cacheName: "api-cache", networkTimeoutSeconds: 10, expiration: { maxEntries: 50, maxAgeSeconds: 24 * 60 * 60 // 1 day } } } ],src/layouts/Layout.astro (1)
64-73: 🛠️ Refactor suggestion
Improve service worker registration and update handling.
The current implementation has several areas for improvement:
- The automatic update without user consent could disrupt the user experience
- Missing error handling for service worker registration
- No visual feedback during updates
- No indication of offline availability
Consider implementing this enhanced version:
<script> import { registerSW } from "virtual:pwa-register"; if ("serviceWorker" in navigator) { const updateSW = registerSW({ onNeedRefresh() { - updateSW(true); + // Show update notification to user + if (confirm('New content available. Reload to update?')) { + updateSW(true); + } + }, + onRegistered(r) { + // Optionally show offline capability notification + console.log('SW registered:', r); + }, + onRegisterError(error) { + console.error('SW registration error:', error); }, }); } </script> +<script> + // Add offline detection + window.addEventListener('online', () => { + document.body.classList.remove('offline'); + }); + window.addEventListener('offline', () => { + document.body.classList.add('offline'); + }); +</script> + +<style> + /* Add offline indicator styles */ + body.offline::before { + content: 'Offline Mode'; + position: fixed; + top: 1rem; + right: 1rem; + background: var(--background); + padding: 0.5rem 1rem; + border-radius: 0.5rem; + z-index: 1000; + } +</style>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.<script> import { registerSW } from "virtual:pwa-register"; if ("serviceWorker" in navigator) { const updateSW = registerSW({ onNeedRefresh() { // Show update notification to user if (confirm('New content available. Reload to update?')) { updateSW(true); } }, onRegistered(r) { // Optionally show offline capability notification console.log('SW registered:', r); }, onRegisterError(error) { console.error('SW registration error:', error); }, }); } </script> <script> // Add offline detection window.addEventListener('online', () => { document.body.classList.remove('offline'); }); window.addEventListener('offline', () => { document.body.classList.add('offline'); }); </script> <style> /* Add offline indicator styles */ body.offline::before { content: 'Offline Mode'; position: fixed; top: 1rem; right: 1rem; background: var(--background); padding: 0.5rem 1rem; border-radius: 0.5rem; z-index: 1000; } </style>
close #
✏️ Description
Cache all files locally including fonts and images.
🔄 Type of the Change