Google Play 上架難？！五分鐘快速搭建PWA，搞定！

在當前激烈的應用市場競爭中，Google Play上架變得越來越困難。自2023年10月以來，Google不斷更新和迭代審核機制，加上用戶手機中預裝的Google Play，使得應用上架過程復雜化，成為廣大開發者的一大痛點。即使翻遍了Google的政策，向行業大佬請教經驗，仍然無法徹底解決這一難題。有的開發者甚至懷疑，企業法人、股東及其家屬是否被Google關聯，才導致頻繁被封號。即便總結了無數次做號和上架的經驗，親自動手操作，依然無法避免封號的命運，只有當事開發者才能體會其中的心酸。

在這種背景下，w2a（Web to APK）方式應運而生。雖然這并不是一個新鮮的解決方案，但w2a存在一個致命缺點，即未知來源報毒，指望用戶關閉Google Play的掃描機制顯然不現實。此外，相對于Google Play上架的產品渠道獲客而言，w2a的獲客成本顯然更高。

面對這些困境，越來越多的企業和開發者開始瞄準PWA（Progressive Web App，漸進式網絡應用）這種方式。PWA是Google在2016年提出的概念，現如今仿佛成為了最后一根救命稻草。接下來，我們將詳細解讀一下PWA應用。以下文章均以安卓平臺為例，IOS和其他平臺差不多。

一. 什么是PWA?

PWA（Progressive Web App）也叫做漸進式web應用，本質就是一個web網站。但是他可以提供用戶特定平臺的應用體驗，例如像安卓應用一樣打開網站。

1. 相對于安卓應用，PWA有以下優勢

免審核上架，無下架風險。快速安裝，更清量。無商店抽傭。

2. 相對于H5產品，PWA有以下優勢

更像一個應用，有自己的應用圖標。用戶易于訪問，增加用戶留存。可以離線和后臺操作。可以全屏，而不是在瀏覽器中運行。可以與設備集成。

因為 PWA 是網站，所以它們具有與任何其他網站相同的基本特性：至少有一個 HTML 頁面，其可能會加載一些 CSS 和 JavaScript。與普通網站一樣，頁面加載的 JavaScript 具有一個全局的 Window 對象，并且可以通過該對象訪問所有可用的 Web API。

一個webmanifest清單文件，提供應用圖標，名稱等。一個service-worker, 提供原生體驗。可以通過一張簡單的圖看出三者之間的區別：

二. 制作一個可安裝的PWA

PWA需要瀏覽器提示將其安裝到安卓設備上，安裝之后，用戶點擊應用圖標即可使用，而不再需要打開瀏覽器訪問。

制作一個PWA應用，需要以下步驟：

1. 準備一個web應用清單文件

web 應用清單是一個 JSON 文件，它告訴瀏覽器 PWA 應該如何在安卓設備上顯示。對于一個 H5應用程序來說，要成為一個 PWA應用，它必須是可安裝的，而要成為可安裝的，它必須包含一個清單文件。

清單文件類似：

{
  "id": "2944123480",
  "name": "Fierce Battle Breakout",
  "short_name": "Fierce Battle Breakout",
  "categories": [
    "photo",
    "productivity",
    "utilities"
  ],
  "start_url": "https://ts.malouapp.com",
  "display": "fullscreen",
  "theme_color": "#000",
  "background_color": "#fff",
  "description": "Fierce Battle Breakout",
  "icons": [
    {
      "src": "./logos/logo192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./logos/logo512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "orientation": "any"
}

清單文件中有一些類型是必須的

其他的類型可選，能夠設置更多的應用特性。準備好清單文件之后通過HTML的link標簽引入

<link rel="manifest" href="/manalo.webmanifest" />

href指向清單文件的路徑。

2. 添加一個service worker

service worker是一個提供離線體驗的fetch事件處理程序。本質上充當一個h5和瀏覽器之間的代理服務器。service worker提供了一些監聽事件：

使用service worker可以做很多功能：后臺數據同步、響應來自其他源的資源請求、接收地理位置和陀螺儀信息等、預加載資源、通知推送等。下面舉個例子：

// 定義緩存的名稱
const CACHE_NAME = "my-site-cache-v1";

// 需要緩存的文件列表
const urlsToCache = ["/images"];

// 安裝 Service Worker
self.addEventListener("install", event => {
  // 執行安裝過程，將需要緩存的文件添加到緩存中
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      console.log("緩存已打開");
      return cache.addAll(urlsToCache);
    })
  );
});

// 激活 Service Worker
self.addEventListener("activate", event => {
  // 清理舊的緩存
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames
          .filter(cacheName => {
            return cacheName !== CACHE_NAME;
          })
          .map(cacheName => {
            return caches.delete(cacheName);
          })
      );
    })
  );
});

// 攔截并處理請求
self.addEventListener("fetch", event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      // 如果緩存中有匹配的請求，則直接返回緩存的響應
      if (response) {
        return response;
      }
      // 否則，使用網絡請求
      return fetch(event.request);
    })
  );
});

