tedshd's DevNote

Develop & Design Note by Ted

JavaScript - web call native app

web call native app

緣由

因為一些原因要 mobile web 可以 call native 的一些東西來分享當前頁面或幹啥事(其實最常用的是聯絡資訊點了直接 call native app)

眾所皆知 HTML5 預設有

  • mailto:
  • tel:
  • sms:

但每個都要個別寫入好麻煩
且 sms 還有 iOS 和 Android 格式不一樣的問題
於是失心瘋的寫了一個 object 整合一下

有空再寫 PHP 版
(但是需求好像偏向會從 PHP 出誒)

我前端工程師當然先寫 js 版
突然覺得 isomorphic 好好喔...

GitHub

webClientProtocol

題外話

關於 web share content 這件事
Google 有正在搞一個 web share api
可以針對你想分享的東西去做到複製到剪貼簿或把內容分享給可以使用的 mobile native app
但是還在測試狀態...
相關文章在底下

Introducing the Web Share API

題外話中的題外話

在早期會是用 Web Intents 去開 native app

但很麻煩, 且預設是不支持 iOS 的(因為這是 Android 上定義的

然後 iOS 早期要處理也是 native app 自己定義 protocol, 然後 web 自己用 native app 定義好的 protocol 去開

且要個別處理 failback 的行為

然後, 很麻煩的是不同的 native app 的 intent 寫法是不一樣的(因為要 call 的 app 的 package 都不一樣

iOS 亦是如此, 因為定義的 protocol 不一樣(廢話

一般早期是用來當 app link 用(當然現在很少這樣用了, 因為 app link 已經發展成熟了, 這又是另一件事了

順帶一提 iOS 目前最新的是 universal link

不過上述算是 app link 發展簡史, 沒有寫得很詳細

當然 Google 也發現 intent 不夠理想所以想要發展 share api 來達到真正的需求

share api 期望能達到像是 Android intent 所觸發的 share 的機制

當然就目前的情況 iOS 的支援應該還是遙遙無期

不過如果 iOS 的 Chrome 內部有個 interface 轉接去 call App Extension 也許就可以了(我的猜測

結語

目前做的這個功能是指支持 HTML5 原生的

如果是要像是要 call Line 或 twitter 或 fb 等等的請自己處理

有看到一個專案在記錄常用的 native app, 但我是沒試過就是了

Native app social interactions on mobile and tablet web

JavaScript - browser zoom detect

JavaScript - browser zoom detect

強者我朋友身為一個設計師問我一個很奇耙的需求

就是可不可以知道瀏覽器的縮放狀態

因為她的 BOSS 要求縮放不破版, 所以她希望設計在縮放狀態時的 layout 讓工程師套版

於是來問我說是否有辦法知道瀏覽器的縮放狀態

先說一下其實要縮放不破版只要設計彈性的 layout 例如使用 grid 的設計基本上都不會破版, 以我的經驗縮放破版通常是一些特殊的 layout 或用一些奇特的 CSS 的寫法

但正妹設計師求助

魯蛇工程師只好默默的來看看有啥方法

在新的 JavaScript api 有個 devicePixelRatio 可以取得目前 device 的像素比

一般是用來判斷是否是 high resolution 的螢幕

但是當 browser 縮放時其實這個值也會改變(尚未在 mobile device 試驗

所以可以用這特性來做處理

但這有問題就是當本身螢幕就是 high resolution 得螢幕像是 2K or 4K or MBPR 的螢幕

它們的 window.devicePixelRatio 就不會是 1

所以縮放後也不好知道縮放的比例

所以非完美解...

且目前 browser 支援度不佳

下面是範例

var browserZoomLevel = Math.round(window.devicePixelRatio * 100);
console.log(browserZoomLevel);

目前看來與其去處理縮放不如把 layout 設計好才是正解

MDN - Window.devicePixelRatio

Refer - How to detect page zoom level in all modern browsers?

Google search develop for SEO - research log

Google search develop for SEO - research log

對於一個網站上線要讓 Google 容易搜尋到需要做很多事

多到爆炸,而且每年都有新東西出來, 實在看得很煩...

感覺網路都被 Google 控制了...

Google 甚至出了一個develop guide

如要最新的消息與規範可以到 Introduction | Search | Google Developers

因為以下寫的東西可能過幾年後又有新的東西要加了

最後會再補充一些 social media 的 meta tag...

注意

這只是列出提要, 具體細節可以看所附的想關參考連結或拿關鍵字餵 Google

不然這文章寫一個禮拜都還不一定寫得完

但主要的經驗會在文章中提到

網站上線要給 Google crawler 爬需要注意的東西

metadata

以下兩種方式

身為一個攻城獅

建立 mockup data 是基本(後續會介紹)

Google search console 可以讓你了解關於你的網站在 Google 上的一些情況, 像是被 search 多少次、曝光多少次或被 Google 建立了多少 index 等等, 還有很多東西, 也都會在加入許多新的功能, 所以最好定期去看一下

Google My Business 就是像下圖的東西, 但沒用過, 所以不知道具體的細節

準備接下來的東西
  • App Indexing(有 App 的服務才要做, 不管是 iOS 或 Android 都可以做)

  • Mobile Friendly(不管你的網站是 RWD 還是 AWD 都要處理, 不然你的 SEO 就準備說掰掰了)

  • AMP(Google 提出的, Facebook 有個類似的叫 instant articles)

  • Markup data(不管是 JSON-LD 還是 sechema 都很重要, sitemap 也不要忘了)

上述東西的一些細節

關於 URL 這件事
  • Canonical URLs - 主要固定的 url

非 mobile url 非 amp url 非 短網址, 需注意的是假如是產品列表頁, 可以不要在這個值加上像是(p=1 or page=2) 等頁數的 query string 這可以讓分頁的 rank 算到這產品頁來

redirect 採用 301

儘量使用 https

只列出一些要注意的點

具體可參考

使用標準網址

  • Alternate URLs - 非主要性的 url

像是其他語系的 url 或 mobile url 或 amp url 等都是這類型的

更多關於 url 要注意的事

Google 有份文件

Associate Your Online Resources

可以參考

懶得進去的下面有列舉一下要注意的 url 類型

  • AMP page URLs (where supported)
  • App URLs
  • Mobile-specific website URLs
  • Standard website URLs
  • International sites URLs

怕有人不知道

最後補充個 Google crawler 的機制

crawler 一進入頁面會抓取頁面中所有連結且如果是站內連結

crawler 會再進去站內連結的頁面抓該頁面的資料

但如果網站有的頁面是原本的頁面上不會有 link 的那這樣 crawler 就不會抓到了

所以這時就要用提交 sitemap 的方式來讓 Google index 這頁面

關於 sitemap format 可參考 sitemaps.org - Protocol

對於很多頁面可能是 UGC(User Generated Content) 的頁面可以用提交 sitemap 的方式

最後針對 SPA 其實也是有解法的, 就目前來說 Google crawler 都可以抓 #! 了

可參考 Webmaster Central Blog

但何時會再改就是看 Google 心情了

關於 metadata 這件事

Introduction to Structured Data

眾所皆知的有

  • Microdata
  • JSON-LD
  • RDFa

但其實都還是遵循 schema.org 中的規範

只是呈現的格式不同而已

==待更新==

AMP - Accelerated Mobile Pages 研究筆記

AMP - develop log

Intro

這是針對對 AMP 有基本概念的筆記, 基本概念請去 amp project 看就好

知道 AMP 是啥的再來看這文章會較有用

-- 我是分隔線 ---

會被 cache 在 Google domain 下

更新分主動 / 被動

主動(跟 Google 說該頁面有更新)

被動(當有任何人開啟該 AMP 頁面, Google 會在背後重新跟該頁面 AMP url 重新拉來 cache,但 15s 內不重新拉)

限制

  1. 廣告問題(需第三方有支援的廣告商, amp-ad 中有支援的)

  2. AJAX cross domain 問題(需 server side allow)

  3. Cookie 讀不到

  4. user login 問題(需使用 AMP 的元件)

  5. App Indexing on Google Search & AMP 衝突(Google 正在解這問題)

  6. 不能跑 JavaScript, 所以你的 AMP 頁面不能有自己的 JavaScript code(這很這重要)

可以先看一下 AMP 的規範

AMP HTML Specification

先把這些問題與情況列出來, 覺得 ok 再往下看

使用新技術一定有風險, 技術使用有賺有賠, 使用前應詳閱文件或他人心得.

這裡會稍微講一下文件中沒提到的一些東西或技術背景, 但沒去挖 source code, 所以只會說明解決了啥問題, 不會涉及技術實作

如有錯誤歡迎指正

Google 如何知道有 AMP 的頁面

使用 <link> tag

在非 AMP 頁面使用

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

在 AMP 頁面使用

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

以下文章有說明

Prepare Your Page for Discovery and Distribution

基本 AMP 結構

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

裡面有個有趣的地方就是 <style> 的部分

因為 amp project 的 js 有處理 amp component, 會影響 UI 渲染, 所以會先讓畫面不可見

但實際上是不會那麼慢, 因為 js 提前處理完就會顯示

Refer - Create Your AMP HTML Page

Style

使用 <style amp-custom> 來放置 style

  • 一個頁面只能有一個 tag

  • size 須小於 50k

可參考

Supported CSS – AMP

AMP Components

Components / Tags – AMP

Analytics

AMP 有自己的 GA 使用方式

是以 <amp-analytics> 的 component 呈現

而非使用 js 的 ga() 來處理

不用這個用一般網頁用的 ga() 的話 GA 是送不出去的(這跟 Google 確認過了)

基本範例

<amp-analytics type="googleanalytics">
<script type="application/json">
{
    "vars": {
        "account": "UA-XXXXXX-X"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview",
            "vars": {
                "title": "<?php echo htmlspecialchars($title); ?>",
                "documentLocation": "<?php echo $site_url; ?>"
            }
        }
    }
}
</script>
</amp-analytics>

目前有個很大的問題就是

針對 DOM 的事件每一個都需要用到對應的 <amp-analytics>

所以舉例來說

當有一個 list 有 10 個 items 要記錄點擊的 GA, 那就要出現 10 個 <amp-analytics>

(這 issue 目前 Google 內部有再討論是否要處理)

所以是直接把 <amp-analytics> 包成一個 functiuon 來處理較方便(server side render 的話)

<amp-analytics> 是可以動態產生的

但需要注意的是當 <amp-analytics> 能夠被 js parse 下來處理的時候

對應的 DOM 必須在頁面上可見的, 且是非藏起來不可見的, 不然 GA 是不會運作的

具體可以參考以下文件

Adding Analytics to your AMP pages

關於 AMP 與非 AMP 的 GA 數據可以在維度使用者資料來源 中區分出來

可以使用自訂區隔處理會比較好看數據

不建議另外用一個 ga-id 因為 ga session 會斷掉(ga id 不同, 資料的完整性不夠)

但目前也有這問題(跨 AMP 到 non-AMP)

所以要解決從 AMP 到 non-AMP oogle 提出以下解法

Set up Google AMP Client ID API

AMP vs non-AMP traffic

AMP 目的與目標

加速 mobile page 速度(廢話

那具體上 AMP 有處理哪些東西

我這會列舉一些我有注意到的部分, 但實際上應該還有不少我沒注意到的, 畢竟沒有把所有的東西都試一遍

Style

當然能繼續使用 <link> 去載入你的 CSS

但發現在一些情境下會發生 CSS 被延後載入(這應該是跟 amp 的 js 的機制有關, 他不會先處理非同步載入的 CSS

我遇到的 case 是當我加上 <amp-analytics> 後就這樣了

但也不是沒解法

解法就是直接用 <style amp-custom> 直接包你的 CSS 樣式

不用 <link> 載入 CSS

讓它一起進入 amp 的 js 的處理

但要注意的是一頁只能有一個 <style amp-custom>

Style & Layout

Placeholders & fallbacks

AMP 針對圖片有處理 Placeholders 和 fallback

讓使用者輕鬆使用

Placeholders & fallbacks

<amp-img>

為何要用 <amp-img> 並非使用 <img> 就好

  • 只對第一屏的圖做請求

  • 處理延遲載入(lazy load)

Include Images & Video

<amp-app-banner>

這更好用了

這是針對有 app link 的服務

以前有類似的像 branch.io

但聽使用過的人說還是有機率會 fail

iOS 有 smart banner(雖然不錯, 但不理想, user 關掉後再也不會出現, 對 user 而言很合理, 但對服務來說不太想要這樣

Android 得自己幹

但這元件就是 branch.io 這服務要做的事, 然後 AMP 幫你做了

他的機制是當你有設定 app link 時他會 parse 分析出來並出 banner 來提示 user 用 APP 開或到 Google Play 或 Apple store

Validate AMP

  1. Add #development=1 on url and open browser develop tool console tab.

  2. Web tool validator.ampproject.org

  3. Browser extension Chrome or Opera

Validate AMP Pages

AMP 測試 - Google Search Console

千萬要記住有任何 error 的話 Google 都不會 cacahe 成 AMP

AMP & App Indexing on Google Search

有 AMP 出現後不會出現 App Indexing on Google Search

Google 說這是 Bug

基本上 Google search result 是要 AMP 和 App Indexing on Google Search 都出現

Google 正在修這個問題

結語

就目前看到搜尋結果的情況

隨然 Google 沒有明示, 但很明顯 AMP 的搜尋結果有都被排在前面

所以整體來說對排名還是有影響的

更新

跟 Google 證實了一下, 不影響 rank, 所以是不影響 SEO 排名

為什麼會有這假象, Google 說了可能是因爲原本的頁面 SEO 太爛, 因為 AMP 是 best practice 所以造成該頁面 rankng 變好

但對原本就很好的 rankng 的頁面根本沒影響

且有趣的是說因為 AMP 還是有諸多限制, 所以很多有 AMP 的服務其實到第二頁或當你點擊上面的東西進入更深層或其他站內的頁面時, 都幾乎直接回到 mobile page 並非 AMP page

但單純從 amp 的 js 處理的一些東西就可以看出這 library 非常的有價值, 因為它暗地裡幫你處理許多效能問題

如果想稍微優化現有 service 當然也可以用 AMP project 的這套 js 來幫你處理

最後補充一下, 因為我們的服務上 AMP 對流量影響會很大所以目前還在測試上線階段也沒有全上

所以一開始列舉的一些問題是我們假設上線後可能面臨的情況