Progressive Web Apps HOWTOs

Learn to build amazing PWAs

New PWA Themes with React, Redux and Semantic UI

As part of our ongoing effort to create progressive web apps based on the newest technologies, we are happy to release 2 new React apps: Base and Folio.

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! 🙂

Mosaic v2.0 – New React PWA on Top of WordPress REST API

Last week was marked by an important release: our first Progressive Web App built for publishers with React JS & Semantic UI.

One of our older apps – Mosaic – was rebuilt from the ground up. It uses the WordPress REST API to retrieve content such as categories, posts and pages.

Compared to v1.0, the new Mosaic comes with:

  • Better performance. The loading of the content from the API and rendering speed have greatly improved.
  • Integration with the latest version of the WordPress REST API.
  • Offline mode. This feature will soon be available for pre-order in the PRO version.

The PWA was built using the following tech stack:

We have a 85% code coverage rate with unit tests and we’re working on improving this rate. While we do our best to catch any bugs out there, we are aware that some of them might escape us. Please reach out if you happen to come across a nasty one 😊.

If you would like to see the PWA in action, you can find a live demo here: https://demo-mosaic-react.wpmobilepack.com

Currently, the production version of the Mosaic mobile PWA can be used through the free Progressive Web Apps plugin available on wordpress.org.

Thunder – UI8 Kit for Progressive Web Apps

We are thrilled to announce the release of Thunder, our first UI8 Kit for building Progressive Web Apps.

Thunder UI Kit is developed in React & Semantic UI and contains 35 screens and 100+ components that you can use out of the box.

Here are the libraries / tools that we have used for implementing the kit:

The layouts from the app are split into multiple components, so they are easy to find and manage.

The kit also includes documentation on how to set up the project and start modifying the app. You can easily add app state management using Redux or Mobx and start transforming it into a fully functional app.

If you would like to see the kit in action, you can find a live demo here: http://bit.ly/ui-kit-thunder-demo

Announcing our Partnership with UI8 to Build Progressive Web App UI Kits

We’re kicking off 2018 with a special announcement: in partnership with UI8.net, we’re working on transforming their most successful UI Kits into ready-to-use components for the fastest growing JavaScript frameworks out there: ReactJS, Angular/Ionic and VueJS.

Read More

How to Build Progressive Web Apps with Angular/Ionic 1.x and WordPress

The term Progressive Web App refers to a group of technologies, such as service workers, and push notifications, that can bring native-like performance and user experience to web apps. The term got coined back in 2015 by designer Frances Berriman and Google Chrome engineer Alex Russell. Some of the characteristics of PWAs are:

  • Progressive – Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
  • Responsive – Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
  • Connectivity independent – Service workers allow work offline, or on low-quality networks.
  • App-like – Feel like an app to the user with app-style interactions and navigation.
  • Fresh – Always up-to-date thanks to the service worker update process.
  • Safe – Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
  • Discoverable – Are identifiable as “applications” thanks to W3C manifests[6] and service worker registration scope, allowing search engines to find them.
  • Re-engageable – Make re-engagement easy through features like push notifications.
  • Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  • Linkable – Easily shared via a URL and do not require complex installation.

Read More

The WordPress Road To The Future Of The Mobile Web Via Progressive Web Apps

With WordPress powering 27.1% of all websites on the internet, Matt Mullenweg has set a new goal for the popular content management system: achieving a 50% market share (the majority of websites). However, he recognized that in order to reach that number and grow even further, “it’s more than just blogs and more than just websites”.

Picking up on Matt’s point and looking at the ecosystem created around WordPress (over 100M total themes downloads and +1B plugins downloads from WordPress.org), I believe it’s time for the WordPress community to step up and establish itself as a technology trendsetter, potentially defining the web trends for years to come.

Read More

Powered by WordPress & Theme by Anders Norén