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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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