Upgrade to Pro — share decks privately, control downloads, hide ads and more …

就算不是 APP 還是可以發通知給電腦、手機

jiimmysu
December 29, 2016

就算不是 APP 還是可以發通知給電腦、手機

HTML5 – 通知(Notification) API
HTML5 – 推播(Push) API
輕鬆達成網站推播 https://www.izooto.com/ 客服超棒
Google 在推的 PWA (Progressive Web App)
微信的小程序
---
关于微信小程序,张小龙回答了大家关心的十大问题
http://www.iyiou.com/p/36844
--
Service Workers 初体验
https://www.w3ctrain.com/2016/09/17/service-workers-note/
--
PWA案例 - 阿里速賣通
https://developers.google.com/web/showcase/2016/aliexpress
--
PWA 案例整理
https://pwa.rocks/
--
[小程序]购物车DEMO http://www.voidcn.com/blog/maxwell0401/article/p-6219924.html
--

jiimmysu

December 29, 2016
Tweet

More Decks by jiimmysu

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide