rtcamp/pwa-extension

Enables PWA features such as add to homescreen, offline reading features.

The latest PWA plugin 0.6.0 now has offline caching for theme assets, uploaded images, navigations and manifest for app icon as well, so this extension is no longer needed.

PWA Extension

An extension to PWA to enable/activate add to homescreen and offline reading features of PWA.

Author: rtCamp

Tags: pwa Requires at least: 4.9 Tested up to: 5.7.1 License: GPLv2 or later Requires PHP: 5.4+

Requirements

• The Official PWA Plugin.
• Generate the PWA Icons and put the icons in theme's /assets/img/ directory. You can use this site to generate icons. (Example path for 512x512 size will be /assets/img/icon-512x512.png)

Features

• Add to Home Screen popup for mobiles with custom icon setup in WP theme (your-theme/assets/img/icon-{width}x{height}.png).
• Offline reading by caching assets and pages.

Offline Form Submission.

• Submit gravity form even if you are offline. The plugin will send form response once you get back online.
• The offline form submission will only work for the routes added to the plugin settings page.
• If no routes are set the offline form submission script will not be enqueued. e.g Enable offline form submission with following settings for the forms available on routes example.com/contact and example.com/feedback

/contact
/feedback

Steps to setup add to home screen for your site.

• Add app icon images of all sizes in your WordPress theme assets folder with /assets/img/icon-{width}x{height}.png path
• The valid size of the images can be 72x72, 96x96, 128x128, 144x144, 152x152, 192x192, 384x384, 512x512.
• Example image file name icon-192x192.png.
• The path of the icons can be changed with rt_pwa_extensions_app_icon_{height}_{width} filter
• Example snippet to change icon src.

add_filter( 'rt_pwa_extensions_app_icon_72_72', 'update_icon_src' );
/**
 * Updates icon src.
 *
 * @return string
 */
function update_icon_src() {
	return 'www.example.com/new-image.png';
}

Integration with izooto plugin.

• The iZooto plugin must be installed and activated to use the izooto notification services.
• Registers izooto service worker using wp_front_service_worker hook to main service worker file
• Removes Service worker code of izooto from ?izooto=sw to prevent conflicting it with main service worker.

Contributors

• Chandra Patel
• Pradeep Sonawane
• Sagar Nasit
• Deepak Lalwani

Contribute

Reporting a bug 🐞

Before creating a new issue, do browse through the existing issues for resolution or upcoming fixes.

If you still need to log an issue, making sure to include as much detail as you can, including clear steps to reproduce your issue if possible.

Creating a pull request

Want to contribute a new feature? Start a conversation by logging an issue.

Once you're ready to send a pull request, please run through the following checklist:

1. Browse through the existing issues for anything related to what you want to work on. If you don't find any related issues, open a new one.

2. Fork this repository.

3. Create a branch from develop for each issue you'd like to address and commit your changes.

4. Push the code changes from your local clone to your fork.

5. Open a pull request and that's it! We'll with feedback as soon as possible (Isn't collaboration a great thing? 😌)

6. Once your pull request has passed final code review and tests, it will be merged into develop and be in the pipeline for the next release. Props to you! 🎉

Change Log

v1.0.3 (14-07-2020)

• Add support for gravity form offline submission.
• Add rt_pwa_extensions_app_icon_{height}_{width} filter to change app icon path.

v1.0.2 (24-12-2019)

• Restructure plugin.

v1.0.1 (24-12-2019)

• izooto push notifications plugin integration.

v1.0.0 (12-09-2019)

• Add to Home Screen popup for mobiles with custom icon setup in WP theme (<your-theme>/assets/img/icon-{width}x{height}.png'.
• Offline reading by caching assets and pages.

Unit testing

• Setup local unit test environment by running script from terminal

./bin/install-wp-tests.sh <db-name> <db-user> <db-pass> [db-host] [wp-version] [skip-database-creation]

• Execute phpunit in terminal from repository to run all test cases.

• Execute phpunit ./tests/inc/test-class.php in terminal with file path to run specific tests.

Does this interest you?

pwa-extension's Issues

Conflicts with iZooto plugin

Test Environment:
Plugins active:
Official PWA plugin: v0.3.0
rt PWA Extension: v1.0.2
iZooto plugin: v3.6.6

1. Offline reading is working in mobile ✔️ and while checking in desktop ✖️ faced errors in the console. Please check the screenshot.
   

2. Add to Home Screen - Add to home screen option was not visible in mobile ✖️ . On desktop the install option is shown on the browser bar ✔️ . On mobile tried clearing cache but still the add to home screen option was not visible. Note: http auth is been removed from the site

3. iZooto Push Notifications - Push notifications are working in both mobile and desktop. Created Post and enabled notification option on post publish/update notifications are triggered on mobile and desktop.

Note:
The above 1st and 2nd issues occurs when iZooto pluign is enabled. If this plugin is disabled then above mentioned issues works fine.
iZooto plugin is creating conflicts with the other features, offline reading and Add to Home screen.

Utilize site icon customizer option for PWA icon

Current code asks for separate /assets/img/icon-%2$sx%2$s.png inside theme. We can utilize site icon itself to generate app icon sizes.

Goal is to make manifest file ready for all WordPress sites, and with just site icon add-to-homescreen feature can be enabled.

• Use site icon to generate PWA app icon sizes - https://github.com/rtCamp/pwa-extension/blob/master/class-pwa-manifest.php#L32-L35
• Add filter for App Icon URLs so that we can filter Icon URLs if needed.

Navigation preload is continuously reloading when offline

When offline, the webpage reloads continuously, maybe due to service worker navigation preload. Please fix it.

[PWA] Offline Google Analytics

Refer - https://developers.google.com/web/ilt/pwa/integrating-analytics

Gravity form submission does not work if the current form URL is added in the menu

Tracking this #18 (comment) here

The Gravity form submission does not work if the form page is part of the menu. When the menu precache tries to precache the form URL the does not submit and just redirects to the current page.

Version: 1.0.3(Develop)

Ways to reproduce:

1. Create a page with gravity form.
2. Add page to the menu
3. Try to submit the gravity form on that page it will redirect to the same page.
4. Remove the page from the menu and the submission works fine for that form.

[PWA] Precache site assets and current page

Precaching for site assets and homepage URL

Since first page load is not storing the cache offline, as a result after first page load, if internet goes off, first page load will not be loaded offline even when it was accessed fully.
We should try adding current page to the precache.

To explain the problem -

1st page load -

2nd page load (reloading homepage or accessing precached pages) -

3rd page load (making network request. ie. accessing page which was not precached earlier) -

Current page can be anything like homepage or contact page, depending on users first landing page from organic search.

1. Site assets - such as *.css, *.js including workbox library -

https://rtcamp-v9.dev3.rt.gw/wp-content/plugins/pwa/wp-includes/js/workbox/workbox-strategies.dev.js

2. Current page - users first page load.

Ideally function like this should solve first page load issue.

        $scripts->precaching_routes()->register(
                'https://rtcamp-v9.dev3.rt.gw/wp-content/plugins/pwa/wp-includes/js/workbox/workbox-strategies.dev.js',
                array(
                        'revision' => get_bloginfo( 'version' ),
                )
        );   
} );

