This sample app was created for the Pluralsight course, Testing Progressive Web Apps by Kamran Ayub. The app itself is a demo Progressive Web App written in React and TypeScript using the Ionic Framework.
- 📹 Course: Testing Progressive Web Apps (and materials repo)
- 🌎 Sample: https://carved-rock-order-tracker-pwa.netlify.app/
- Customized install prompt (Chrome/Edge)
- Service worker caching and bypass implementation
- Local notifications
- Responsive design for mobile, tablet, and desktop
- Continuous integration test suite using GitHub Actions
- Real device testing using BrowserStack
- WebdriverIO and Cypress test examples
Most of the major capabilities of the app and tests were done using Pull Requests where I kept notes and documentation as I worked through the course. You can reference them for more details.
The sample app may evolve over time as new capabilities and features are available to test PWAs but if you need to reference specific code shown in the course, you can view the course repository and associated errata/updates.
The application code and tests are heavily documented for reference.
Clone or fork this repository to explore the code and tests.
The tests can be run without building / running the sample locally. They are in the e2e directory:
cd e2e
# Install dependencies (Cypress, wdio)
npm install
# Open Cypress test runner
npm run cypress
# Run Cypress tests
npm run cypress:run
# Run WebdriverIO tests
npm run wdioThe tests will run against the public URL of the sample app.
You may build the sample locally, though it requires some extra dependencies due to some customized packages and shared modules.
- Node 12.16.3
This project uses Ionic Framework with React.
npm install -g @ionic/cliYou can use the ionic serve --https command:
ionic serve --httpsThis will launch the app on https://localhost:8100/ with a self-signed development certificate.
react-scriptsat4d9fe49e71233fc1e8f05a26eb6e25755637375e(#18)- Uses workbox v5 pre-release
These packages are in .yalc which can be managed by yalc.