Together with the Mosaic PWA, these apps are replacing their previous versions, which were based on Sencha Touch. We felt that we could greatly improve their performance by rebuilding them in React.
Here are a few highlights of these apps:
1) Offline Mode and other PWA features
Offline mode is implemented by caching the app shell and the dynamic content read from the API. This creates a complete app-like experience, allowing users to continue navigating through the app even when they don’t have a network connection. Content caching also improves performance, making the app’s loading blazingly fast.
The apps also includes a configurable manifest file for Add to Homescreen. You can also add web push notifications by integrating with the free OneSignal service or other push notifications providers.
Offline mode, A2HS and web push notifications are implemented using service workers and are currently available on Chrome. Safari has also added service workers support in their development version and is expected to make an update soon.
2) Backend based on WordPress REST API
The app’s content is structured around categories, posts and pages. We used the WordPress REST API as a base for retrieving content, however the paths to the API can be replaced with your own backend server.
3) Available tech stack
The full tech stack includes:
- Create-React-App for running the app in development mode and creating production builds.
- React-Semantic-UI (the official React integration for Semantic UI) for UI components such as buttons, grids, forms, etc.
- React-Router for navigating between screens.
- React-Slick for the categories and posts carousels.
- Redux for managing the app state.
- Jest for unit testing. We have a 70-80% code coverage rate with unit tests and we’re working on improving this rate.
- Eslint and the Airbnb coding standard.
We have paid great attention to make sure that the source code is cleaned and organized. This allows you to easily customize an app in development mode and make it your own. But you don’t have to take my word for it 🙂 – you can take a peek at Mosaic app’s source code, available on Github.
Once you’re ready to take these new apps for a spin, you can order them here. Happy coding! 🙂