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的优势，企业能够在激烈的市场竞争中占据一席之地，满足用户多样化的需求。