Progressive Web Apps HOWTOs

Learn to build amazing PWAs

Category: Progressive Web Apps

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

Co-founder & CTO at Appticles.com – a platform for building progressive web apps. As an extension of the platform, Appticles has a WordPress plugin (WordPress Mobile Pack) that has surpassed 1M downloads.

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

Tech-Biz in between guy. CEO at Appticles. Organizer at BucharestJS & JSHacks. Passionate about entrepreneurship. Love to play 🎾, squash and 🏓.

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

Co-founder & CTO at Appticles.com – a platform for building progressive web apps. As an extension of the platform, Appticles has a WordPress plugin (WordPress Mobile Pack) that has surpassed 1M downloads.

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

Tech-Biz in between guy. CEO at Appticles. Organizer at BucharestJS & JSHacks. Passionate about entrepreneurship. Love to play 🎾, squash and 🏓.

Powered by WordPress & Theme by Anders Norén