This is the home of the Make Community team for the WordPress open sourceOpen SourceOpen Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project!
Here is where we have policy debates, project announcements, and assist community members in organizing events.
Everyone is welcome to comment on posts and participate in the discussions regardless of skill level or experience.
Get Involved
If you love WordPress and want to help us do these things, join in!
Last year, the WordCampWordCampWordCamps 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 team worked to add PWA features to WordCamp.org. It was used on the WCEUWCEUWordCamp Europe. The European flagship WordCamp event. 2019 site, and was available “in betaBetaA pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.” for anyone who asked to try it out. As of now, these features are available for everyone 🎉
A Progressive Web App is a set of tools that are used to make websites more “app-like”. For sites on WordCamp.org, this is a way to make your site more low-bandwidth friendly with no effort on your part 🙂
These features are:
More browser caching for assets like JS, CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site., and images. New pages will load these assets from the cache first, making subsequent page loads faster.
Pages are also cached, so going back and forth between visited pages will seem near-instant.
The cached pages & assets are available offline, so if someone visits your schedule page, then turns off their wifi, they’ll still be able to load the schedule.
While offline, if they visit a page they haven’t visited before, it’s not cached, but we can show them a custom page — so all new sites now have a draft page called “Offline”.
During the event, site visitors will have the option to “install” your site as an app, all this does is create an icon on their home screen – it does not change the functionality or layout of your site.
How can I use this?
If you’re an organizer, you’ll need to turn it on. This isn’t active for everyone by default. If you want this on your site, you’ll need to do two things:
Edit & publish the Offline page, you’ll find this drafted in your pages
Activate the PWA pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.
If you’re an attendee, you only need to visit the site before going offline. If the WordCamp you’re attending has turned on these features, your browser will automatically use them. You’ll see faster page loads and still get information even without an internet connection.
Leading up to WordCampWordCampWordCamps 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 deployedDeployLaunching 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.
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 APIThe 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., CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site., JavaScriptJavaScriptJavaScript 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 iOSiOSThe 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 headerHeaderThe 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:
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?)
This is an update about plans to enhance the WordCampWordCampWordCamps 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 website as a Progressive Web App for the 2019 Camp. Plans were first announced in this post in February 2019: https://make.wordpress.org/community/2019/02/13/wordcamp-pwa-plugin-proposal-and-designs/
The organising teams from WordCamp Europe 2019 have been working on plans to enhance WordCamp websites by adopting Progressive Web App (PWA) features.
The plan is to provide contextual information for attendees that is served from and integrated with the main WordCamp website, and which can be stored locally on the user’s devices for offline access. This would allow attendees to access key event information in a more immediate and flexible way.
Initially, we had conceptualised this as an additional “layer” of content, which would load “over the top” of the existing Camp website for the duration of the event.
After sharing these original plans, we received a lot of feedback and suggestions from the community. Thank you!
There was much support for adding these progressive enhancements and contextual information for attendees. However, community members felt that progressive enhancements should be made to the existing site website and web pages themselves, rather than creating a separate and additional layer of content.
Based on your feedback, we now intend to take a more integrated approach to this project.
In practical terms, we will build on the great work of Weston Ruter and his Progressive Web App feature pluginFeature PluginA plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins., which brings PWA capabilities – including service workers and the web app manifest – to WordPress. Rather than create a new and separate “layer” of context based information over the WordCamp website, we will instead enhance key pages of the existing WordCamp site – for instance, the Schedule and Speakers pages – to be stored locally on a user’s device for offline access.
In addition, we intend to create a new website homepage for the duration of the WordCamp event to display context based content on the Sessions that are “on now” and “up next”, alongside the latest Posts from the Camp website, to put this key information at the fingertips of attendees.
WordCamp Alerts & Announcements
There was initially some discussion of creating an alerts feed for important announcements at the Camp itself. During the feedback phase, a number of people felt this was unnecessary, overly complicated and could prove a barrier to wider adoption of the PWA functionality by other WordCamps.
As a result, a decision has been made to use the existing Posts functionality from the WordPress installation for the news and alerts feed during the Camp.
Visuals
Below are some visuals of how the home page of the website might appear during the Camp itself. Whilst these designs here are specific to WCEUWCEUWordCamp Europe. The European flagship WordCamp event. 2019, the content would of course take on basic styles – fonts and colours – from its WordCamp site.
Plans for the WordCamp Europe 2019 website homepage (mobile version) Plans for the WordCamp Europe 2019 website homepage (desktop version, screen 1) Plans for the WordCamp Europe 2019 website homepage (desktop version, screen 2)
We intend to complete this work in time for WCEU 2019. Beyond that, we hope that this enhancement to WordCamp websites would be available to WordCamps around the globe.
Planning is well underway to create a new look Progressive Web App (PWA) for WordCampWordCampWordCamps 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. events.The PWA will make accessing and providing content on mobile devices much easier for attendees and organisers.
This builds on the work to create a PWA for previous WordCamp Europe (WCEUWCEUWordCamp Europe. The European flagship WordCamp event.) events.
However, rather than developing a standalone PWA at a separate URLURLA specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to the WordCamp site, as has been the case in the previous years, the plan is to create a layer of contextual information for Camp attendees that is served from and integrated with the WordCamp website, and which can be stored locally on the user’s devices for offline access.
The PWA will present a better mobile experience, taking advantage of touch screen gestures, and will put the most relevant information “at the fingertips” of Camp attendees. The PWA will enhance a WordCamp website, and will allow users to bookmark the website to their device’s home screen for offline access.
This PWA functionality will initially be created as a pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, displaying an additional visual ‘layer’ of content aimed specifically at attendees, in an ‘App like’ way over the main WordCamp website content. However, both online and offline users will have access to this same layer of content.
WordCamp PWA plugin design proposal v1 – PWA landing page displaying PWA controls over the main WordCamp website
The plugin should be simple to set up and configure, so that – in the longer term – any WordCamp event can take advantage of its features.
This initiative is being led by the WordCamp Europe 2019 Organiser teams, with design prototyping by the WCEU Design team and development by the Attendee Services team. The Communications team is also actively guiding the design and development of the PWA.
The plan
The WordCamp PWA plugin will present an additional ‘layer’ of mobile friendly content over the main WordCamp website – inheriting the basic colours and fonts of the website. However, individual WordCamps should be able to customise the look of the PWA further using CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. overrides.
This PWA layer can be switched on/off from plugin settings within WordPress admin, so that it is only available for the duration of the Camp. When viewing the site on touch screen devices during the Camp, users will see the PWA layer appearing over the top of the WordCamp site.
The PWA controls will look very like a native smartphone App, and will be optimised for touch screen devices, employing swipe gestures.
On loading the website on touch screen devices, the user would be presented with a range of PWA control, docked to the foot of the screen, offering PWA menu options as icons around a large, central, ‘always visible’ circular button that will be used to open/close the PWA layer.
Using the power of PWA, the content of the App will be downloaded and stored offline on the user’s local device, and can be bookmarked on the user’s home screen to be accessed at any time, with or without an internet connection.
The PWA plugin will display a range of key content sections relevant to conference attenders. Each content section will animate open as a panel from the icon at the bottom of the screen. This will initially include the following screens (which relate from left to right to the icons in the image above):
Attendees: a full list of attenders with Gravatars, sorted alphabetically, with search field to look up attendees by name. For GDPR reasons, attendees should not be downloaded and stored offline on the local device – although this may be reviewed in the future in line with GDPR and privacy regulations and with any permissions requested during attendee sign-up.
Speakers: a full list of speakers with GravatarGravatarIs an acronym for Globally Recognized Avatar. It is the avatar system managed by WordPress.com, and used within the WordPress software. https://gravatar.com/., biog and links to relevant sessions, sorted alphabetically, with options to filterFilterFilters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. by schedule date/topic group and search field to look up speakers by name.
Schedule: a full schedule for the WordCamp, with a single column per schedule date, and option to filter by Track. Users will have the ability to ‘favourite’ sessions, and these preferences will be stored on the local device. Columns can be swiped left/right to view previous/next day, and the sessions should be filterable to show just the sessions which the user has marked as their ‘favourite’. Depending on when the schedule is viewed, the schedule list should visibly scroll/animate down to the current time/session, so users can see ‘at a glance’ what is ‘on now’.
Venue Map: one or more graphical floor plans of the venue, with the ability to swipe/pinch to resize and re-position the maps within the viewable area of the screen.
Announcements: a chronological listing of announcements for attendees during the WordCamp, filterable by type (that is, catering, sessions, social, and so on) and can be determined by the WordCamp organisers.
These five sections will be arranged as icons around a large central ‘Start’ button, docked to the bottom of the screen, to allow users to turn the PWA layer on/off. This circular arrangement would allow us to add additional buttons/sections at a later date, and have these icons ‘revolve’ around the main circular ‘Start’ button with swipe gestures.
The content for all the above sections is already present with the WordPress database for WordCamp sites, apart from ‘Announcements’, which will need a new Custom Post TypeCustom Post TypeWordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. to be added, potentially with its own custom taxonomyTaxonomyA taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. (to allow users to filter different types of announcements). Venue Map images may also require the use of one or more custom fields for storage and display.
Tablet view proposals
Landing screen
Sessions
Attendees
Timeframe
The ambition is to pilot a version of the WordCamp PWA plugin at WordCamp London in April 2019, followed by a full launch at WordCamp Europe 2019 in Berlin in June 2019.
Questions
Would you use this PWA plugin for your WordCamp event?
Is the content detailed above the most useful for WordCamp attendees – is anything missing or unnecessary?
Is the design/UIUIUI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. proposed intuitive and accessible?
Any other feedback or observations?
UPDATE: 17 April 2019
After posting these original plans to enhance WordCamp websites with Progressive elements, we received a lot of feedback and suggestions to enhance this development work. Thank you!
Based on this feedback, we now intend to take a more integrated approach to the project.
In practical terms, this will build on the great work of Weston Ruter and his Progressive Web App feature pluginFeature PluginA plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins., which brings PWA capabilities – including service workers and the web app manifest – to WordPress. This will mean that, rather than create a new and separate “layer” of context based information “over” the WordCamp website, we will instead allow key pages of an existing WordCamp site to be stored locally on a user’s device for offline access.
In addition, we would intend to create a new homepage for the website for the duration of the WordCamp to display context based content on the Sessions that are “on now” and “up next”, alongside the latest Posts from the Camp website, to put this key information at the fingertips of attendees.
We intend to complete this work in time for WCEU2019. Beyond that, we hope that this enhancement to WordCamp websites would be available to WordCamps around the globe.
