首先尋找出一支欲調效的Table或Query
 
再來我們可以先使用左上方工具列 'Query' 內的 Explain Current Statement
 便可以得到如以下的連結表
 
 
由圖中可以清楚的看見每一段Query後的資料量，並發現有數張表單是呈現紅色 'Full Table Scan'
，這代表該段Query對這張表單的每一行欄位都做了掃描。
再來我們在我們的Query前方加上 'EXPLAIN' 並執行
 
便得到了該段Query所關聯的表單與其詳細資訊

其中針對EXPLAIN的欄位說明如下：
table：關連到的資料表(Table)會顯示在此。
type：顯示使用了何種類型。從最優至最差的類型為const、eq_reg、ref、range、indexhe、ALL。
possible_keys：顯示可能使用到的索引。此為從WHERE語法中選擇一個適合的欄位名稱。
key：實際使用到的索引。如果為NULL，則是沒有使用索引。
key_len：使用索引的長度。長度越短 準確性越高。
ref：顯示那一列的索引被使用。一般是一個常數(const)。
rows：MySQL用來返回資料的筆數。
Extra：MySQL用來解析額外的查詢訊息。如果此欄位的值為：Using temporary和Using filesort，表示MySQL無法使用索引。
Extra為MySQL用來解析額外的查詢訊息，其中欄位值所代表的意義如下：
Distinct：當MySQL找到相關連的資料時，就不再搜尋。
Not exists：MySQL優化 LEFT JOIN，一旦找到符合的LEFT JOIN資料後，就不再搜尋。
Range checked for each Record(index map:#)：無法找到理想的索引。此為最慢的使用索引。
Using filesort：當出現這個值時，表示此SELECT語法需要優化。因為MySQL必須進行額外的步驟來進行查詢。
Using index：返回的資料是從索引中資料，而不是從實際的資料中返回，當返回的資料都出現在索引中的資料時就會發生此情況。
Using temporary：同Using filesort，表示此SELECT語法需要進行優化。此為MySQL必須建立一個暫時的資料表(Table)來儲存結果，此情況會發生在針對不同的資料進行ORDER BY，而不是GROUP BY。
Using where：使用WHERE語法中的欄位來返回結果。
System：system資料表，此為const連接類型的特殊情況。
Const：資料表中的一個記錄的最大值能夠符合這個查詢。因為只有一行，這個值就是常數，因為MySQL會先讀這個值然後把它當做常數。
eq_ref：MySQL在連接查詢時，會從最前面的資料表，對每一個記錄的聯合，從資料表中讀取一個記錄，在查詢時會使用索引為主鍵或唯一鍵的全部。
ref：只有在查詢使用了非唯一鍵或主鍵時才會發生。
range：使用索引返回一個範圍的結果。例如：使用大於>或小於<查詢時發生。
index：此為針對索引中的資料進行查詢。
ALL：針對每一筆記錄進行完全掃描，此為最壞的情況，應該盡量避免。

 
 
 
我們可以注意到 `browse_history` 這個表單在Query中並沒有使用索引，
可以從上方的QueryString中發現該段Query的Left Join是查詢`product_id`這個欄位，前往這個Table並幫其建立Index來增加檢索效率。
  
步驟三的時候可以選擇複數欄位來建立Index，但是要注意的是在使用索引欄位作為條件時，如果該索引是複合索引，那麼必須使用到該索引中的第一個欄位作為條件時才能保證系統使用該索引，否則該索引將不會被使用，並且應儘可能的讓欄位順序與索引順序相一致。

再來是在Query語句中應該注意以下事項
1.避免在索引列上進行運算， 這將導致引擎放棄使用索引而進行全表掃描。
2.不使用NOT IN和<>操作， NOT IN和<>操作都不會使用索引將進行全表掃描。NOT IN可以NOT EXISTS代替，id<>9則可使用id>9 or id<9來代替。
3.檢查where條件與order by 欄位，避免全表掃描。
4.應儘量避免在 where 子句中對欄位進行 null 值判斷，否則將導致引擎放棄使用索引而進行全表掃描，如： 可以在num上設定預設值0，確保表中num列沒有null值，然後這樣查詢： select id from t where num = 0
5.應儘量避免在 where 子句中使用 or 來連線條件，如果一個欄位有索引，一個欄位沒有索引，將導致引擎放棄使用索引而進行全表掃描。可以拆分條件，進行子句的union all查詢，如： select id from t where num=10 or name = 'admin'  拆分 select id from t where num = 10 union all select id from t where name = 'admin'
6.in 和 not in 也要慎用，否則會導致全表掃描，如： select id from t where num in(1,2,3) 對於連續的數值，能用 between 就不要用 in 了： select id from t where num between 1 and 3，
用 exists 代替 in 是一個好的選擇： select num from a where num in(select num from b) 換成 select num from a where exists(select 1 from b where num=a.num)
7.like語句的%不要前置， 否則索引失效 將導致全表掃描。
8.如果在 where 子句中使用引數，也會導致全表掃描。 因為SQL只有在執行時才會解析區域性變數，但優化程式不能將訪問計劃的選擇推遲到執行時；它必須在編譯時進行選擇。然 而，如果在編譯時建立訪問計劃，變數的值還是未知的，因而無法作為索引選擇的輸入項。
9.應儘量避免在where子句中對欄位進行函式操作，這將導致引擎放棄使用索引而進行全表掃描。
10.不要在 where 子句中的“=”左邊進行函式、算術運算或其他表示式運算，否則系統將可能無法正確使用索引。
11.在使用索引欄位作為條件時，如果該索引是複合索引，那麼必須使用到該索引中的第一個欄位作為條件時才能保證系統使用該索引，否則該索引將不會被使用，並且應儘可能的讓欄位順序與索引順序相一致。
12.Update 語句，如果只更改1、2個欄位，不要Update全部欄位，否則頻繁呼叫會引起明顯的效能消耗，同時帶來大量日誌。
對於多張大資料量（這裡幾百條就算大了）的表JOIN，要先分頁再JOIN，否則邏輯讀會很高，效能很差。
13.select count(*) from table；這樣不帶任何條件的count會引起全表掃描，並且沒有任何業務意義，是一定要杜絕的。
14.任何地方都不要使用 select * from t ，用具體的欄位列表代替“*”，不要返回用不到的任何欄位。
15.避免頻繁建立和刪除臨時表，以減少系統表資源的消耗。臨時表並不是不可使用，適當地使用它們可以使某些例程更有效，例如，當需要重複引用大型表或常用表中的某個資料集時。但是，對於一次性事件， 最好使用匯出表。
16.在新建臨時表時，如果一次性插入資料量很大，那麼可以使用 select into 代替 create table，避免造成大量 log ，以提高速度；如果資料量不大，為了緩和系統表的資源，應先create table，然後insert。
17.儘量拆分大的 DELETE 或INSERT 語句，批量提交SQL語句。
18.儘量避免使用遊標，因為遊標的效率較差，如果遊標操作的資料超過1萬行，那麼就應該考慮改寫。

參考來源:
1. http://blog.twbryce.com/mysql-explain/
2. https://www.gushiciku.cn/pl/gkis/zh-tw
3. https://www.itread01.com/content/1548581229.html

Lucene.Net是一套C#開源全文索引庫，其主要包含了:
· Index : 提供索引的管理與詞組的排序
· Search : 提供查詢相關功能
· Store : 支援資料儲存管理，包括I/O操作
· Util : 共用套件
· Documents : 負責描述索引儲存時的文件結構管理
· QueryParsers : 提供查詢語法
· Analysis : 負責分析內容
要達到高效能的全文檢索讓機器可以明白我們的語言，最重要的關鍵就是"分詞器"了。
試想一下這一句話你會如何拆分成一段一段的關鍵字呢?
"一天一蘋果，醫生遠離我"
還有英文版本
"An apple a day, doctor keep me away."
中文版本的拆分:
"一天"、"一"、"蘋果"、"醫生"、"遠離"、"我"
英文版本的拆分:
"apple"、"day"、"doctor"、"keep"、"me"、"away"
有沒有注意到不同語系所分析出來的關鍵字有一點不一樣呢?
而在Lucene中分詞的工作會交給Analysis來完成，
不過我們可以依照不同的語系去選擇想使用的分詞器(Analyzer)！

首先簡單說明一下Lucene的實作流程
1. 確認主要搜尋的語系來決定使用的分詞器(analyzer)
2. 建立Document依照analyzer匯入資料
(前置完成)
3. 建立IndexSearcher導入準備好的Document
4. 建立Parser來分析SearchValue
5. 使用IndexSearcher分析Parser取得結果(Hits)
*本專案使用的是Lucene.Net 3.0.3*
接下來我們來建立一個提供查詢使用的Document。

       

 // 取得或建立Lucene文件資料夾

        if (!File.Exists(_dir.FullName))

        {

            System.IO.Directory.CreateDirectory(_dir.FullName);

        }

        // Asp.Net Core需要於Nuget安裝System.Configuration.ConfigurationManager提供用戶端應用程式的組態檔存取

        Lucene.Net.Store.Directory directory = FSDirectory.Open(_dir);

        // 選擇分詞器

        var analyzer = new StandardAnalyzer(Lucene.Net.Util.Version.LUCENE_CURRENT);

        // 資料來源

        var repository = new Repository();

        // 依照指定的文件結構來建立

        var indexWriter = new IndexWriter(directory, analyzer, true, IndexWriter.MaxFieldLength.LIMITED);

        foreach (var index in repository)

        {

            var document = new Document();

            document.Add(new Field("Id", index.Id.ToString(), Field.Store.YES, Field.Index.NO));

            document.Add(new Field("Name", index.Name, Field.Store.YES, Field.Index.ANALYZED));

            document.Add(new Field("Description", index.Description, Field.Store.NO, Field.Index.ANALYZED));

            indexWriter.AddDocument(document);

        }

        indexWriter.Optimize();

        indexWriter.Commit();

        indexWriter.Dispose();

如此一來我們就建立好Lucene的基本配備囉！
其中analyzer的部分我們使用Lucene.Net預設，
要特別注意的是，其處理中文語系的能力非常之爛！
之後再寫一篇文章深入探討。
再來值得一提的是
       

document.Add(new Field("Id", index.Id.ToString(), Field.Store.YES, Field.Index.NO));

前兩個參數就是Key跟Value，可以簡單理解為欄位與其內容。
後面兩個參數是重點！
Store: 代表是否儲存這個Key的Value
例如在google打上台南美食會搜索出許多不同的文章連結，
不過google給你的資料中最重要的不是文章內容(Description)，
而是哪一篇文章(Name)與台南美食最有關係。
假如今天我只要回傳一個列表而不用提示文章中有哪些內容，
那麼我就可以選擇給"Description" Field.Store.No來節省空間。
Index:
· NO - 不加入索引，這個內容只需要隨著結果出爐，不需要在查詢的時候被考慮。
· ANALYZED、NOT_ANALYZED - 是否使用分詞
· NO_NORMS - 關閉權重功能
或許許多人會對權重功能(NORMS)感到疑惑，
簡單的舉個例子
{ Id=1, Key="蘋果", Value="一天一蘋果，醫生遠離我。"}
{ Id=2, Key="橘子", Value="醫生給娜美最珍貴的寶藏。"}
{ Id=3, Key="梨子", Value="我是梨子，比蘋果蘋果好吃多囉！"}
當我搜尋"蘋果"的時候結果會是
{ Id=1, MatchKey=1, MatchValue=1, Score=(1*5) + (1*2) = 7}
{ Id=3, MatchKey=0, MatchValue=1, Score=(0*5) + (2*2) = 4}
有發現了嗎？
雖然同樣都對中兩個結果但是Id 1的資料Key值中有包含關鍵字，
因此得到較高的分數排在Id 3前方
準備好Document了，我們可以開始來實際使用看看囉！

       

// 決定所要搜索的欄位

        var parser = new QueryParser(Lucene.Net.Util.Version.LUCENE_CURRENT, "Description", analyzer).Parse(searchValue);

        // 提供剛剛建立的Document

        var indexSearcher = new IndexSearcher(directory);

        // 搜尋取出結果的數量

        var queryLimit = 20;

        // 開始搜尋！

        var hits = indexSearcher.Search(parser, queryLimit);

        if (!hits.ScoreDocs.Any())

        {

            Console.WriteLine("查無相關結果。");

            return;

        }

        Document doc;

        foreach (var hit in hits.ScoreDocs)

        {

            doc = indexSearcher.Doc(hit.Doc);

            Console.WriteLine("Score :" + hit.Score + ", Id :" + doc.Get("Id") + ", Name :" + doc.Get("Name") + ", Description :" + doc.Get("Description"));

        }

最後的結果(Hits)，是需要再回到Document去撈出對應的資料喔！
是不是非常簡單呢？
筆者寫了一個簡單的範例在GitHub上，秉持著追求新技術的心使用了.Net 6，還請各位大大多多包涵。
有中英文兩種Repository，只需要在上方的DI注入切換就可以囉！
GitHub連結: https://github.com/g13579112000/Lucene
筆者第一次撰寫這種教學文章，有哪邊錯誤的非常歡迎一起來討論指教。
之後有機會再撰寫Lucene更深入的應用方面，
例如權重的分配與分詞器的選擇與使用。
感謝您的閱讀。


參考文獻：
1.黑暗大大的全文檢索筆記: https://blog.darkthread.net/blog/lucene-net-notes-1/
2.使用.Net實現全文檢索: https://blog.csdn.net/huwei2003/article/details/53408388
3.伊凡的部落格: http://irfen.me/5-lucene4-9-learning-record-lucene-analysis-tokenizer/
4.純淨天空代碼範例: https://vimsky.com/zh-tw/examples/detail/csharp-ex-Lucene.Net.Documents-Document---class.html

Browser:
safari in iphone 
chrome in iphone
chrome in android
in Line (APP)
in FB (APP)

HTML:
form target="_blank"
window.open
link target="_blank"

Trigger:
onclick in tag
.click with jquery
submit button

加構獨立的 API Server 時, 要使用 Cookie 認証必需有以下條件:

1. Web Server 和 API Server 有相同的父網域.
2. Cookie 的網域指定到相同的父網域.
3. 在 API 的 Application 中允許 CORS Request, 需要修改 Startup.cs

3.1 在 ConfigureServices 中要加入  AddCors, 而且要記得 AllowCredentials()

        public void ConfigureServices(IServiceCollection services)

        {

            services.AddCors(options =>

            {

                options.AddPolicy(name: "Cors(PolicyName",

                                 builder =>

                                 {

                                     builder.WithOrigins("https://web1.yourdomain.com",

                                                         "https://web2.yourdomain.com")

                                     .AllowCredentials();

                                 });

            });



            services.AddControllers()

                .AddNewtonsoftJson(opt =>

                 opt.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver());

3.2 在 Configure 中, 要加入 app.UseCors("Cors(PolicyName"), 記得要在  UseAuthorization() 之前.

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

        {

            app.UseExceptionMiddleware();



            app.UseHttpsRedirection();



            app.UseHttpsRedirection();



            app.UseRouting();



            app.UseCors(MyAllowSpecificOrigins);



            app.UseAuthorization();

4. 在 Client 端要加上 withCredentials: true

                            $.ajax({

                                url: apiRoot + "apiurl",

                                type: 'GET',

                                dataType: 'json', // 預期從server接收的資料型態

                                success: function (res) {

                                    console.log("success: ");

                                    console.log(res);                                    

                                },

                                xhrFields: {

                                    withCredentials: true

                                },

                                error: function (XMLHttpRequest, textStatus, errorThrown) {

                                    alert("發生錯誤");

                                }

                            });

在後端部分，因為有uw元件，在處理url時已經很好處理了
但是在JavaScript因為我們沒有固定js在使用，
因此提供一套簡易使用網址處理工具
thisPage.ParameterByName(key) //取得網址上特定參數
thisPage.OriUrl(key) //中間一段提供修改變數的功能

    <script>

        var thisPage = {

            Init: function () {

                thisPage.InitPageInput();



                $("body")

                    ;

                thisPage.ChangeEvent();

            },

            ParameterByName: function (targetKey) {

                var res = null;

                const urlSearchParams = new URLSearchParams(window.location.search);

                const params = Object.fromEntries(urlSearchParams.entries());

                for (const [key, value] of Object.entries(params)) {

                    if (targetKey.trim().toLocaleLowerCase() === key) {

                        res = value;

                    }

                }

                return res;

            },

            OriUrl: function () {

                var arrayUrl = [];

                arrayUrl.push(window.location.protocol);//https:

                arrayUrl.push("//");

                arrayUrl.push(window.location.hostname);//blog.uwinfo.com.tw

                if (window.location.port.length > 0) {

                    //大多情況，不用特別指定port

                    arrayUrl.push(":");

                    arrayUrl.push(window.location.port);//80

                }

                arrayUrl.push(window.location.pathname);//post/Edit.aspx

                //換一套寫法

                //arrayUrl.push(window.location.search);//?Id=321

                const urlSearchParams = new URLSearchParams(window.location.search);

                const params = Object.fromEntries(urlSearchParams.entries());

                var ayyarQueryString = [];

                //這邊可以加工增加額外的key值

                for (const [key, value] of Object.entries(params)) {

                    if (value.trim().length > 0) {

                        //這邊要注意中文需要encode

                        ayyarQueryString.push(key + "=" + encodeURIComponent(value));

                    }

                }

                if (ayyarQueryString.length > 0) {

                    arrayUrl.push("?");

                    arrayUrl.push(ayyarQueryString.join('&'));

                }

                return arrayUrl.length > 0 ? arrayUrl.join('') : '';

            },

            InitPageInput: function () {

                const urlSearchParams = new URLSearchParams(window.location.search);

                const params = Object.fromEntries(urlSearchParams.entries());

                for (const [key, value] of Object.entries(params)) {

                    $('input[name=' + key + ']').val(value);

                    //這邊因為input有多種不同輸入方式，可以自行編輯

                    //$('select[name=' + key + ']').val(value);

                    //$('textarea[name=' + key + ']').html(value);

                }

            },

            ChangeEvent: function () {



            },

        }

        $(function () {

            thisPage.Init();

        });

    </script>

今天小三的網站發生怪異的情況，造成網站莫名其妙跑出天天簽到的彈跳視窗

var oEM = new EverydayMain();

oEM.EndDate__StartOrEqual = DateTime.Now.Date; //只要限結束日期就好. (以日為單位)

oEM.Type = EN.Type.彈出式;



oEM.QuerySql();

// 卻產出SQL Select * from [Everyday_Main] With(NoLock)

// 但應該產出 Select * from [Everyday_Main] With(NoLock)    Where [EndDate] >= Convert(datetime, '2021-07-15T00:00:00') and [EN_Type] = 200

使用 set 條件，但產出的SQL卻是沒有 where 字串，這情況我是第一次遇到
是不是產出SQL時這中間用到 static 物件，可能要查一下
-----------------------------

        private static Hashtable _htTypeDefines;

        public static Hashtable htTypeDefines

        {

            get

            {

                if (_htTypeDefines == null)

                {

                    _htTypeDefines = new Hashtable();

                    _htTypeDefines.Add("Id", "int");

看樣子是網站第一次使用DB物件時，兩個 thread 同時在跑會造成這樣的現象
這裡應該要 lock 
 

試說明以下程式碼的功用, 以及可改進的部份.

        string EndDate = Request["EndDate"];



        DataTable qtyControls = U2.SQL.DTFromSQL("Select YA00, PD00 from QtyControl Where EndDate > '" + EndDate + "' and SoldQty >= InitQty");



        var values = qtyControls.AsEnumerable().Select(r => "('" + r.Field<string>("YA00") + "','" + r.Field<string>("PD00") + "')").ToList();



        var sqls = new List<string>();

        sqls.Add("Delete StopSaleYAP;");



        int start = 0;        

        while(start < values.Count)

        {

            var end = start + 999;

            if(end > values.Count - 1)

            {

                end = values.Count;

            }



            sqls.Add("insert into StopSaleYAP(YA00, PD00) Values" + string.Join(",", values.GetRange(start, end)) + ";");



            start = end + 1;

        }



        U2.SQL.ExecuteSQL(string.Join("\r\n", sqls));

        public static bool IsErrorOrder(Order.Input.CheckValidOrder dto)

        {

            if (dto.OrderNos == null || dto.OrderNos.Count == 0)

            {

                return false;

            }



            var orderCount = dto.OrderNos.Count();

            var orders = NpreoOrderMain.GetList(dto.OrderNos);

            if (orders.Count != orderCount || !dto.OrderNos.Any(x => orders.Select(o => o.Order_No).Contains(x)))

            {

                return true;

            }

            return false;

        }

        var fu = Request.Files[0];

        fu.SaveAs(Server.MapPath("UploadFiles/") + fu.FileName);

--

基本題:

1. 對 Linq 熟嗎.

2. 對 ASP.Net 的 Cache  熟悉嗎.

3. 用過什麼 ORM, 試說明優缺點.

4. 試說明 MVC 的架構.

資安相關問題:

1. 試說明 SQL Injection

2. 試說明 Cross Site Injection.

3. 上傳檔案要注意的事項.

4. 試說明 cookie 的安全設定 ? same site, secure, http only.


前端相關加分題:

1. jQuery 或 Vue 熟悉嗎 ?

2. 試說明 RWD

3. 試說明 bootstrap

進階問題:

1. 試說明 Reflection

2. 試說明 Dependency Injection

3.  試說明 singleton vs static

4. 試單有兩個欄位 Id, Status (付款待確認: 1.1;  已付款: 2,  訂單已出貨: 3; 訂單取消中: 5; )
狀態 1.1 和 狀態 2 的訂單可取消，取消後改為狀態 5

客人要取消訂單，訂單編號為 123, 試說明程式執行的過程。

錯誤訊息：
WebForms UnobtrusiveValidationMode 需要 'jquery' 的 ScriptResourceMapping。請加入 ScriptResourceMapping 命名的 jquery (區分大小寫)。

解決方式：
在有用 validation 那頁的 Page_Load 加上，就恢復正常了
protected void Page_Load(object sender, EventArgs e)
{
     UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;
}

參考來源：
https://blog.xuite.net/tolarku/blog/63451508-VS+2012+%E5%88%9D%E9%AB%94%E9%A9%97+-+%E9%9C%80%E8%A6%81+%27jquery%27+%E7%9A%84+ScriptResourceMapping+%E9%8C%AF%E8%AA%A4
https://www.c-sharpcorner.com/UploadFile/cd7c2e/enabling-unobtrusive-validation-mode-in-Asp-Net-4-5/

使用範例如下:

    void getList()

    {

        var Q = TN.Admin.TCatOrderDeliveryRecord.Select().OrderBy("DeliveryCompletion_Date, Id Desc");



        if (U2.WU.IsNonEmptyFromQueryStringOrForm("OD00"))

        {

            Q.And("OD00 = ", U2.WU.GetValue("OD00"));

        }



        if (U2.WU.V.StartDate_IsOK)

        {

            Q.And("DeliveryCompletion_Date >= ", U2.WU.V.StartDate);

        }



        if (U2.WU.V.EndDate_IsOK)

        {

            Q.And("DeliveryCompletion_Date < ", U2.WU.V.EndDate);

        }



        U2.JSON.WriteSuccessData(Q.GetPageDT2(U2.WU.V.CurrentPage, U2.WU.V.PageSize));

    }

過去都是使用 jquery lazy load js 來實作延遲載圖，
其運作原理是偵測scroll事件以及img物件的相對位置來決定要不要load圖片

現在有更簡單的方式，就是用 IntersectionObserver API 這個 Web標準
來偵測 img 物件是不是進入可視 webview 範圍
https://developers.google.com/web/updates/2016/04/intersectionobserver

document.addEventListener("DOMContentLoaded", function() {

var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));;



if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {

    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {

     entries.forEach(function(entry) {

        if (entry.isIntersecting) {

         let lazyImage = entry.target;

         lazyImage.src = lazyImage.dataset.src;

         lazyImage.srcset = lazyImage.dataset.srcset;

         lazyImage.classList.remove("lazy");

         lazyImageObserver.unobserve(lazyImage);

        }

     });

    });



    lazyImages.forEach(function(lazyImage) {

     lazyImageObserver.observe(lazyImage);

    });

}

//這裡可以加上else處理萬一瀏覽器不支援的狀況

});

網頁裡面只要用  <img data-src='圖片網址' class='lazy' />  就可以啦

IntersectionObserver API
目前 Can I Use 網站顯示大部分 browser 都支援，iOS safari 要 12.2 版才支援
應該可以放心使用