Blank window issue on Safari Mobile and a quick solution

I am working on an embedded project. The device provides simple Web HTTP interface to interact with this device. It works fine on all browsers but Safari Mobile on iOS 8.3.

Surfing on Google, there are some problems on Safari Mobile (article 1, article 2, article 3, article 4, article 5). They sound like not same as what I am facing to. I monitor the packets captured by Wireshark, and found that Safari Mobile didn't load all resources(css, js, ttf, etc.) completely causes this problem. The Safari Mobile communicates with Web server in HTTP pipeline, while the others (Chrome, Firefox, Opera, IE, Safari Desktop, etc.) don't. (The others will reuse the connection, but won't pipeline them). That is the major difference!

In theory, the HTTP pipeline can speed up requests by reducing the number of round trip times. But there are some articles(articles 6, article 7, article 8) comment on this point. This is not what I want to discuss in this page. Let's back to my problem.

The HTTP pipeline raises lots of problem. Some developers submit tickets to Apple, but there is no plan to solve the problem. I try to find

I found an easy workaround for this issue at last. This problem can be solved by setting the connection field of the HTTP response header. I force the connection field to be "close" if the browser is Safari, and it works! In Java Servlet, you can set it as
response.setHeader("Connection", "close");

(or you can set the header field in Filter), or in PHP
header("Connection: close");

or you can set the field in Web server setting.

In Safari Mobile, it will close the connection when receive the response, and won't send further requests thru this connection. That is, no more HTTP pipeline from Safari Mobile. I am not sure is this the best solution or not, but it really solve my problem.

你如何設計你的產品？

創業者請想清楚，該關注自己的產品還是需要解決的問題？
「每次他們發現新問題或新需求時，就不停地添加新功能。最終結果就是產品變得異常複雜，功能零亂，又沒法徹底解決用戶需求」

這篇文章讓我想起昨天在辦公室裡的事
昨天下午三點多接獲一個新指令，要做一個新功能。
思考了一下，把疑點跟主管討論了一下
嗯...這功能A在操作上會自己與自己抵觸
OK，主管決定修正為功能B
再思考了一下，覺得還是怪怪的
再去找主管，仔細的問這功能是要給誰(actor)用？這功能要呈現什麼價值(use case)？
被我這樣一問，大家才搞清楚誰是使用者，操作情境是如何，也才發覺原來功能A與功能B都不是最好的解法。從整個scenario重新構思，分析出我們的需求應該是功能C

在設計產品時，得不斷提醒自己，這是要給誰用？你的產品在那個情境中，能提供他們什麼價值？

iOS 7/8 Safari空白畫面

如果你的網站在Desktop版的Safari是正常，可是在iOS 7/8上的Safari卻會出現空白畫面，一直loading不停，那你可能遇到Safari的bug了。可參見： http://tech.vg.no/2013/10/02/ios7-bug-shows-white-page-when-getting-304-not-modified-from-server/ 

這問題來自當要用Safari連上一個網址，這個網址你之前曾要連，但是因為網路、使用者中斷或是其他問題，造成某些resources(html, javascript, css, 圖檔等等)並未完成下載，但是Safari卻當成已完成下載。當使用者要重新連這網址時，在reload時會問server從上個時間點後有沒有改變過(雖然上次沒有完成下載，但是Safari卻當成已下載過)，而server此時可能回覆304 code表示沒有改變過。因此Safari就會從cache來取得這個resources，但是在cache裡的resources本來就不完整，造成Safari在呈現或呼叫webkit javascript engine執行時便發生錯誤，出現空白畫面或一直在下載中。 

對此問題有興趣，可以用"ios safari 304"為keywords在google上搜尋，可以找到不少討論此議題的文章。 

目前Apple似乎還未將這問題列為bug，所以可能還沒有修復的時間表。至於網路上有些人有提出些workarounds，主要都是將server-side改為不回應304，或是針對Safari不回應304，讓瀏覽器對所有的resources都一定重新取得，而不是使用cache裡的。不過這對使用iOS 7/8的iPhone/iPad來說，將會耗掉更多的電力與頻寬(如果不是吃到飽就要小心了)，但對網站經營者來說，為了達到Apple常掛在嘴上的「使用者體驗」，似乎也沒什麼其他的解法了。

在HTML element要處理left-click與right-click

被指派一個任務，頁面上的一個元件，當right-click與left-click時，要有不同的反應，IE 8也要能兼容，且必須在mouse up時才觸發。
如果是mouse down就比較好處理，若mouse up，這個mouse event會bubble up，無法用stopPropagation()來停止，所以就不能直接bind在mouseup上了

最後用了幾個方法組合起來，來達成這個需求，HTML的tag如下，bind onclick來處理left-click；bind oncontextmenu來處理right-click：
<a href="#" onclick="return handler(event)" oncontextmenu="return handler(event)">CLICK</a>
JavaScript的function則如下
  function handler(e, id) {
    var clickType = 1; //1:left-click; 3:right-click
    if (e.which) {
      clickType = e.which;
    } else if (e.type) {  // for IE 8
      if (e.type=="click") {
        clickType = 1;
      } else if (e.type=="contextmenu") {
        clickType = 3;
      } else {
        clickType = e.button+10;
      }
    }
    alert("click type: "+clickType);
    return false;
  } 在Chrome 42, FireFox 37, Opera 28, IE 11/8上測試都OK

Google會怎麼做 (What Will Google Do)

這是本老書了(2009)，應該是我第三次或第四次讀這本書了。每次在思考一些business model時，總喜歡一邊讀此書，常有些火花併發產生。

這本書分成三部份，第一部份是Google法則，也是重點所在。作者在這部份提出了十個法則：

1. 新關係：讓顧客變夥伴
2. 新架構：建立更多連結，創造更多價值
3. 新的公開性：開明的自利
4. 新社會：善用社群力量，借腦創新
5. 新的經濟：大量小眾經濟誕生 (小是新的大)
6. 新的商業現實：收入可能從另一個門流進來
7. 新態度：發現信任的價值
8. 新道德觀：透明化帶來良性對話
9. 新的速度：走在顧客之前
10. 新企業法則：把創新當要務

第三部份則提到Google怎樣改變了世界。我想這部份大家自己都可以感受到吧。

第二部份則是從媒體、廣告、零售、製造、服務等等行業的環境，建議如何套用上述的法則，來創造新的事業生命。不妨看看有沒有你的產業，如果沒有，也可以依照第一部份的十個法則，來檢視與思考自己所在的產業，也許你也能找出新玩法、新的business model，來為你的公司或你個人顛覆一下這個產業。

這裡倒是想到，前一陣子某政治團體找了「婉君」去上課。其實他們好好研讀一下這本書，也許更能找到他們的新方向，而不是只玩玩Line、貼貼FB，做些表層的工作。畢竟現在婉君們太精了，胃口也餵大了，沒做實質的轉變，很難滿足這些刁民呀。