瀏覽器

[教學] 將網頁變成Progressive Web Application (PWA) ,漸進式的網頁應用程式

2019/05/22

梅問題-[教學] 將網頁變成Progressive Web Application (PWA) - 漸進式的網頁應用程式
  前幾天與大家分享,當開啟Chrome內建的PWA功能,就可將PWA的網頁,一鍵變成一個應用程式,雖然說PWA只是在應用程式裡,包了Chrome的瀏覽器,但開啟時就像應用程式一般,讓網頁就像應用程式一般,其實簡單的來說,這就有點像PhoneGap的感覺,但比PhoneGap要來的簡單許多。

  因此只要將網頁加入一些簡單的宣告與設定,立即就可將一般的網頁變成PWA的網頁應用程式,真心覺得PWA是個好物,因此只要你會寫網頁,就可將你所設計的網頁變成一隻應用程式,而梅干則將平常常用的CKEditor編輯器,變成一隻應用程式,當要使用時,直接雙響所製作好的應用程式圖示,立即就可開啟啦!因此想要將手邊的網頁變成應用程式的朋友,現在就一塊來看看囉!


Step1
首先,你可先下載Chrome的「Web Server」擴充程式,再點「CHOSOSE FOLDER」鈕,選擇已製作好的網頁目錄。
梅問題-[教學] 將網頁變成Progressive Web Application (PWA) - 漸進式的網頁應用程式
Step2
點一下連結,並檢查網頁是否能正常呈現。
梅問題-[教學] 將網頁變成Progressive Web Application (PWA) - 漸進式的網頁應用程式
Step3
接著建立一個新的文件檔,並依的輸入應用程式名稱、圖示、與應用程式的URL,再將它儲存為「manifest.json」檔。
#manifest.json
{
 "short_name": "CKedit!",
 "name": "CKedit!",
 "icons": [{
  "src":"icons/192.png",
  "sizes": "192×192",
  "type": "image/png"
  }],
 "start_url": "http://127.0.0.1:8887/",
 "background_color": "#000",
 "theme_color": "#536878",
 "display": "standalone"
}
梅問題-[教學] 將網頁變成Progressive Web Application (PWA) - 漸進式的網頁應用程式
Step4
再開啟網頁,在head標籤中加入
梅問題-[教學] 將網頁變成Progressive Web Application (PWA) - 漸進式的網頁應用程式
Step5
這時開啟網頁的「開發人員工具」,並切到Application頁籤,就會看到Manifest選項,就會到剛所設定應用程式的名稱、圖示與URL。
梅問題-[教學] 將網頁變成Progressive Web Application (PWA) - 漸進式的網頁應用程式
Step6
接著再網頁前加入下方的語法。
梅問題-[教學] 將網頁變成Progressive Web Application (PWA) - 漸進式的網頁應用程式
Step7
接著再建立一個文件,並貼上下方的語法,儲存為service-worker.js,這時可看到在原來的網頁中,分別會多了manifest.jsonservice-worker.js圖片資料夾

service-worker.js
self.addEventListener('install', function(event) {
  self.skipWaiting();
  
  var offlinePage = new Request('offline.html');
  event.waitUntil(
  fetch(offlinePage).then(function(response) {
    return caches.open('offline2').then(function(cache) {
      return cache.put(offlinePage, response);
    });
  }));
}); self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request).catch(function(error) {
        return caches.open('offline2').then(function(cache) {
          return cache.match('offline.html');
      });
    }));
}); self.addEventListener('refreshOffline', function(response) {
  return caches.open('offline2').then(function(cache) {
    return cache.put(offlinePage, response);
  });
}); self.addEventListener('push', function (event) {
  var data = event.data.json();   var opts = {
    body: data.body,
    icon: data.icon,
    data: {
      url: data.url
    }
  };
  event.waitUntil(self.registration.showNotification(data.title, opts));
}); self.addEventListener('notificationclick', function(event) {
  var data = event.notification.data;   event.notification.close();   event.waitUntil(
    clients.openWindow(data.url)
  );
});
梅問題-[教學] 將網頁變成Progressive Web Application (PWA) - 漸進式的網頁應用程式
Step8
接著再回到網頁的「開發人員工具」的Service Workers時,就會看到綠色燈號。
梅問題-[教學] 將網頁變成Progressive Web Application (PWA) - 漸進式的網頁應用程式
Step9
都完成後,再點右上的選單圖示,就可看到「安裝XXX」。
梅問題-[教學] 將網頁變成Progressive Web Application (PWA) - 漸進式的網頁應用程式
Step10
點一下,就會出現安裝畫面,再點「安裝」。
梅問題-[教學] 將網頁變成Progressive Web Application (PWA) - 漸進式的網頁應用程式
Step11
當安裝完畢後,就會開啟剛所安裝的應用程式,哈!是不是畫面乾淨許多,就像在使用一般的應用程式一樣,有了PWA後,讓梅干可實現,透過網頁就能打造專屬的應用程式的夢想,且完全不用再學新語言,真是超方便的。
梅問題-[教學] 將網頁變成Progressive Web Application (PWA) - 漸進式的網頁應用程式