SPA Transitions, PWA, Technical SEO & Production Deployment
Swup SPA transitions, offline PWA manifests, OpenGraph schemas, and server hardening
Master modern user experiences without single-page app complexity. Implement smooth page transitions with Swup, turn websites into installable Progressive Web Apps with offline service workers, automate OpenGraph and dynamic XML sitemaps, and harden Linux servers for secure production deployments.
Course Prerequisites
- Dynamic Websites, Forms, APIs & Content Systems with Savv and foundational JavaScript/DevOps familiarity.
Part of Academy Track:
What You Will Master
Curriculum Modules (4 Modules)
Explore the structured module breakdown, lesson outcomes, and practical lab exercises.
Module 1: SPA-Like Page Transitions with Swup
4 Lessons • ~5.8 Study Hours (0.58 CEUs)Welcome to Module 1: SPA-Like Page Transitions with Swup. In this section of the curriculum, learners dive deep into foundational and advanced principles designed for production application. This module covers: Understand how Savv delivers a Single Page Application (SPA) feel using Swup without the multi-megabyte bundle overhead or client-side rendering tax of React or Vue.; Master the #savv transition container, craft smooth CSS fade, slide, and scale transitions, and control transition timing via CSS custom properties.; Solve the classic SPA script execution problem: learn how the custom savv:init event re-hydrates interactive UI components, sliders, and animation libraries after page swaps..
The SPA Illusion: How Swup Works without Frontend Framework Overhead
Understand how Savv delivers a Single Page Application (SPA) feel using Swup without the multi-megabyte bundle overhead or client-side rendering tax of React or Vue.
The #savv Transition Container and CSS Animation Classes
Master the #savv transition container, craft smooth CSS fade, slide, and scale transitions, and control transition timing via CSS custom properties.
Managing Third-Party Scripts, Swup Hooks and savv:init
Solve the classic SPA script execution problem: learn how the custom savv:init event re-hydrates interactive UI components, sliders, and animation libraries after page swaps.
Scroll Restoration, Active Link Highlighting, and UX Polish
Polish your SPA navigation: automate scroll restoration to top, handle in-page hash anchors (#features), and synchronize active navigation states dynamically.
Module 2: Progressive Web Apps (PWA) & Offline Capabilities
4 Lessons • ~5 Study Hours (0.5 CEUs)Welcome to Module 2: Progressive Web Apps (PWA) & Offline Capabilities. In this section of the curriculum, learners dive deep into foundational and advanced principles designed for production application. This module covers: Understand Progressive Web App (PWA) architecture: discover how Savv makes websites installable on iOS, Android, and Desktop without separate native apps.; Configure your Progressive Web App through configs/pwa.php: customize app name, short name, theme color, display mode, and high-resolution icons.; Explore how Savv generates and registers sw.js, manages cache lifecycles, and implements cache-first and network-first caching strategies..
PWA Fundamentals: Turning a Savv Website into an Installable App
Understand Progressive Web App (PWA) architecture: discover how Savv makes websites installable on iOS, Android, and Desktop without separate native apps.
Crafting the Web App Manifest: manifest.json & configs/pwa.php
Configure your Progressive Web App through configs/pwa.php: customize app name, short name, theme color, display mode, and high-resolution icons.
Service Worker Architecture: sw.js Caching Strategies
Explore how Savv generates and registers sw.js, manages cache lifecycles, and implements cache-first and network-first caching strategies.
Building an Offline Fallback Page: views/pages/offline.php
Design and build a polished offline fallback screen in views/pages/offline.php, pre-caching contact details and retry triggers when visitors lose connectivity.
Module 3: Technical SEO, Dynamic OpenGraph & Sitemaps
4 Lessons • ~5.3 Study Hours (0.53 CEUs)Welcome to Module 3: Technical SEO, Dynamic OpenGraph & Sitemaps. In this section of the curriculum, learners dive deep into foundational and advanced principles designed for production application. This module covers: Design a technical SEO architecture for Savv: understand crawlability, heading hierarchies, semantic HTML5, and eliminating duplicate content.; Implement dynamic social sharing cards (OpenGraph and Twitter Cards), dynamic canonical links, and Schema.org JSON-LD structured data in views/partials/head.php.; Build a dynamic XML sitemap endpoint at /sitemap.xml that automatically discovers views in views/pages/ and articles in configs/posts.php..
Search Engine Optimization Architecture in Savv
Design a technical SEO architecture for Savv: understand crawlability, heading hierarchies, semantic HTML5, and eliminating duplicate content.
Dynamic Canonical Tags, OpenGraph & Twitter Cards in head.php
Implement dynamic social sharing cards (OpenGraph and Twitter Cards), dynamic canonical links, and Schema.org JSON-LD structured data in views/partials/head.php.
Automated XML Sitemap Generation via Dynamic Savv Route
Build a dynamic XML sitemap endpoint at /sitemap.xml that automatically discovers views in views/pages/ and articles in configs/posts.php.
Core Web Vitals Optimization: Asset Compression, Cache-Control & LCP
Optimize for Google's Core Web Vitals: master Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Gzip/Brotli compression, and Cache-Control headers.
Module 4: Production Hardening, Shared Hosting & Server Deployment
4 Lessons • ~5.8 Study Hours (0.58 CEUs)Welcome to Module 4: Production Hardening, Shared Hosting & Server Deployment. In this section of the curriculum, learners dive deep into foundational and advanced principles designed for production application. This module covers: Lock down your production server: secure .env files, prevent directory traversal, configure file permissions (chmod/chown), and isolate the public/ web root.; Configure production web servers: implement Apache mod_rewrite rules in .htaccess and high-performance Nginx server blocks routing requests through public/index.php.; Deploy Savv to standard shared hosting platforms: structure files outside public_html, configure symlinks or document root overrides, and manage PHP versions..
Security Hardening: Protecting Sensitive Files and .env
Lock down your production server: secure .env files, prevent directory traversal, configure file permissions (chmod/chown), and isolate the public/ web root.
Web Server Configuration: Apache .htaccess vs. Nginx Server Blocks
Configure production web servers: implement Apache mod_rewrite rules in .htaccess and high-performance Nginx server blocks routing requests through public/index.php.
Deploying Savv to Shared Hosting (cPanel / DirectAdmin)
Deploy Savv to standard shared hosting platforms: structure files outside public_html, configure symlinks or document root overrides, and manage PHP versions.
Modern VPS Deployment: Automated Git Deployments & SSL Automation
Implement modern VPS deployments: set up automated Git pull deployments, configure free SSL certificates with Let's Encrypt / Certbot, and run health checks.
Savv Web Engineering Progression
Continue advancing through the sequential curriculum stages of this academy track: