Accelerated Mobile Pages (AMP) #137

taufik-nurrohman · 2021-08-21T17:15:21Z

taufik-nurrohman
Aug 21, 2021
Maintainer

These techniques are useful for those of you who want to make a mobile version of the page without having to sacrifice the existing desktop version of the page. You can have two versions of the page without having to make two web pages for each device separately.

One of the most popular mobile web page standards today is AMP, a web component framework to easily create user-first web experiences. Today, the AMP specifications may have changed, therefore I will not discuss it in detail here. You can learn the complete AMP specifications on the official website.

Here I just want to focus on the methods you can use to tell Mecha that it should display the mobile version of the page if the conditions are met.

Mobile Page Conditional Statement and Helper Functions

Query String Method

This is the easiest method that you can implement right away by adding a mobile page specific conditional statement based on the presence of a particular query string in URL. In this case, the query string in question is ?amp=1

State::set('is.mobile', !empty($_GET['amp']));

The code above will add a mobile conditional feature that you can use in the layout file via the $site or $state object like so:

<!DOCTYPE html>
<?php if ($site->is('mobile')): ?>
  <html amp lang="en">
<?php else: ?>
  <html lang="en">
<?php endif; ?>
  <head> … </head>
  <body> … </body>
</html>

To activate the mobile version of the page, simply add an ?amp=1 query string in URL.

When working with different web page mode, helper functions to convert URL from the default version to the mobile version and vice-versa may be needed. The following are two helper functions you can use to work with query string based mobile web page:

From::_('mobileURL', static function (string $path) {
    if (!str_contains($path, '?')) {
        return $path;
    }
    $parts = explode('?', $path, 2);
    return $parts[0] . To::query(extend(From::query($parts[1] ?? ""), [
        'amp' => false
    ]));
});

To::_('mobileURL', static function (string $path) {
    if (!str_contains($path, '?')) {
        return $path . '?amp=1';
    }
    $parts = explode('?', $path, 2);
    return $parts[0] . To::query(extend(From::query($parts[1] ?? ""), [
        'amp' => '1'
    ]));
});

The following is an example of how to use it:

<?php if ($site->is('mobile')): ?>
  <a href="<?= To::mobileURL($page->url); ?>">
    This is a link to a page.
  </a>
<?php else: ?>
  <a href="<?= $page->url; ?>">
    This is a link to a page.
  </a>
<?php endif; ?>

Domain Alias Method

Using a domain alias is also easy, but this requires you to hard-code the domain name in the source code:

State::set('is.mobile', 'm.example.com' === $url->host);

The following are two helper functions you can use to work with domain based mobile web page:

From::_('mobileURL', static function (string $path) use ($url) {
    // Do not touch relative URL
    if (!str_contains($path, '://')) {
        return $path;
    }
    $u = new URL($path);
    if ('m.example.com' !== $u->host) {
        return $path; // Do nothing!
    }
    $u->host = 'example.com';
    return $u->current;
});

To::_('mobileURL', static function (string $path) use ($url) {
    // Do not touch relative URL
    if (!str_contains($path, '://')) {
        return $path;
    }
    $u = new URL($path);
    if ('example.com' !== $u->host) {
        return $path; // Do nothing!
    }
    $u->host = 'm.example.com';
    return $u->current;
});

Route Method

A little tricky, but still doable.

By adding these two route aliases, you will be able to have two types of URLs that will display the same page.

Hook::set('route', static function ($content, $path, $query, $hash) {
    if ($path && str_starts_with($path . '/', '/amp/')) {
        return Hook::fire('route', [$content, substr($path, 4), $query, $hash]);
    }
    return $content;
}, 19);

You can visit the page http://127.0.0.1/article/lorem-ipsum via http://127.0.0.1/amp/article/lorem-ipsum too, and they will both display the same page. Until you state that the mobile page conditional statement is met before the actual route execution.

Hook::set('route', static function ($content, $path, $query, $hash) {
    if ($path && str_starts_with($path . '/', '/amp/')) {
        State::set('is.mobile', true);
        return Hook::fire('route', [$content, substr($path, 4), $query, $hash]);
    }
    return $content;
}, 19);

The following are two helper functions you can use to work with route based mobile web page:

From::_('mobileURL', static function (string $path) use ($url) {
    // Empty URL
    if ("" === $path) {
        return $path;
    }
    // Relative URL
    if ('/amp' === $path) {
        return '/';
    }
    // Relative URL
    if (str_starts_with($path, '/amp/')) {
        return substr($path, 4);
    }
    // Full URL
    if ($url . '/amp' === $path) {
        return substr($path, 0, -4);
    }
    return strtr($path, [
        $url . '/amp/' => $url . '/'
    ]);
});

To::_('mobileURL', static function (string $path) use ($url) {
    // Empty URL
    if ("" === $path) {
        return '/amp';
    }
    // Relative URL
    if (str_starts_with($path, '/')) {
        return '/amp' . $path;
    }
    // Full URL
    if ($url . "" === $path) {
        return $path . '/amp';
    }
    return strtr($path, [
        $url . '/' => $url . '/amp/'
    ]);
});

Hooking the URL, Globally

Applying helper functions to every URL inside the markup is a painstaking job. In addition, we also don’t seem to be able to do much with the URLs in the page content. By imitating the way link extension change URLs via the output buffer, we can make a simpler version of its hook to convert URLs only on <a> and <form> elements.

Hook::set('content', static function ($content) {
    if (!$content || !State::get('is.mobile')) {
        return $content;
    }
    if (str_contains($content, '</a>')) {
        $content = preg_replace_callback('/<a(\s[^>]*?)>/', static function ($m) {
            if (!str_contains($m[0], 'href=')) {
                return $m[0];
            }
            $e = new HTML($m[0]);
            $e['href'] = To::mobileURL($e['href']);
            return (string) $e;
        }, $content);
    }
    if (str_contains($content, '</form>')) {
        $content = preg_replace_callback('/<form(\s[^>]*?)>/', static function ($m) {
            if (!str_contains($m[0], 'action=')) {
                return $m[0];
            }
            $e = new HTML($m[0]);
            $e['action'] = To::mobileURL($e['action']);
            return (string) $e;
        }, $content);
    }
    return $content;
}, 0);

On a form of type GET, changing the action URL of the query string based mobile web page is useless.

The following is an example of a search form markup:

<form action="<?= $url; ?>/article" method="get">
  <p>
    <input name="query" type="text">
    <button type="submit">
      <?= i('Search'); ?>
    </button>
  </p>
</form>

Instead of appending query ?amp=1 to the action value, you can just add a hidden input element like this:

<form action="<?= $url; ?>/article" method="get">
  <p>
    <input name="query" type="text">
    <button type="submit">
      <?= i('Search'); ?>
    </button>
  </p>
  <?php if ($site->is('mobile')): ?>
    <input name="amp" type="hidden" value="1">
  <?php endif; ?>
</form>

Or, from the output buffer hook, you can insert the element like this:

$content = preg_replace_callback('/<form(\s[^>]*?)>/', static function ($m) {
    if (!str_contains($m[0], 'action=')) {
        return $m[0];
    }
    $e = new HTML($m[0]);
    if (!$e['method'] || 'get' === $e['method']) {
        return $m[0] . '<input name="amp" type="hidden" value="1">';
    }
    return $m[0];
}, $content);

It’s not neat actually, but it works!

Converting Native HTML Element into AMP Element

Hook::set('content', static function ($content) {
    if (!$content || !State::get('is.mobile')) {
        return $content;
    }
    if (str_contains($content, '</audio>')) {
        $content = preg_replace_callback('/<audio(\s[^>]*?)>[\s\S]*?<\/audio>/', static function ($m) {
            $e = new HTML($m[0]);
            $e[0] = 'amp-audio';
            return (string) $e;
        }, $content);
    }
    if (str_contains($content, '</iframe>')) {
        $content = preg_replace_callback('/<iframe(\s[^>]*?)>[\s\S]*?<\/iframe>/', static function ($m) {
            $e = new HTML($m[0]);
            $e[0] = 'amp-iframe';
            $e[1] = "";
            return (string) $e;
        }, $content);
    }
    if (str_contains($content, '<img ')) {
        $content = preg_replace_callback('/<img(\s[^>]*?)>/', static function ($m) {
            $e = new HTML($m[0]);
            $e[0] = 'amp-img';
            $e[1] = "";
            return (string) $e;
        }, $content);
    }
    if (str_contains($content, '</style>')) {
        $content = preg_replace_callback('/<style(\s[^>]*?)?>/', static function ($m) {
            if (str_contains($m[0], ' amp-boilerplate')) {
                return $m[0];
            }
            $e = new HTML($m[0]);
            $e['amp-custom'] = true;
            return (string) $e;
        }, $content);
    }
    if (str_contains($content, '</video>')) {
        $content = preg_replace_callback('/<video(\s[^>]*?)>[\s\S]*?<\/video>/', static function ($m) {
            $e = new HTML($m[0]);
            $e[0] = 'amp-video';
            return (string) $e;
        }, $content);
    }
    return $content;
}, 0);

