Slide 1

Slide 1 text

不是 APP 也可以發通知給電腦、手機

Slide 2

Slide 2 text

不是APP,也不是需要安裝的應用程式, 究竟是怎麼發通知給我的?

Slide 3

Slide 3 text

又是 HTML5 – 通知(Notification) API 1. 在特定步驟(如一進網頁,或是使用 者點擊某按鈕) 執行程式 2. 讓網頁瀏覽器跟使用者要求權限 3. 一旦使用者按下允許之後 4. 這個網頁就可以透過瀏覽器,在當 下顯示通知給使用者看。

Slide 4

Slide 4 text

又是 HTML5 – 推播(Push) API • 讓網頁伺服器發訊息給瀏覽器 • 經由 service worker… 等瀏覽器機制傳 輸接收資料 • 若使用者沒打開你的網頁,甚至根本連 電腦都沒開,瀏覽器還是把訊息收下來 • 經由剛剛的 HTML5 通知 API 把訊息顯 示出來 https://www.w3ctrain.com/2016/09/17/service-workers-note/

Slide 5

Slide 5 text

發通知的實務需求… • 技術上先討論如何使用 通知 API,讓網頁能跳 出「是否接收允許通知」的對話視窗。 • 設計上要討論如何消費者願意接收通知。否則 一進網頁就跳對話視窗問是否允許,有多少人 會去按? • 編輯人員可以方便的在工程師已經下班的情況 下,方便編輯通知內容? • 通知上面還要放好幾顆按鈕,每顆按鈕點了還 可以到達網站。 • 最好還要有個預覽畫面,知道打超過幾個字會 被切掉或斷行? • 可以預先編輯內容,預約定時上架更好。 • 能統計有多少人點擊推播通知就更好了! 一張圖 一個大標 一段敘述文字 兩顆按鈕 三個連結網址

Slide 6

Slide 6 text

iZooto 提供方便的發送操作介面

Slide 7

Slide 7 text

iZooto 提供多種允許通知的提示方式

Slide 8

Slide 8 text

iZooto 提供各種檢視報表 訂閱人數/ 取消訂閱人數 發出去訊息的 點擊率

Slide 9

Slide 9 text

iZooto 提供細部的API與分眾工具 讓通知發給 • 特定的使用者, • 特定動作規則的人 • 特定標記的人

Slide 10

Slide 10 text

5000 訂閱人以下是免費的 只是功能比較少

Slide 11

Slide 11 text

成功的騷擾使用者 – 即使發出訊息時沒開電腦,下次開瀏覽器時還是會看到。 桌上型電腦 行動裝置

Slide 12

Slide 12 text

可惜 IE、iOS 不支援(無法接收推播通知)

Slide 13

Slide 13 text

再介紹兩個 web app 技術… •Google 在推的 PWA (Progressive Web App) •微信的小程序

Slide 14

Slide 14 text

PWA(Progressive Web App) • 上架需要審核時間、 APP 開發費用高昂、iOS/ Android 各做一套 • 不用學習製作 iOS 或 Android APP 的原生程式語言 • 讓網頁用起來像 APP • 可離線使用 • 接收推播通知 • 有啟動畫面(splash screen) • 全螢幕運行,沒有網址列等系統操作按鈕 • 接收推播通知 • 可以一鍵把網頁加到主螢幕 • …等等 • 基本需求: 此網頁要有 HTTPS • 基本需求:要達成上述所有功能,只有 Google Chrome 辦得到。 PWA的官方 範例教學

Slide 15

Slide 15 text

PWA 案例 – AliExpress 全球速賣通 • 增加了 104% 的新客戶 • iOS 平台使用者增加了82%轉換率 • 使用者停留時間增加了74% • 每個工作階段比以前多了一倍的瀏覽量 • https://developers.google.com/web/showc ase/2016/aliexpress • https://pwa.rocks/

Slide 16

Slide 16 text

微信也在公測一個 web app 功能, 叫做小程序,想解決以下問題… 把行動版網頁假裝是 wechat 的功能 以前大家都這麼幹之一: 1. 開一個公眾號/服務號/企業號…whatever 2. 在自定義底部菜單建一堆鏈接 3. 把行動版網站放在那個菜單裡 4. 讓使用者去點,用微信的 webview 開啟網頁 5. 哇! 我的公眾號/服務號/企業號…可以購物/線 上提供某某服務耶! 6. 那個網頁有些做得很爛很難用。

Slide 17

Slide 17 text

微信也在公測一個 web app 功能, 叫做小程序,想解決以下問題… 以前大家都這麼幹之三: 用公眾平台提供的 各種接口功能 1.地方的店家需要工程師! 2.別人的XX號有,我們也 要有! 3.關注我們並回覆1,可得 到XXX…就是這類的應用。 4.功能很多,但不夠多 以前大家都這麼幹之二: 跟著官方的腳步走 1.乖乖的在京東上架商品 2.在微信購物頻道看到你的商品 3.用微信支付買東西

Slide 18

Slide 18 text

用公眾號+服務號+錢包入口+小程序 打造內部循環,讓大家離不開微信 • 輕應用,免安裝,小而強的功能體驗 • 使用近代網頁開發技術與思維,再加上專屬微信的 開發體系與環境 • 温馨提示:请开发者注意,公测期间暂不支持发布小程序 • 张小龙:小程序不能推送消息,但是会提供有限的服务的触达 能力(会提供通知的消息,需要用户主动确认需求通知) [小程序]购物车DEMO http://www.voidcn.com/blog/maxwell0401/article/p-6219924.html