tedshd's DevNote

Develop & Design Note by Ted

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 對流量影響會很大所以目前還在測試上線階段也沒有全上

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

Firebase - Firebase Cloud Message(FCM) Research Log

Firebase - Firebase Cloud Message(FCM) Research Log

This article is focus on web version

Intro

You can easy to use web notification push notification to your web site.

Set Up a JavaScript Firebase Cloud Messaging Client App

Different with use pure web notification

Using the Notifications API

  • Browser support
    • FCM - Chrome(desktop & Android) & Firefox(desktop & Android)
    • pure notification api - Chrome(desktop & Android) & Firefox(desktop & Android) & Opera(desktop) & Safari(desktop)
      • Android need service worker
  • Service Worker
    • FCM - require
    • pure notification api - option

pure web notification only a notification object, you need handle connection push message from server.

But FCM had handle this connect.

web notification demo

FCM demo

FCM push service

Different whith use Service Worker or not use Service Worker

use Service Worker no use Service Worker
service open on browser tab and focus receive receive
service open on browser tab and not focus receive receive
service open not on browser tab receive can't receive

Prepare

  • app server
    • a server can send message
  • HTTPS
  • manifest.json
    • set gcm send id

Step

  1. Use firebase console create a project(If you had project for your web service, you can skip this setp

  2. Overview -> setting -> cloud message and you can get YOUR-SERVER-KEY & SENDER-ID

  3. And then you can use the simple code from https://github.com/firebase/quickstart-js/tree/master/messaging

FCM Flow

What is Instance ID?

Web notification dosen't have Instance ID so we only can use token

Base flow

App server

Build it to send message or do something like send topic message or personal message

Use HTTP or XMPP

Firebase Cloud Messaging HTTP Protocol

Personal push

You can bind user info & their token created from client web browser, then you can push personal message for user.

And it use api push notification like this

https://fcm.googleapis.com/fcm/send
Content-Type:application/json
Authorization:key=AIzaSyZ-1u...0GBYzPu7Udno5aA

{ "data": {
    "score": "5x1",
    "time": "15:10"
  },
  "to" : "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1..."
}

Authorization key is Firebase console server key

Reference - Build App Server Send Requests

Multiple device push

Send Messages to Multiple Devices

It's base on sub / pub pattern, you can reference Publish/Subscribe pattern - MSDN - Microsoft

Two way
  1. topic(suggest)
    Suggest use this, it's fast and easy to use

  2. group

If you want to know any token push status and tracking which in this group, you can use group way

But you must handle group yourself

Group send request format

About Tracking

FCM web notification not support analytics

So you can add querystring on action url or add log on receive message on foreground

Error handle

If user clear token on offline, need handle cleared token let app server and IID server know

Two way can handle this thing

  1. client initiative handle

If your web service provide unsubscribe function, you must handle this behavior.

And you need handle if user clear data from client, you need update token.

Firebase's api messaging.deleteToken() handle delete from IID server but delete token from app server need handle yourself.

  1. server side detect

When server push notification and response error make some error handle like delete InvalidRegistration token

And you can log token active time, if long time not active, you can delete it from app server and also suggest delete it from IID server

Notice

On desktop device Chrome or Firefox not on process it can not receive message

But message will queued until Browser open

So don't worried about this thing

  • Notice don't send error target user

  • Notice don't send the push token that doesn't had any user or device

And then i find Firebase hosting seem doesn't support service worker, so it can't use FCM on Firebase hosting.

Receive Messages in a JavaScript Client

Reference - Using the Notifications API - Web APIs | MDN

instance-id

Reference - Publish/Subscribe pattern - MSDN - Microsoft

Reference - What Makes a Good Notification?