// 處理通知
self.addEventListener("notificationclick", event => {
  console.log("通知被點擊");
  // 關閉通知
  event.notification.close();
  // 處理通知點擊事件，可以打開特定的頁面等操作
  // 例如：event.waitUntil(clients.openWindow('https://example.com'));
});

// 監聽推送事件
self.addEventListener("push", event => {
  console.log("接收到推送消息");
  const options = {
    body: "這是一條推送消息",
    vibrate: [100, 50, 100],
    data: {
      dateOfArrival: Date.now(),
      primaryKey: "2"
    }
  };
  event.waitUntil(self.registration.showNotification("Hello World!", options));
});

3. 實現一個PWA應用

首先準備一個H5頁面，我這里使用了一個仿寫的谷歌頁面：

在頁面的HTML文件中插入一個腳本：

<script>
  window.addEventListener('load', function () {
    if ('serviceWorker' in navigator) { 
      navigator.serviceWorker.register('/lol/service-worker.js').then(function (registration) {
        // 注冊成功
        console.log('ServiceWorker registration successful with scope: ',
          registration.scope);
      }).catch(function (err) {
        // 注冊失敗 :(
        console.log('ServiceWorker registration failed: ', err);
      });
    }else{
    }
    window.addEventListener("beforeinstallprompt",function (e) {
      e.preventDefault();
      console.log("獲取到deferredPrompt為：", e);
      window.deferredPrompt = e;
    });

  });
</script>

這個腳本的作用是注冊一個serviceWorker，以及監聽beforeinstallprompt事件。beforeinstallprompt事件是用戶可以安裝PWA應用的前提條件。window監聽到該事件被觸發，即可進行PWA的安裝，我這里將deferredPrompt賦值 window.deferredPrompt = e。然后在用戶點擊安裝的時候再探出安裝彈窗，改彈窗為系統彈窗。用戶點擊按鈕執行：

try {
  window.deferredPrompt.prompt();
  window.deferredPrompt.userChoice.then(choiceResult => {
    if (choiceResult.outcome === "accepted") {

    } else {

    }
    window.deferredPrompt = null;
  });
} catch (error) {

}

調用window.deferredPrompt.prompt()即可開始安裝PWA應用。然后準備一個H5游戲，在清單文件中寫入:【 "start_url": "https://ts.malouapp.com"】.

這樣就完成了一個PWA應用的開發。

三. 測試PWA應用

代碼運行沒有問題了，我們測試一下是否可以安裝PWA應用。首先我們在電腦上測試一下：

從安裝到卸載，絲滑無比。然后再來看下在安卓上的表現：

整個安裝過程不超過5s，雙擊打開游戲，錯以為就是原生app了。相較于安卓app, 長按圖標，會多一個網站設置。其他和原生app基本一致了。

根據上述的步驟，5分鐘就可以擼出一個PWA應用了。如果是同一個小游戲上架谷歌商店，沒有一個周搞不定的，還有審核不通過，以及下架的風險。

四. 應用落地

什么類型的開發者和公司需要這個技術：

1. 產品上架谷歌商店困難的開發者，很多開發者的產品因為各種原因，怎么都不被谷歌所接納，這類開發者需要PWA來破局。

2. 產品不被谷歌政策和國家政策允許，有部分開發者游離在法律邊緣，開發的產品不被政策允許，難于上架PWA可能正是這類開發者的救命稻草。

3. 輕量產品的測試，可以測試一個產品是否具備爆款品質，對于很多開發者來說，開發一款小游戲很簡單，但是上架就很難了，賬號問題遲遲解決不了，這時候PWA可以讓你的產品進入大眾視野，很大程度上可以測試爆款潛質。

4. H5產品想要轉型原生應用的個人和公司，不再需要跨平臺和上架應用商店，基于歷史原因，很多H5游戲開發者產品很成功，但是想要技術轉型成本很高，PWA可以一鍵生成app，正是不錯的選擇。

2. PWA優勢

上架便捷：PWA無需經過Google Play等應用商店的審核，極大地簡化了上架流程。

降低開發成本：開發一個PWA應用，能夠兼顧網頁和移動應用兩個平臺，節省了開發和維護成本。

提升用戶體驗：PWA能夠提供流暢的用戶體驗，離線訪問和自動更新功能增強了用戶粘性。

增加用戶覆蓋面：PWA通過URL即可訪問，用戶獲取應用更加方便，覆蓋面更廣。

3. 如何開發PWA？開發PWA需要注意以下幾個關鍵點：

4.PWA的未來

隨著技術的發展和用戶需求的變化，PWA有望在未來得到更廣泛的應用。對于面臨Google Play上架困難的企業和開發者來說，PWA提供了一條新的出路。盡管PWA還存在一些限制，如不支持某些原生應用功能，但其優勢和潛力不可忽視。通過不斷優化和創新，PWA有望成為主流的應用開發方式之一。

總之，在Google Play上架困難的情況下，PWA為企業和開發者提供了一種有效的解決方案。通過充分利用PWA的優勢，企業能夠在激烈的市場競爭中占據一席之地，滿足用戶多樣化的需求。