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. 又是 HTML5 – 通知(Notification) API 1. 在特定步驟(如一進網頁,或是使用 者點擊某按鈕) 執行程式 2.

    讓網頁瀏覽器跟使用者要求權限 3. 一旦使用者按下允許之後 4. 這個網頁就可以透過瀏覽器,在當 下顯示通知給使用者看。
  2. 又是 HTML5 – 推播(Push) API • 讓網頁伺服器發訊息給瀏覽器 • 經由 service

    worker… 等瀏覽器機制傳 輸接收資料 • 若使用者沒打開你的網頁,甚至根本連 電腦都沒開,瀏覽器還是把訊息收下來 • 經由剛剛的 HTML5 通知 API 把訊息顯 示出來 https://www.w3ctrain.com/2016/09/17/service-workers-note/
  3. 發通知的實務需求… • 技術上先討論如何使用 通知 API,讓網頁能跳 出「是否接收允許通知」的對話視窗。 • 設計上要討論如何消費者願意接收通知。否則 一進網頁就跳對話視窗問是否允許,有多少人 會去按?

    • 編輯人員可以方便的在工程師已經下班的情況 下,方便編輯通知內容? • 通知上面還要放好幾顆按鈕,每顆按鈕點了還 可以到達網站。 • 最好還要有個預覽畫面,知道打超過幾個字會 被切掉或斷行? • 可以預先編輯內容,預約定時上架更好。 • 能統計有多少人點擊推播通知就更好了! 一張圖 一個大標 一段敘述文字 兩顆按鈕 三個連結網址
  4. PWA(Progressive Web App) • 上架需要審核時間、 APP 開發費用高昂、iOS/ Android 各做一套 •

    不用學習製作 iOS 或 Android APP 的原生程式語言 • 讓網頁用起來像 APP • 可離線使用 • 接收推播通知 • 有啟動畫面(splash screen) • 全螢幕運行,沒有網址列等系統操作按鈕 • 接收推播通知 • 可以一鍵把網頁加到主螢幕 • …等等 • 基本需求: 此網頁要有 HTTPS • 基本需求:要達成上述所有功能,只有 Google Chrome 辦得到。 PWA的官方 範例教學
  5. PWA 案例 – AliExpress 全球速賣通 • 增加了 104% 的新客戶 •

    iOS 平台使用者增加了82%轉換率 • 使用者停留時間增加了74% • 每個工作階段比以前多了一倍的瀏覽量 • https://developers.google.com/web/showc ase/2016/aliexpress • https://pwa.rocks/
  6. 微信也在公測一個 web app 功能, 叫做小程序,想解決以下問題… 把行動版網頁假裝是 wechat 的功能 以前大家都這麼幹之一: 1.

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

    要有! 3.關注我們並回覆1,可得 到XXX…就是這類的應用。 4.功能很多,但不夠多 以前大家都這麼幹之二: 跟著官方的腳步走 1.乖乖的在京東上架商品 2.在微信購物頻道看到你的商品 3.用微信支付買東西
  8. 用公眾號+服務號+錢包入口+小程序 打造內部循環,讓大家離不開微信 • 輕應用,免安裝,小而強的功能體驗 • 使用近代網頁開發技術與思維,再加上專屬微信的 開發體系與環境 • 温馨提示:请开发者注意,公测期间暂不支持发布小程序 •

    张小龙:小程序不能推送消息,但是会提供有限的服务的触达 能力(会提供通知的消息,需要用户主动确认需求通知) [小程序]购物车DEMO http://www.voidcn.com/blog/maxwell0401/article/p-6219924.html