1.สร้าง folder ใน mobile ดังนี้
เช่น /mobile/install/90001, /mobile/install/90001
2.สร้าง 2 ไฟล์ ใน /90001 ดังนี้
-index.php สำหรับกล่าวยินดีต้อนรับการติดตั้ง(จะเรียกใช้เพียงครั้งเดียวตอนติดตั้งเท่านั้น)
-preloader.php สำหรับเป็น preloader โดยมีขั้นตอนการทำงานดังนี้
ก.ใช้คำสั่ง php อ่านค่า code จาก 5 หลักสุดท้ายของ path ไว้ในตัวแปรชื่อ $appcode
ซึ่งกรณีนี้จะได้ $appcode = 90001
ข.นำค่า code ไปเรียกเปิดโปรแกรมใช้งานจริง ใน parent root ดังนี้
/mobile/index.php?offi=$appcode
3.จะเปิดโปรแกรมใช้งานตามรหัส $appcode ตามต้องการ
ปล. หากไม่มีค่า $appcode จะแสดงข้อความ "ไม่พบรหัสหน่วยงาน" โปรแกรมไม่ทำงาน
หมายเหตุ
สำหรับการติดตั้ง PWA ด้วยการสร้าง HomeScreen shortcut มีหลักดังนี้
-.เปิด chrome แล้วกรอก url เป็น /mobile/install/90001
90001 เป็นชื่อ folder ที่สร้างในข้อ 1 (ตรงตามหน่วยงานที่จะใช้งาน)
-.ต้องสร้าง folder ตรงตามรหัสของหน่วยงาน ให้ครบตรงกับฐานข้อมูล
-.ใน menifest.json ให้กำหนดเรียกใช้จากไฟล์ preloader.php
ไฟล์ index.php
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>OLM : Online Leave Management by Adisak</title> <!--for mobile App looklike and Apple support--> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="manifest" href="manifest.json"> <link rel="apple-touch-icon" href="ico/v_icon.png"/> <link rel="apple-touch-icon" sizes="72x72" href="ico/v_icon.png"/> <link rel="apple-touch-icon" sizes="114x114" href="ico/v_icon.png"/> <!--//////////////////--> </head> <body> <?php /********************appcode/xxxxx/index.php by Adisak************************ OBJ : for Only installation at the First time with instarctor & welcome message *******************************************************************************/ //1.get code from foldername $url = "https://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; $appcode=substr($url,strlen($url)-15,5); //ใช้ -15 ตามความยาวPath ตามชื่อไฟล์ index.php /* //TESTER echo "page URL is : ".$url; echo "<br>"; echo $appcode; die; */ //2.Get office name from DB include('../../../db_inc.php'); $q="SELECT office_name FROM olm_admin WHERE office_id ='".$appcode."'"; $result = mysql_query($q); $row = mysql_fetch_row($result); $offi_name=$row[0]; // office name //3.Show on screen ?> <div style="overflow-x:auto;"> <center> Installation by Adisak </center> <table align="center" width="90%" bgcolor="silver"> <tr><td align="center"><br><br><br><img src="../../ico/v_icon.png"></td></tr> <tr><td align="center"><font size="6" color="green">ยินดีต้อนรับการติดตั้ง Application</font></td></tr> <tr><td align="center"><font size="5" color="green">สำหรับ<?=$offi_name;?></font> </td></tr> <tr><td><font size="4" color="blue"> มีวิธีการดังนี้<br> 1.คลิกปุ่มเรียกเมนู(ที่มุมขวาบน) <br> 2.คลิก "เพิ่มลงในหน้าจอหลัก" <br> 3.คลิกปุ่ม "เพิ่ม"<br> 4.ปิด Chrome แล้วเรียกใช้ShortCut จากหน้าจอหลัก<br><br><br> </font> </td></tr> </table> </div> </body> </html>
ไฟล์ preloader.php
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head> <body> <?PHP /********************preloader.php by Adisak*************** OBJ : for redirect to real app with parameter by query string ************************************************************/ //1.get code from foldername $url = "https://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; $appcode=substr($url,strlen($url)-19,5); //ใช้ -19 ตามความยาวPath ตามชื่อไฟล์ preloader.php //2.Create target link $target="../../index.php?offi=".$appcode; /* // TESTER echo "page URL is : ".$url; echo "<br>"; echo "page URL is : ".$appcode; echo "<br>"; echo "Target URL is : ".$target; die; */ //3. Redirect to link echo "<meta http-equiv='refresh' content='0;".$target."'>"; ?> </body> </html>
ไฟล์ menifest.json
{ "name": "ระบบบริหารการลา", "icons": [ { "src": "ico/v_icon.png", "sizes": "36x36", "type": "image/png", "density": 0.75 }, { "src": "ico/v_icon.png", "sizes": "48x48", "type": "image/png", "density": 1.0 }, { "src": "ico/v_icon.png", "sizes": "72x72", "type": "image/png", "density": 1.5 }, { "src": "ico/v_icon.png", "sizes": "96x96", "type": "image/png", "density": 2.0 }, { "src": "ico/v_icon.png", "sizes": "144x144", "type": "image/png", "density": 3.0 }, { "src": "ico/v_icon.png", "sizes": "192x192", "type": "image/png", "density": 4.0 } ], "start_url": "preloader.php", "display": "standalone" }
...... work สุดๆ Thank God.....
หมายเหตุ : วิธีเพิ่มหน่วยงานอื่นเข้าร่วมใช้ในAppเดียวกัน
เพียงสร้าง folder ด้วย รหัสหน่วยงาน ใน /mobile/install
เช่น /install/90002 แล้ว copy ไฟล์ทั้งหมดลงใน folder
แล้วแจ้ง Link ให้ผู้เกี่ยวข้องติดตั้งตามที่สร้างไว้
ไม่มีความคิดเห็น:
แสดงความคิดเห็น