WordCamp PWA Retrospective

Leading up to WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Europe, the organising team was hard at work on enhancing WordCamp.org to be a progressive web application (PWA).

This was deployedDeploy Launching code from a local development environment to the production web server, so that it's available to visitors. in the days leading up to the camp, with tweaks being made during the event itself. The goal for the project was to deliver an MVPMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia for WordCamp Europe 2019 and then continue iterating on that work in order to make the PWA features useful for all WordCamps.

Current Status

The work for the PWA features was initially done as a standalone plugin and has now been merged into the WordCamp.org code repository. It uses the PWA feature plugin as the underlying framework, and adds some additional custom code on top of that. For now, it is only active on the WordCamp Europe 2019 website, as it is not yet ready to be used more widely.

The PWA features enhancing the site are:

• Offline content:
  • Once you visit a page while online, it will be saved on your device so that you can access it while offline; e.g., if the venue WiFi fails during the event. (Caveat 1, 2)
  • When you’re offline and visit a page that isn’t saved, you’re shown a special page template that includes the schedule. In the future it’ll also have additional critical information, like the date and location of the event.
• Static asset caching. Files and REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. endpoints that don’t change frequently (e.g., CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site., JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/., image files) are cached more aggressively, so that pages load faster on subsequent visits.
• Add to home screen. You can “install” WordCamp.org on your mobile device, similar to how you’d install a native app, so that you have quick access to it. In the future visitors who’ve installed it may save all of the content offline, or have access to other enhancements.
  • Older versions of iOSiOS The operating system used on iPhones and iPads. don’t support this feature.

In addition to those traditional PWA features, the team also built a custom “Day of Event” page template. This can be used while the event is happening, to show a real-time schedule of the sessions that are currently going on, the ones that are coming up next, and the latest posts from the WordCamp’s blog. It is available to all visitors, even if their browsers are too old to support PWA features.

Except for adding the site to your home screen, all of the features above are available to visitors regardless of their device, and work the same way on desktops and laptops as they do on mobile devices.

Some additional features that were discussed, but could not be built in time, are:

• Offline caching for session info and speaker info by default (i.e. without having to visit the relevant pages first)
• Mobile-optimised site headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and footer
• Push notifications for upcoming sessions that the user has marked as favourites
• Push notifications for important announcements

Thanks to everyone who has been involved in the PWA project, either by creating designs, giving feedback on wireframes, providing guidance, offering ideas or writing code:

@mburridge, @ziontrooper, @avillegasn, @Iceable, @tfrommen, @macloune, @marcusjwilson, @vdwijngaert, @westonruter, @hlashbrooke, @iandunn, @tjnowell, @jb510, @coreymckrill, @andreamiddleton, @sippis, @melchoyce, @karmatosed, @garyj, @webcommsat

Reflecting on the Process

Now that WordCamp Europe is over, it would be helpful to have a look at the development process and how it all went. So, if you were involved in the project in any way, then your feedback here would be valuable. Please comment below answering the following questions:

1. What went well in the PWA development project? (What should continue?)
2. What do you think did not go so well? (What should stop?)
3. What do you think we could do differently when developing new features or tools for WordCamp.org? (What new things/practices should start?)

#pwa