Progressive Web Apps HOWTOs

Learn to build amazing PWAs

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