Mobile Web Application with PWA
Mobile Web Application with PWA is a course in building mobile-first web apps with modern CSS and turning them into Progressive Web Apps that install on the device and work offline, using a manifest and a service worker. It suits web developers and IT teams with HTML, CSS and JavaScript skills, and you leave with a PWA running on a real phone.
- Duration12 hours · 2 days
- FormatOnsite / live online
- Next roundOn request
- CertificateIncluded
Course overview
Most users reach the web from their phones, and many organisations want apps for staff or customers without building separate Android and iOS apps. A Progressive Web App, or PWA, is a web app designed to work well on mobile, install on the home screen, keep working on a weak connection and send notifications in browsers that support them, all from one set of HTML, CSS and JavaScript. It is an economical option that updates instantly without going through an app store.
This new edition starts with mobile-first web app design using modern CSS, including the viewport, Grid, container queries, forms, touch and animation. It then turns the app into a PWA with a web app manifest, a service worker, offline support, Vite PWA with Workbox and device features through web APIs, and finishes with a workshop that installs and tests a PWA on real phones. (2 days, 6 hours per day, 12 hours in total, Intermediate level.)
What you’ll gain
- Understand how mobile web apps are built and choose between a PWA and a native app
- Design mobile-first screens with the viewport, Grid and container queries
- Build forms and touch interactions that are easy to use on mobile
- Create a web app manifest and a service worker so the site installs and works offline
- Use Vite PWA with Workbox and access device features through web APIs
- Test, debug and publish a PWA over HTTPS
Who this course is for
- People interested in building web applications that work on every mobile platform
- Web developers who want their sites to install as apps and work offline
- IT teams who need internal apps without building separate apps for each operating system
- People who have completed an HTML5 and CSS course and want to go further
Prerequisites
- Good knowledge of HTML and CSS, or completion of an HTML5 and CSS course
- Basic JavaScript, such as functions, events and fetch
- A reasonable amount of website building experience
Curriculum
Course Details
This course is the 2026 edition of Mobile Web Application, rewritten around Progressive Web Apps and mobile-first responsive design. It runs for 2 days, 6 hours per day (12 hours in total, 09:00-16:00), as lectures alternating with labs and workshops throughout. Intermediate level. Learners design mobile screens with the viewport, Grid and container queries, build forms and touch interactions, create a web app manifest and a service worker, use Vite PWA with Workbox, access device features through web APIs, and install and test their app on real phones. They take home the source code for every lab.
Day 1 Mobile-First Web Apps
Section 1: Lab: Mobile Web Applications and PWAs Today
- How web apps, PWAs and native apps differ, and how to choose
- Real-world PWA examples and what each browser supports
- Create a project with Vite and emulate phones with Device Mode in DevTools
- Remote debugging on Android with Chrome and on iPhone with Safari
- Lab: open the sample web app on your own phone
Section 2: Lab: The Viewport and Mobile-First Layout
- The viewport meta tag and how it affects mobile display
- dvh, svh and lvh units instead of the 100vh problem on mobile
- Safe areas for notched screens with env(safe-area-inset-*)
- Media queries with range syntax, and placing breakpoints
- Lab: an app shell with a bottom navigation bar pinned to the screen edge
Section 3: Lab: Responsive Components with Modern CSS
- Flexbox and Grid for app screens
- Container queries and cqi units for self-adapting components
- Fluid type and spacing with clamp()
- Responsive images with srcset, sizes and lazy loading
- Lab: product cards and lists that work on any screen size
Section 4: Lab: Forms on Mobile
- Choose type and inputmode so the keyboard matches the data
- autocomplete and enterkeyhint for faster entry
- Easy-to-tap buttons and fields, and readable error messages
- Validate with HTML and submit forms with fetch
- Lab: a registration form you can fill in comfortably with one hand
Section 5: Lab: Touch, Gestures and Animation
- Pointer events and touch-action for tapping and dragging
- Scroll snap for swipeable slides and tabs
- Handle screen rotation with the orientation media query
- Transitions, transforms and @keyframes that stay smooth on mobile
- Lab: a swipe-open menu and page transitions that respect prefers-reduced-motion
Day 2 Installable, Offline-Ready Progressive Web Apps
Section 6: Lab: The Web App Manifest and Installation
- Key manifest members: name, short_name, start_url, display and icons
- 192 and 512 pixel icons, and maskable icons
- theme_color, splash screens and standalone display
- Installing on Android and desktop, and adding to the home screen on iOS
- Lab: make the web app installable and check it in the DevTools Application panel
Section 7: Lab: Service Workers and Offline Support
- The service worker lifecycle: register, install, activate and fetch
- The Cache API and precaching essential files
- Cache-first, network-first and stale-while-revalidate strategies
- An offline fallback page and rolling out new versions
- Lab: an app that opens even with the internet switched off
Section 8: Lab: PWAs with Vite PWA and Workbox
- Install vite-plugin-pwa and configure the manifest in one file
- Precache built files automatically
- Runtime caching for APIs and images
- registerType autoUpdate, and prompting users to update
- Lab: move the app from a hand-written service worker to Workbox
Section 9: Lab: Device Features through Web APIs
- Geolocation and asking users for permission appropriately
- Take or choose photos from the camera, and share with the Web Share API
- Store data on the device with IndexedDB for offline use
- Notifications and Web Push, with the limits of each platform
- Lab: a check-in app with a photo and location
Section 10: Workshop: An Installable PWA
- Combine screens, forms, offline support and device features into one app
- Check the manifest and service worker in DevTools and measure quality with Lighthouse
- Publish over HTTPS with GitHub Pages or Netlify
- Install and test on real Android and iOS phones
- An overview of wrapping a PWA as a store app with Capacitor, and presenting your work
Schedule & training options
For individuals — public rounds
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
For organisations — in-house / private
- Tailor the content to your team’s tools and projects
- Your dates, at your office or live online
- Quotation with tax ID for procurement
Instructors
Frequently asked questions
What is the viewport meta tag, and why do mobile sites need it?
The viewport meta tag is a meta tag named viewport in the head that tells mobile browsers to lay out the page at the real screen width, usually width=device-width and initial-scale=1. Without it, mobile browsers emulate a desktop-width screen and shrink the whole page, so text becomes too small to read and media queries do not respond to the real screen size. For full-height layouts, use dvh units rather than 100vh, because mobile browser bars expand and collapse.
What is a PWA, and how does it differ from an app downloaded from a store?
A PWA, or Progressive Web App, is a web app with a web app manifest and a service worker, so it installs on the home screen, opens full screen like an app and keeps working on a weak connection. It is published as an HTTPS website and updates instantly without waiting for store approval. Native apps can access more device features and can be listed in app stores. Work that needs device-specific features or a store listing can wrap the web app with Capacitor or be built natively instead.
How does a service worker let a website work offline?
A service worker is a script the browser runs separately from the page, and it intercepts every request the page makes for files or APIs. On first install it stores essential files in the Cache API, so it can answer from the cache when there is no connection. You choose a strategy, for example cache-first for files that rarely change and network-first for data that must be fresh, and data saved offline can be kept in IndexedDB. In real projects Workbox through Vite PWA is commonly used to reduce hand-written code.
Who is the Mobile Web Application with PWA course for, and what should I know beforehand?
It suits people who want to build web applications that work on every mobile platform, web developers who want their sites to install as apps and work offline, and IT teams who need internal apps. You should know HTML and CSS well, be able to write basic JavaScript and have a reasonable amount of website building experience, because the course builds directly on these foundations.
What will I be able to do after the Mobile Web Application with PWA course?
You will be able to design mobile-first screens with the viewport, dvh units, Grid and container queries, build forms that are easy to fill in on mobile, handle touch, gestures and rotation, create a web app manifest and a service worker so the site installs and works offline, use Vite PWA with Workbox, access location, the camera, sharing and notifications through web APIs, and publish a PWA over HTTPS and test it on real phones. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.
What tools do I need for the Mobile Web Application with PWA course?
You use Visual Studio Code, Google Chrome with DevTools and Node.js LTS to create projects with Vite and vite-plugin-pwa. Bring your own Android phone or iPhone for installing and testing, and a GitHub account for free HTTPS publishing. Debugging on iPhone through Safari needs a Mac. Wrapping a PWA as a store app with Capacitor is covered as an overview in this course, and building iOS apps requires a Mac with Xcode.