Different custom Pages as WebApp in same domain

Sorry, I don’t understand.

If you want the start page for the installed app to be different than the homepage, you can filter it using web_app_manifest:

add_filter( 'web_app_manifest', function( $manifest ) {
    $manifest['start_url'] = home_url( '/?source=homescreen' );
    return $manifest;
} );

Note that a PWA doesn’t have to be installed to be accessed offline. If the user is offline and they try going to your site in the browser, it will respond offline in the same way as if they had installed it on their homescreen. Installing the app just creates a shortcut and allows you to open it in a separate window without the browser UI.

Hi,

Ok, I installed app and added code. But how do I change so app gets current URL as start URL based on where on the site the user adds the APP to home screen?

Can I do something like this:

add_filter( 'web_app_manifest', function( $manifest ) {
    $manifest['start_url'] = current_url( '/?source=homescreen' );
    return $manifest;
} );

or if this not work many something like this:?

add_filter( 'web_app_manifest', function( $manifest ) {
    global $wp;
    $manifest['start_url'] = home_url(add_query_arg(array(), $wp->request)( '/?source=homescreen' ));
    return $manifest;
} );

Or this but it does not work because it does not seams to write out $urlcard:

add_filter( 'web_app_manifest', function( $manifest ) {
    global $wp;
    $vpost = get_post($post_id);
    $urlcard = $vpost->post_name;
    $current_url =  home_url( $wp->request );
    $manifest['start_url'] = home_url( '/a/'.$urlcard."\n" ) ;
    return $manifest;
} );

• This reply was modified 3 years, 1 month ago by xeonz.
• This reply was modified 3 years, 1 month ago by xeonz.
• This reply was modified 3 years, 1 month ago by xeonz.
• This reply was modified 3 years, 1 month ago by xeonz.
• This reply was modified 3 years, 1 month ago by xeonz.

Filtering web_app_manifest won’t be enough because that happens during the REST API request to /wp-json/wp/v2/web-app-manifest and not during the request to the page.

So you basically need a different Web App Manifest for different URLs of your site.

Here’s a plugin that may be able to adapt to what you need: https://gist.github.com/westonruter/23789b7cca3e22614c4c49676deba104

It creates a different Web App Manifest for each URL on your site, and passes it along the document title as the name and the $wp->request as the start_url. It seems to work as expected.

An alternative to what you may be trying to do is to filter web_app_manifest to add shortcuts: https://web.dev/app-shortcuts/

• This reply was modified 3 years, 1 month ago by Weston Ruter.

Thank you, Weston! This seems to work with the extra plugin! Now I just wondering if I can take my base64 image to generate an icon? I’m also going to look on how to get a startup animation because now the page is just white when opening “the app”.

I was just yesterday trying to generate a manifest with javascript and PHP but your solution is much easier/ better. I also got stuck on how to generate the JSON file before I was go to sleep. hehe

Just for curiosa, I send my code, maby can be useful for someone ??

// php webmanifest <link rel="manifest" id="my-manifest-placeholder">
function ECOCARD_manifest( $post_id ) {
    $post_type = get_post_type($post_id);

$siteName = $vpost->post_title;
$name = $_POST['company'];
$pageDescription = $_POST['company'];
$urlcard = $vpost->post_name;

$manifest = [
    "name" => $siteName,
    "gcm_user_visible_only" => true,
    "short_name" => $name,
    "description" => $pageDescription,
    "start_url" => ".https://mysite__.com/abc/".$urlcard."\n",
    "display" => "fullscreen",
    "orientation" => "portrait",
    "background_color" => "#000000",
    "theme_color" => "#000000",
    "icons" => [
        "src" => "https://mysite__.com/wp-content/uploads/2019/11/cropped-maskable_icon_x512-1-1.png",
        "sizes"=> "96x96 128x128 144x144 512x512",
        "type" => "image/png"
    ],
    "src" => "https://mysite__.com/wp-content/uploads/2019/11/cropped-maskable_icon_x512-1-1.png",
    "sizes" => "48x48 72x72",
    "type" => "image/png"
];

$json = json_encode($manifest);
$bytes = file_put_contents("manifest.json", $json); 

header('Content-Type: application/json');
echo json_encode($manifest);
}

function manifesdtmeta_metadata() {

    // Post object if needed
    // global $post;

    // Page conditional if needed
    // if( is_page() ){}
    ?>
    <link rel="manifest" href="<?php echo $SITE_URL;?>/manifest.json">
    <?php
}
add_action( 'wp_head', 'manifesdtmeta_metadata' );

// Added code for change WebAppMainfest for current url 
/* MANIFEST FILTERS
add_filter( 'web_app_manifest', function( $manifest ) {
    global $wp;
    $vpost = get_post($post_id);
    $urlcard = $vpost->post_name;
    $current_url =  home_url( $wp->request );
    $manifest['start_url'] = home_url( '/a/' ) .$urlcard;
    return $manifest;
} );
END MANIFEST*/

• This reply was modified 3 years, 1 month ago by xeonz.
• This reply was modified 3 years, 1 month ago by xeonz.

I have a post that is under review but got it working. One issue I got when open WebApp from iOS first time is breaked network connection. I don’t know why.

I was now also added splash-screen but it does not work:

was added images and this code:

add_action('wp_head', 'ekoqrd_splashscreen');
function ekoqrd_splashscreen(){
?>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link href="https://___.io/wp-content/plugins/ecocard/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="https://___.io/wp-content/plugins/ecocard/splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="https://___.io/wp-content/plugins/ecocard/splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="https://___.io/wp-content/plugins/ecocard/splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="https://___.io/wp-content/plugins/ecocard/splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="https://___.io/wp-content/plugins/ecocard/splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="https://___.io/wp-content/plugins/ecocard/splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="https://___.io/wp-content/plugins/ecocard/splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="https://___.io/wp-content/plugins/ecocard/splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="https://___.io/wp-content/plugins/ecocard/splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<?php
};

• This reply was modified 3 years, 1 month ago by xeonz.
• This reply was modified 3 years, 1 month ago by xeonz.
• This reply was modified 3 years, 1 month ago by xeonz.