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

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

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

一. 什么是PWA?

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

1. 相對于安卓應(yīng)用，PWA有以下優(yōu)勢

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

2. 相對于H5產(chǎn)品，PWA有以下優(yōu)勢

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

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

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

二. 制作一個可安裝的PWA

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

制作一個PWA應(yīng)用，需要以下步驟：

1. 準備一個web應(yīng)用清單文件

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

清單文件類似：

{
  "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"
}

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

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

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

href指向清單文件的路徑。

2. 添加一個service worker

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

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

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

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

// 安裝 Service Worker
self.addEventListener("install", event => {
  // 執(zhí)行安裝過程，將需要緩存的文件添加到緩存中
  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 => {
      // 如果緩存中有匹配的請求，則直接返回緩存的響應(yīng)
      if (response) {
        return response;
      }
      // 否則，使用網(wǎng)絡(luò)請求
      return fetch(event.request);
    })
  );
});

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

// 監(jiān)聽推送事件
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. 實現(xiàn)一個PWA應(yīng)用

首先準備一個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，以及監(jiān)聽beforeinstallprompt事件。beforeinstallprompt事件是用戶可以安裝PWA應(yīng)用的前提條件。window監(jiān)聽到該事件被觸發(fā)，即可進行PWA的安裝，我這里將deferredPrompt賦值 window.deferredPrompt = e。然后在用戶點擊安裝的時候再探出安裝彈窗，改彈窗為系統(tǒng)彈窗。用戶點擊按鈕執(zhí)行：

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

    } else {

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

}

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

這樣就完成了一個PWA應(yīng)用的開發(fā)。

三. 測試PWA應(yīng)用

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

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

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

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

四. 應(yīng)用落地

什么類型的開發(fā)者和公司需要這個技術(shù)：

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

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

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

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

2. PWA優(yōu)勢

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

降低開發(fā)成本：開發(fā)一個PWA應(yīng)用，能夠兼顧網(wǎng)頁和移動應(yīng)用兩個平臺，節(jié)省了開發(fā)和維護成本。

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

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

3. 如何開發(fā)PWA？開發(fā)PWA需要注意以下幾個關(guān)鍵點：

4.PWA的未來

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

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