taufik-nurrohman · 2021-11-20T05:30:17Z

taufik-nurrohman
Nov 20, 2021
Maintainer Author

In version 3.0.0, Route class will be removed. As an alternative, you can use this technique which is free from context and so this will automatically apply to any of the child route hooks:

Hook::set('route', function($content, $path, $query, $hash) {
    if (str_starts_with($path, '/amp/')) {
        State::set('is.mobile', true);
        return Hook::fire('route', [$content, substr($path, 4), $query, $hash]);
    }
    return $content;
}, 0);

0 replies

yuliakbard · 2022-01-09T01:05:38Z

yuliakbard
Jan 9, 2022

kang, kode untuk amp yang route method, pada attribut class tag html menampilkan class is:error dan error:404, kalau pakai string query method gak ada class is:error dan error:404

kalau untuk <link href="<?= $page->url ?>" rel="amphtml"> untuk $page->url yang mendirect ke url route method pake yang mana kang? ane pakein ini <?= To::mobileURL($page->url); ?> gak jalan

12 replies

yuliakbard Jan 9, 2022

gak ada kang

taufik-nurrohman Jan 9, 2022
Maintainer Author

Screenshot kode sumber.

yuliakbard · 2022-01-29T15:24:48Z

yuliakbard
Jan 29, 2022

<link href="<?= $page->url ?>" rel="amphtml">

Kang, bagaimana caranya agar html diatas hanya muncul pada halaman selain path /amp?
penulisan kondisionalnya seperti apa?

1 reply

taufik-nurrohman Jan 29, 2022
Maintainer Author

Kondisionalnya ya itu mas yang udah kamu bikin sendiri:

<?php if (!$site->is('mobile')): ?>
  <link href="<?= $page->url ?>" rel="amphtml">
<?php endif; ?>

taufik-nurrohman · 2022-01-31T09:43:00Z

taufik-nurrohman Jan 31, 2022
Maintainer Author

Dibikin topik baru aja mas.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mecha

Accelerated Mobile Pages (AMP) #137

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 14 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

This comment was marked as off-topic.

{{title}}

Select a reply

Mecha

Accelerated Mobile Pages (AMP) #137

taufik-nurrohman Aug 21, 2021 Maintainer

Mobile Page Conditional Statement and Helper Functions

Query String Method

Domain Alias Method

Route Method

Hooking the URL, Globally

Converting Native HTML Element into AMP Element

Replies: 4 comments · 14 replies

taufik-nurrohman Nov 20, 2021 Maintainer Author

yuliakbard Jan 9, 2022

yuliakbard Jan 9, 2022

taufik-nurrohman Jan 9, 2022 Maintainer Author

yuliakbard Jan 9, 2022

yuliakbard Jan 9, 2022

yuliakbard Jan 10, 2022

yuliakbard Jan 29, 2022

taufik-nurrohman Jan 29, 2022 Maintainer Author

This comment was marked as off-topic.

taufik-nurrohman Jan 31, 2022 Maintainer Author

taufik-nurrohman
Aug 21, 2021
Maintainer

Replies: 4 comments 14 replies

taufik-nurrohman
Nov 20, 2021
Maintainer Author

yuliakbard
Jan 9, 2022

taufik-nurrohman Jan 9, 2022
Maintainer Author

yuliakbard
Jan 29, 2022

taufik-nurrohman Jan 29, 2022
Maintainer Author

taufik-nurrohman Jan 31, 2022
Maintainer Author