@chandrapatel
We should probably add an option to select theme or other assets to add to precache list like this - GoogleChromeLabs/pwa-wp#25 (comment)

Development and contribution workflow

Workflow:

• Every PR needs to be merged to develop branch first.
• Need to test on develop
• If the test goes good and QA approves then only create a PR against master.
• Need to plan a release with changelog.
• No PR will go to master directly

@sagarnasit

• Update Readme with the descriptive workflow
• Add section for the contributors (steps as this repo is public)

@DevikVekariya

• Make the master branch protected
• Add rule for the PRs, to get minimum 1 approval to merge.

[PWA] Precache active menu pages when the site is accessed.

Precache Header Menu Pages when homepage is accessed.

Continuing this - https://github.com/rtCamp/labs/issues/7#issuecomment-567884779

Development notes -

1. Since sites can have any number of pages, we can provide an option to select menus to precache, so that on homepage access, other links can be precached and made available offline for later use.
2. Precache should also have a limit of 10 pages / links so as to make it performant.

[PWA] Disable workbox console messages

Workbox use WP_DEBUG constant to detect Dev or Prod. So if we have WP_DEBUG log true and WP_DEBUG_DISPLAY as false, it will log errors/messages in console by default.

https://github.com/GoogleChrome/workbox/blob/6845f53c0053a4f162475d678bbd7a9e385b53d0/packages/workbox-core/src/_private/logger.ts#L24

Need to inject this script in the service worker through PWA plugin filters. As specified here - GoogleChrome/workbox#2296

self.__WB_DISABLE_DEV_LOGS = self.__WB_DISABLE_DEV_LOGS || false;

Setup and add unit test cases

• Create a setup for Php Unit Tests along with the documentation.

Acceptance Criteria:

• Each class and its method should pass though the Php Unit test case
• If any of the methods is ignored then, it should have proper docs with a reason to ignore it.
• It should have detailed documentation for the local setup of Unit tests and how to run it locally.

[PWA] Push notification plugins support

Overview

There are multiple third-party plugins available for Push notifications. Such as Izooto, Onesignal
See the complete list here -
https://www.wpexplorer.com/wordpress-push-notification-plugins/
We need to add a support for these plugins/services.

Goal

Have an option on plugin settings page where user can select which push notification service to use. Either OneSignal or iZooto or some other.

Tasks

• Create an option (radio button) to choose push notification service
• Any additional fields for secret-keys or api keys that push notifications plugin would need.

**updated

• Web push notification support for new posts without node/thirdparty services.

Remove some features in favor of the official pwa plugin

With the latest official PWA plugin releasing we will get some features already in it.

Following work we need to do in PWA Extension to make it work well with official PWA plugin:

• Remove "Add home to screen" work
• Remove Assets caching feature
• Remove Navigation caching feature
• Add Code snippet to enable SVG files caching in uploaded images cache. (mostly we use SVG logos which don't get offline cached due to svg restriction)

add_filter( 'ext2type', static function ( $ext2type ) {
	$ext2type['image'][] = 'svg';
	return $ext2type;
} );

In our internal QA we found these issues:

• Enabled both PWA main and rt PWA extension plugin and performed quick sanity and following are the observations.
• If both plugins are active then Add to home screen is not appearing. If only PWA main plugin is active Add to home screen is appearing
• Offline reading is working as expected
• If both plugins are active then the Navigation cache and Uploaded images are not getting created.