It has never been easier to add progressive web app features (PWA) to your WordPress website. It even supports Accelerate Mobile Pages (AMP) and is compatible with OneSignal!
Provide an integrated user experience!
Progressive WordPress makes it easy to encourage users to add your website to their homescreen. But that's not all. It also allows you to control the display behaviour of your website so it will be shown without any browser elements. Just like a native app.
Make your website reliable. Even on flaky internet connections!
No connection? No problem. Progressive WordPress pre-caches all critical assets of your website, as well as all visited resources. So if there's no internet connection it will serve the resources from the local storage. No more error downasaur!
Send push notifications from the WP Admin interface!
Keep your users engaged by sending push notifications!
You just published new content and you want to let everyone know? Why not send a push notification? Progressive WordPress has an integrated connection to Firebase that lets you manage registered devices and send push notifications to all or selected devices!
Since Version 2.1.0 Progressive WordPress fully supports OneSignal. It detects if the OneSignal WordPress Plugin is active and uses their push messaging functionalities instead.
Progressive WordPress is the first PWA-Plugin for WordPress that also supports Accelerated Mobile Pages!
It precaches required resources, it adds special AMP caching strategies and it registers the ServiceWorker and the Web App Manifest also on AMP Pages.
Progressive WordPress currently supports AMP for WordPress and AMP for WP – Accelerated Mobile Pages.
Progressive WordPress offers a lot of possibilities for developers the extend it the way you need it.
Add pre-cache resource:
function myplugin_offline_precache( $caches ) {
$caches[] = 'https://myurl.com';
return $caches;
}
add_filter( 'pwp_offline_precache', 'myplugin_offline_precache' );Change the site Icon
By default Progressive WordPress takes the WordPress Favicon as the Site Icon. But you can change that by using this filter:
function myplugin_manifest_icon( $attachment_is ) {
return 10; //should be the Post ID of an attachment.
}
add_filter( 'pwp_manifest_icon', 'myplugin_manifest_icon' );Add content to the manifest:
function myplugin_manifest_values( $values ) {
$values['new'] = 'New';
return $values; //needs to be valid an array (will be json_endoded)
}
add_filter( 'web_app_manifest', 'myplugin_manifest_values' );If you are using OneSignal please visit https://documentation.onesignal.com.
customoize Button
If you don't want to use the built in Button, you can create your own from a shortcode or a php function:
// Shortcode
[pwp_notification_button size="1rem" class="your-class"]
// Function
$atts = [
'class' => 'notification-button--fixedfooter',
'style' => "background-color: #ff0000; color: #00ff00; font-size: 35px",
];
pwp_get_notification_button( $atts ); // returns the html template.Filter: pwp_notification_button_attributes
This filter adds custom attributes to the notification button:
function myplugin_notification_button_atttibutes( $attributes ) {
$attributes['data-test'] = 'My value';
return $attributes;
}
add_filter( 'pwp_notification_button_attributes', 'myplugin_notification_button_atttibutes' );The key will be used as attribute key (will be sanitized sanitize_title()), the value will be used as attribute value (sanitized with esc_attr()).
Create your own button
You are also free to create your own button. The states are indicated as body classes:
body.pwp-notification if push notifications are supportedbody.pwp-notification.pwp-notification--on if the device is registeredbody.pwp-notification.pwp-notification--loader if there is something loadingYou can then use the JS functions pwpRegisterPushDevice(); and pwpDeregisterPushDevice();.
Progressive WordPress currently supports AMP for WordPress and AMP for WP – Accelerated Mobile Pages.
You can easily make your AMP Theme or Plugin comatible with the following hooks:
Filter: pwp_site_supports_amp
Should be set to true is the website supports AMP
add_filter( 'pwp_site_supports_amp', '__return_true' );Filter: pwp_current_page_is_amp
Should be set to true is the website supports AMP
function myplugin_current_page_is_amp( $boolean ) {
if ( this_site_is_an_amp_site() ) {
$boolean = true;
}
return $boolean;
}
add_filter( 'pwp_current_page_is_amp', 'myplugin_current_page_is_amp' );Filter: pwp_get_ampurl_from_url
Should return the input-URL or the AMP-Version of this URL if exists.
function myplugin_get_ampurl_from_url( $url ) {
if ( this_url_amp_url() ) {
$url = $url . 'amp/';
}
return $url;
}
add_filter( 'pwp_get_ampurl_from_url', 'myplugin_get_ampurl_from_url' );You can find a working example here: https://github.com/SayHelloGmbH/progressive-wordpress/blob/master/3rdparty-support/amp.php
Your Theme or plugin should also support the amp_post_template_head and amp_post_template_footer actions.
This plugin does not use any Cookies. Also it does not collect any personal information without the following
If the user subscribes to push notifications, the following informations will be saved inside the WP database:
Also if you send push notifications, those will be passed to firebase cloud messaging and they will send it to the client.
pwp_manifest_iconwp_add_inline_scriptWP_Filesystem API instead of php file_put_contentsUse this code freely, widely and for free. Provision of this code provides and implies no guarantee.
Please respect the GPL v3 licence, which is available via http://www.gnu.org/licenses/gpl-3.0.html