ทดลองสร้าง PWA ด้วย Xamarin.Forms โดยใช้ Ooui Web Framework

PWA (Progressive Web App) คือการที่นักพัฒนาพยายามทำเวปให้ไกล้เคียง Native App มากที่สุด และสามารถติดตั้งลงบนมือถือเป็นแอปฯได้ทันที โดยไม่จำเป็นต้องผ่าน Google Play Store และทำงานแบบออฟไลน์ได้ด้วย บทความนี้ผมจะมาขอนำเสนอการพัฒนา Xamarin.Forms แล้วแปลงเป็น Web Assembly แล้วทำเป็น Progressive Web App (PWA) ติดตั้งลงเครื่องมือถือได้ทันทีครับ

บทความนี้จำเป็นต้องไปอ่านบทความก่อนหน้าและทำตามก่อนนะครับ (Article Requirement)

  1. ต่อจากโปรเจ็คเดิม CBFormsApp ให้กดปุ่ม Show All Files ที่ Solution Explorer

2018-04-04_13-10-29

  1. Copy ไฟล์ icon.jpg เข้าไปใส่ในโฟลเดอร์ dist
  2. สร้างไฟล์ดังนี้ manifest.json แล้วแก้ไขดังนี้
{
  "name": "CodeBangkok PWA",
  "short_name": "CodeBangkok",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#3498DB",
  "theme_color": "#3498DB"
}
  1. สร้างไฟล์ service-worker.js แล้วแก้ไขดังนี้
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
    'index.html',
    'service-worker.js'
];

self.addEventListener('install', function (event) {
    // Perform install steps
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(function (cache) {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
            })
    );
});

self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request)
            .then(function (response) {
                // Cache hit - return response
                if (response) {
                    return response;
                }
                return fetch(event.request);
            }
            )
    );
});

5.แก้ไขไฟล์ index.html เพิ่มคำสั่ง

<link rel="manifest" href="manifest.json">

ไปที่ head

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="manifest" href="manifest.json">
</head>

เพิ่ม script block

<script type="text/javascript">
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function () {
                navigator.serviceWorker.register('service-worker.js').then(function (registration) {
                    // Registration was successful
                    console.log('ServiceWorker registration successful with scope: ', registration.scope);
                }, function (err) {
                    // registration failed :(
                    console.log('ServiceWorker registration failed: ', err);
                });
            });
        }
</script>

ไว้ใน body

<body>
    <div id="ooui-body" class="container-fluid">
        <p id="loading"><i class="fa fa-refresh fa-spin" style="font-size:14px;margin-right:0.5em;"></i> Loading...</p>
    </div>
    <script defer type="text/javascript" src="ooui.js"></script>
    <script type="text/javascript">
            if ('serviceWorker' in navigator) {
                window.addEventListener('load', function () {
                    navigator.serviceWorker.register('service-worker.js').then(function (registration) {
                        // Registration was successful
                        console.log('ServiceWorker registration successful with scope: ', registration.scope);
                    }, function (err) {
                        // registration failed :(
                        console.log('ServiceWorker registration failed: ', err);
                    });
                });
            }
    </script>
    <script type="text/javascript">
            var assemblies = ["Microsoft.CSharp.dll","Mono.Security.dll","mscorlib.dll","MyPWA.dll","Newtonsoft.Json.dll","Ooui.dll","Ooui.Forms.dll","System.Core.dll","System.dll","System.Numerics.dll","System.Runtime.Serialization.dll","System.Xml.dll","System.Xml.Linq.dll","Xamarin.Forms.Core.dll","Xamarin.Forms.Platform.dll","Xamarin.Forms.Xaml.dll"];
            document.addEventListener("DOMContentLoaded", function(event) {
                oouiWasm("MyPWA", "MyPWA", "Program", "Main", assemblies);
            });
    </script>
    <script defer type="text/javascript" src="mono.js"></script>
</body>

เรามาทดสอบกันโดยใช้ Android Emulator

                  

Demo: https://github.com/CodeBangkok/CBFormsApp
Source: https://xamarinhelp.com/create-a-pwa-in-xamarin-forms-with-ooui-wasm/

บริจาค (Donate) ให้กับ CodeBangkok ได้ที่
BTC = 3GDxhb84ho2jmAV9seAgAFJ7dy1XR3GCyc
ETH = 0x119fa8A618A0283D1834853325A8FF4fe1101230
LTC = ME2abSdDeQYuTmzZSAnHL7LGGeF836d1ut
ZEC = t1Y4NkK3Dx3yBbwCVdpXzKYrqUSJSHgaFXa

https://www.lazada.co.th/products/codebangkok-i219874509-s334754949.html

https://www.lazada.co.th/products/c-net-core-i221844611-s338593893.html?spm=a2o6z.10453683.17.2.77ba30028gg3mg&mp=3

https://www.lazada.co.th/products/xamarin-i223854543-s342195260.html?spm=a2o6z.10453683.17.3.77ba300223Ar27&mp=3

1 Like