hikari
c1d2e192da
Implements issue #52 - adds complete PWA functionality with offline support, installability, and app-like experience. PWA Features: - Installable on mobile devices and desktop - Offline support with smart caching strategies - App-like experience with standalone display mode - Full-screen mode and app icon on home screen - Install prompt with beautiful banner UI Manifest Configuration: - Created manifest.json with app metadata - App name: "Naomi's Library" - Theme colour: #9d4edd (witchy purple!) - Background colour: #1a1a2e (dark theme) - Display mode: standalone (app-like) - Icons: Multiple sizes specified (72-512px, maskable variants) - Categories: entertainment, lifestyle Service Worker Implementation: - Cache-first strategy for static assets (JS, CSS, fonts, images) - Network-first strategy for API requests with cache fallback - Network-first strategy for HTML pages with cache fallback - Cache versioning: library-v1 (static, dynamic, images) - Automatic cache cleanup on activation - Update checking every 60 seconds - Message handling for cache clearing and skipWaiting Offline Support: - Created offline.html fallback page with beautiful UI - Auto-retry when network comes back online - Purple gradient matching app theme - Informative messaging about offline state Install Prompt: - Created PwaInstallComponent with banner UI - Detects installability and shows prompt - "Install" and "Not Now" actions - Responsive design for mobile and desktop - Session storage for dismissal state - Animated slide-up entrance Services: - PwaService: Manages service worker registration, install prompts, cache clearing - Automatic initialization on app bootstrap - Signals for reactivity: isInstallable, isInstalled, promptEvent - Update detection and notification HTML Updates: - Added PWA meta tags (theme-color, description) - Linked manifest.json - Apple-specific meta tags for iOS support - Apple touch icon specified Build Configuration: - Updated project.json to include PWA assets - manifest.json, service-worker.js, offline.html copied to dist root Integration: - Added PwaService to app bootstrap - Integrated PwaInstallComponent in main app template - Install banner appears at bottom of screen - Dismissible with session storage Technical Notes: - Service worker uses efficient caching strategies per resource type - Handles Chrome extensions and non-HTTP protocols gracefully - Supports message-based cache clearing - Includes skipWaiting for immediate updates - Compatible with iOS, Android, and desktop PWA standards The library is now a fully-functional Progressive Web App that users can install on any device! The app works offline with cached content and provides an app-like experience with no browser UI in standalone mode. Note: App icons still need to be generated/provided (placeholder paths specified in manifest). ✨ This feature was built by Hikari~ 🌸
Library
✨ Your new, shiny Nx workspace is ready ✨.
Learn more about this workspace setup and its capabilities or run npx nx graph to visually explore what was created. Now, let's get you up to speed!
Run tasks
To run the dev server for your app, use:
npx nx serve frontend
To create a production bundle:
npx nx build frontend
To see all available targets to run for a project, run:
npx nx show project frontend
These targets are either inferred automatically or defined in the project.json or package.json files.
More about running tasks in the docs »
Add new projects
While you could add new projects to your workspace manually, you might want to leverage Nx plugins and their code generation feature.
Use the plugin's generator to create new projects.
To generate a new application, use:
npx nx g @nx/angular:app demo
To generate a new library, use:
npx nx g @nx/angular:lib mylib
You can use npx nx list to get a list of installed plugins. Then, run npx nx list <plugin-name> to learn about more specific capabilities of a particular plugin. Alternatively, install Nx Console to browse plugins and generators in your IDE.
Learn more about Nx plugins » | Browse the plugin registry »
Set up CI!
Step 1
To connect to Nx Cloud, run the following command:
npx nx connect
Connecting to Nx Cloud ensures a fast and scalable CI pipeline. It includes features such as:
- Remote caching
- Task distribution across multiple machines
- Automated e2e test splitting
- Task flakiness detection and rerunning
Step 2
Use the following command to configure a CI workflow for your workspace:
npx nx g ci-workflow
Install Nx Console
Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.
Useful links
Learn more:
- Learn more about this workspace setup
- Learn about Nx on CI
- Releasing Packages with Nx release
- What are Nx plugins?
And join the Nx community: