superpwa / super-progressive-web-apps Goto Github PK

Hi guys,
Every time I use my PWA between online and offline sessions, I see a pretty significant FOUC between pages.
For instance, if I hit my homepage (https://willstocks.co.uk) and then navigate to the first post in the list, I see a plain-text rendering of my page for 0.5s before I see the actual page styled correctly. It's pretty jarring and unattractive!
If I navigate back to home then back into the post, it's fine! But if I close off the "app" (I'm running on iOS 12.1.1) go back online, navigate my site, go back offline and navigate the PWA - I see that flash between content again!

ServiceWork function over https

And spwa generate register-sw.js over http.

function superpwa_register_sw()
{
//need change here
wp_enqueue_script('superpwa-register-sw', SUPERPWA_PATH_SRC . 'public/js/register-sw.js', array(), null, true);
wp_localize_script('superpwa-register-sw', 'superpwa_sw', array(
'url' => superpwa_sw('src'),
)
);
}

Work for me this

function superpwa_register_sw()
{
//replace http by https
$url = preg_replace("/^http:/i", "https:", SUPERPWA_PATH_SRC . 'public/js/register-sw.js');

wp_enqueue_script('superpwa-register-sw', $url, array(), null, true);
wp_localize_script('superpwa-register-sw', 'superpwa_sw', array(
        'url' => superpwa_sw('src'),
    )
);

}

Hi!
Use case:
WordPress Multisite Running on shared hosting on https://yogaandnaturopathy.in

My lighthouse audits are like this:

This medium article seems related:
https://medium.com/progressive-web-apps/im-trying-to-make-a-progressive-web-app-part-5-100-pwa-e27799afd095
As a result, I am prompted to add to the home screen on Firefox, but not on chrome.
Do you think this can be resolved?

I would love to contribute eventually, but I am still learning web development ATM.
Amazing project BTW.

Steps to reproduce

WP Version: 4.9.8
SuperPWA/Super-Progressive-Web-Apps: Master (or) branch-2.0

1. Clone the repo https://github.com/SuperPWA/Super-Progressive-Web-Apps on to wp-content/plugins/
2. Activate the plugin
3. Visit Plugins ⟶ Installed plugins menu from the Admin Dashboard.

You should see a link to Deactivate and no link w/ label Settings.

Hi all,

it is not an issue, just curious to know whether SuperPWA also support AMP?

sorry for my bad English
thanks

To fix it need to create mu-plugin with code like this:

<?php
/**
 * Overriding custom SuperPWA functions before they are loaded for multisite
 */

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$pwa_plugin_name = 'super-progressive-web-apps/superpwa.php';
$pwa_plugin_dir  = ABSPATH . PLUGINDIR . '/' . $pwa_plugin_name;

include_once( ABSPATH . 'wp-admin/includes/plugin.php' );


if ( file_exists( $pwa_plugin_dir ) && is_plugin_active( $pwa_plugin_name ) ) {
	function superpwa_register_sw_mu() {

		$url = superpwa_sw('src');
		$path = parse_url($url, PHP_URL_PATH);
		$url_query = parse_url($url, PHP_URL_QUERY);
		$file_url = ($path ? $path : '') . ($url_query ? '?' . $url_query : '');

		wp_deregister_script( 'superpwa-register-sw' );
		wp_enqueue_script( 'superpwa-register-sw', SUPERPWA_PATH_SRC . 'public/js/register-sw.js', array(), null, true );
		wp_localize_script( 'superpwa-register-sw', 'superpwa_sw', array(
				'url' => $file_url,
			)
		);
	}

	add_action( 'wp_enqueue_scripts', 'superpwa_register_sw_mu', 20 );

}

Related WordPress ticket: https://wordpress.org/support/topic/errors-in-firefox-and-chrome/

SW with filtration for external resources: https://www.dropbox.com/s/7i2lpod3zfjxa94/devenir-superpwa-sw.zip?dl=0

hi,

i get the following ugly error in firefox 59, chrome works

SuperPWA service worker ready
SuperPWA service worker installation
SuperPWA service worker caching dependencies
Service worker event waitUntil() was passed a promise that rejected with 'InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable'.
superpwa-sw.js:1:457
TypeError: ServiceWorker script at https://holospirit.is/superpwa-sw.js for scope https://holospirit.is/ encountered an error during installation.

Any hint why?

Hey. I have a website that I use as 'Online Business Card' type of pages.
Meaning - each one of my clients has a link on my website that is showing their business.
Is there any way that I can make each page separably and save each one as a unique web app?
(in other words - each page will have its own unique web app)
Is it possible?
Thank you

After latest update, my start page isn't opening correct page, opens a random image gallery. I've tryed deleting pwa and reinstalling. Cleared all caches, change start page setting, nothing changes it. Also don't see startpage change in manifest no matter what is selected. Suggestions?
https://caves.org/survey/ics/

Bonjour,

Je rencontre un probleme avec cette application et je n'arrive pas à la faire fonctionner.
the website diane-security.fr.

Site is www.crashcitygames.com. Super PWA not working. ideas?

Environment

• PHP 7.2
• latest WordPress with WP Rocket page caching and file optimisation
• Setting Start Page: — Homepage — (https://glueckpress.com/)
• Setting Offline Page: https://glueckpress.com/you-appear-to-be-offline/

Test:

• Open home page in Chrome (incognito) with emulated mobile phone (browser caches cleared, service worker updated)
• Set network throttling to Offline
• Open for example https://glueckpress.com/9336/amp-and-wordpress/
• Expected behaviour: show Offline Page
• Factual behaviour: shows content of home page under the URL of the post
• Same behaviour with and without page caching/file optimisation
• Same behaviour on a real smartphone (Galaxy S6, Chrome)

Let me know if you need me to test further, or if I missed anything!

Where is that file? How come it still loads?

Hello,

I'm getting this error in Chrome, I don't know what to do about it.
Could be related to the fact that some images are hosted on a cloud platform and origin is not allowed, but honestly, I don't know.
Do you know how I can fix this ?
Thank!

https://www.mal-au-dos.be/

Hi !

We've got an 500 error on Backend, i disabled plugin temporarely but need to fix this ..

2018/04/23 11:15:12 [error] 29813#29813: *1436033 FastCGI sent in stderr: "PHP message: PHP Warning:  require_once({my-path}/wp-content/plugins/super-progressive-web-apps/admin/loader.php): failed to open stream: No such file or directory in {my-path}/wp-content/plugins/super-progressive-web-apps/superpwa.php on line 61
PHP message: PHP Fatal error:  require_once(): Failed opening required '{my-path}/wp-content/plugins/super-progressive-web-apps/admin/loader.php' (include_path='.:/usr/share/php') in {my-path}/wp-content/plugins/super-progressive-web-apps/superpwa.php on line 61" while reading response header from upstream, client: 105.102.84.199, server: frenchmac.com, request: "GET /wp-admin/admin-ajax.php?action=wpp_get_popular&id=12 HTTP/1.1", upstream: "fastcgi://unix:/var/lib/php7.0-fpm/web21.sock:", host: "frenchmac.com", referrer: "https://frenchmac.com/mac/sauvegarder-iphone-disque-dur-externe/"

We use last version of the plugin

Can you help us ?

Hello everybody,

I noticed that there is a feature which Apple provides but this plugin does not use.
As mentioned in the apple developers docs, we are able to add a splash screen to our PWAs on iOS devices. When no specific splash screen is provided, apple inserts a complete white screen which doesn't look good and shows a huge difference between a native app and a PWA.

With this line of code we can provide a custom splash screen:
<link rel="apple-touch-startup-image" href="/launch.png">
Of course we have to provide different images for different screen sizes which are listed here.

With this feature we would get one step closer to native app experience on iOS.

Currently, the manifest Display setting is fixed to Standalone.
It would be nice if we could set that option from the admin, like the other settings.
For example to set it to "fullscreen".

Thank you!

I'm using a page as the start page, but also tried setting the home page. Always get a 404 - Page Not Found when starting the app.

Manifest: ,"start_url":"/favorites/",

I'm using WP Super Cache, and tried deleting the cache.

During a call @mariadanieldeepak suggested the introduction of a setup() or init() function to bring together:

• functions hooked to action hooks.
• loader.php

We could hook this init function to the plugins_loaded WordPress action hook.

Hi, I tried using your plugin and encountered a weird issue, not sure if this is in your ballpark or should I raise this to Chromium, but the manifest file isn't read, I checked the format, but since it's generated it shouldn't have any issue.

https://rumbleroyale.gg/ <- Check this site for the details, service workers got generated just fine.

As part of #68, the SUPERPWA_DEV_MODE constant is introduced. Document on the same.

@arunbasillal This issue can be handled once the Docs post type is set up. Until then, I'm assigning this to you.

Cc: @josevarghese

I'm really bored of bugs that came with this add-on. I've disabled it, removed it but even if I did not intend to use it for my forum software XenForo, PWA fucked it up and keeps messing with it. I do not want to see a superpwa-js app runing for my website, at least until it is completely updated.

Oh BTW, the last bug we encountered was causing the posts to load partially, making only the banner ad visible. You had to do an F5 to load it again...

We are in PWA domain now, so would it not be wonderful to have push notifications when new posts are published, done automatically?

Hi, i have my wordpress installation on a container system which build the filesystem on every update i made to them. This make the files Super PWA creates be deleted from the system every time I made a update.

It's is posible to add an option the plugin to make the files dynamically? So, no file is writen in the filesystem.

I've a problem where PWA dosn't seemto work on my site.

I use cdn enabler to load all my static files from a cdn and it seems to be offloading the manifest to the cdn.

When I first set up onesignal i had to add:

onesignal-free-web-push-notifications to my exclusions to stop it being offloaded, (see https://documentation.onesignal.com/docs/troubleshooting-web-push#section-cdn-enabler)

is there something I'd need to add to stop the PWA manifest from being off loaded as well.

I think I can not merge posts or threads after installing SuperPWA on Worpdress.

https://xenforo.com/community/threads/thread-and-post-merge-in-xenforo-2-0.144776/

What I am seeing is that the ajax request for inline moderation initially spawns two requests, XenForo and then superpwa. Afterwards all subsequent requests appear to be malformed with cached results.

I read about superpwa and the caching behavior seems consistent with how that software functions. Therefore I suspect interference by superpwa is causing this problem.

The frustrating thing is that I can't find where superpwa is coming from. The js file is in your web root but I can't see it anywhere in the page source or dom in XenForo.

Currently using wp-config.php to dynamically set the site domain name:

define('WP_SITEURL', $_SERVER['HTTP_HOST']);
define('WP_HOME', $_SERVER['HTTP_HOST']);

Now this is leading to some odd behaviour, the primary domain ayanajewellery.com vs. the sub-domain loaded us.ayanajewellery.com

Errors in Chrome console include:
Uncaught (in promise) TypeError: Failed to fetch
Uncaught (in promise) TypeError: Failed to update a ServiceWorker: Not found

Hi guys,

For some websites I would like to disable Add to Home Screen prompt. Is this even remotely possible?

This would help me, because I'm developing a lot of lead generation websites and the prompt is overlapping our call button on mobile devices. See for example: https://deslotenmaker.com

Kind Regards,

Remzi

Related ticket: https://wordpress.org/support/topic/pwa-cache-rules-affecting-homepage/#post-9960117

Works if know to manually add it to the home screen. URL bar is gone the chosen pages are cached. As I noticed you addressed adding more pages already. Although some stuff works;
~1. the icon was a screenshot of the current page (EDIT) got it to work.
2. "App" name was displayed correctly from the "Short name" input in settings.
3. was not promoted with instructions to "download" or add to home screen. But I could write a manual alert pop up with instructions no worries there. However, now that I think about it that means users that do get the pop up would be getting two pop-ups if I added one for iOS users myself...

Looking forward to response! Thank you!

HI, thank you for such a great plugin. It works seamlessly.

It would be great if we could choose if all pages could be offline cached. Instead of only the pages that have already been visited.

An option to export our PWA's so we can upload to Playstore etc.

The option of push notifications.

(not sure if you want these on seperate requests)

Attached PR(s)

#71

I think this issue may be the same as https://stackoverflow.com/questions/52087208/pwa-cached-video-will-not-play-in-mobile-safari-11-4 but not sure. May be a bug in Safari.

Steps to reproduce.

1. Load a page with video using HTML <video> element
2. Play the video.
3. Reload the page.
4. Play the video.

Expected result
The video plays both times.

Actual result
The video doesn't play after reload.

Using Safari 12.0 on macOS Mojave, also happens in Safari TP.

We have a HTTP/2 capable server, if we test with lighthouse we get the following warning:

Web back stacks are not like chrome back button. This creates some difference in the experience when pressing the back button. Can a way be implemented so that we can have a custom backstack, based on the sitemap?

In the superpwa_validater_and_sanitizer() function of SuperPWA, the return value of sanitize_text_field() was being passed as argument to empty() function.

According to PHP manual:

Prior to PHP 5.5, empty() only supports variables; anything else will result in a parse error. In other words, the following will not work: empty(trim($name)). Instead, use trim($name) == false.

Hi everyone,

Here is a workaround for a modal which only displays on iOS devices which asks visitors to add the webapp to their homescreen. It could be easily implemented in this plugin with a YES / NO option and a field for custom text.
There is also a JS file ready to use on GitHub: cubiq/add-to-homescreen. PS: This is a feature no issue, but I could not open a pull request.

I received the following upon attempting to install the wordpress plugin. I do not know if it is somehow related to the issue, but I have a plugin installed which is a web app called "Active Demand" that most of the pages are truly running on through its landing page creator. There are also many autoplay videos embedded into those landing pages. Other than that I am not aware of any other potential conflicts. Please advise. Thanks

Installation failed: body {font-family: 'Helvetica', Sans-Serif;text-align: center;background-color: #77c043;color: #fff;}.container {position: relative;top: 50%;transform: translateY(-50%);}.subheader {font-size: 16px;line-height: 22px;font-weight: normal;margin: 20px auto;text-align: left;width: 500px;font-weight: 200;}502 (Bad Gateway) ErrorSomething's gone wrong, but it's likely temporary. Try refreshing the page, but it'd be best to try back later.This page error has the following parameters:clientIP - ::ffff:173.72.44.155gatewayHostname - starkgate-p11.cloud.phx3.gdgoriginDomain - butlerdelivers.comresolvedOriginDomain - butlerdelivers.com

First of all thank you for this plugin - it is working quite well.

The only issue I currently have, and this may be on my end since we are using Timber and webpack inside the template, is that the page I selected for offline viewing displays without the CSS and JS (it was not visited prior)

Perhaps this is expected, and if/when the ability to cache pages the user has not gone to becomes part of the plugin we will be set.

I would love to know any thoughts on this. Currently the site is not public, I can share it in a few weeks if needed.

As per WordPress coding standards, it is recommended to use Braces for if conditions even when not required.

https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/#brace-style

Writing it here, so this doesn't get lost.

Option to choose a start page - https://wordpress.org/support/topic/different-landing-page/

Hello There,

First of all thanks for great plugin but its not working for me maybe some mistake, but I am not able to figure out whats going wrong.

Can you please take a look at error and my staging website https://v30.knawat.com/

Service worker event waitUntil() was passed a promise that rejected with 'InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable'. superpwa-sw.js:18:1 TypeError: ServiceWorker script at https://v30.knawat.com/superpwa-sw.js for scope https://v30.knawat.com/ encountered an error during installation.

screenshot.

Thanks for your time.

Best regards,
Dharmesh Patel

Related WP.org ticket: https://wordpress.org/support/topic/errors-in-firefox-and-chrome/

We have installed SuperPWA for our blog. We are getting auto prompt from browser and its adding into homepage. Below is Manifest URL.

https://stgb2c.turacomobile.com:9443/blog/superpwa-manifest.json

Problem

• Clicking on icon not opening as a standalone application.
• Every time hitting URL is prompting to A2HS. Its already

Is it happening due to website is in sub--folder? Main Website is having its own manifest.
Website URL : https://stgb2c.turacomobile.com:9443/blog/
Kindly help to resolve this issue.

@arunbasillal,

When I install and activate the plugin on a multisite, I get the following error when I try to navigate to the Manifest JSON file. Kindly check if you get the same error.

Cc: @josevarghese

Hello!
Thanks for this plugin and the effort you are putting into the development.

I got a question:
several plugins, and of course themes, enqueue assets (stylesheets or scripts).
As developers, we don't have control of their version: most of them appends a ?ver= or ?v= to disable previously cached versions.

How does this situation is managed by the SuperPWA service worker?

I did a test:

1. I have a WordPress using TwentySeventeen 1.4
2. I install and configure SuperPWA plugin
3. I visit the website, the sw caches style.css
4. I update TwentySeventeen to version 1.5
5. I visit the website and I got the previously cached version 1.4.

I noticed that in the Cache Storage I got 2 style.css files, both versions, but the SW loads the version 1.4.

Is it a common issue?
Thank you!

Hey guys,

I uninstalled the plugin for testing and debugging purposes and I noticed that in my console I am getting multiple 404 errors when I am logged as admin as something is still calling 'superpwa-sw.js'.

The error repeats itself over if the site is left idling.

I have no idea where this is being called from - I don't believe its an caching issue either.

I also get this message: 'SuperPWA: Current page is excluded from cache'.

This doesn't pose a problem to the visitors as only logged in users see this however I prefer to keep the errors to a minimum anyway, do you know of any fixes to this?

Did I uninstall the plugin wrong? If so can you point me in the right direction of where I can find some documentation on this?

If you want to have a look at the site the URL is: 'https://www.nettl.com.au/'

I don't believe you will see the error as you won't be logged in as admin but maybe you can see something I can't.

Cheers for the help.