Leading up to WordCamp Europe, the organising team was hard at work on enhancing WordCamp.org to be a progressive web application (PWA).
This was deployed 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 MVP 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 API endpoints that don’t change frequently (e.g., CSS, JavaScript, 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 iOS 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 header 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:
- What went well in the PWA development project? (What should continue?)
- What do you think did not go so well? (What should stop?)
- What do you think we could do differently when developing new features or tools for WordCamp.org? (What new things/practices should start?)