前言介紹
- 這款 WordPress 外掛「Super Progressive Web Apps」是 2018-01-23 上架。
- 目前有 50000 個安裝啟用數。
- 上一次更新是 2025-03-26，距離現在已有 38 天。
- 外掛最低要求 WordPress 3.6.0 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 5.3 以上。
- 有 223 人給過評分。
- 論壇上目前有 9 個提問，問題解答率 67% ，不低，算是個很有心解決問題的開發者團隊了！
外掛協作開發者
superpwa |
外掛標籤
pwa | chrome app | Android App | add to homescreen | progressive web apps |
內容簡介
Progressive Web Apps (PWA) 是一種新技術，結合了行動網頁和行動應用程式的優點，創造出出色的行動網頁體驗。它們會像正常應用程式（網頁應用程式）一樣安裝在手機上，並可從主屏幕訪問。
首頁 | 文件 | 幫助 | 高級版功能
使用者可以通過從主屏幕啟動應用程式並通過類似應用程式的界面與您的網站進行交互。您的回訪者將體驗幾乎即時的加載時間，並享受您的 PWA 的性能優勢！
Super Progressive Web Apps 讓您輕鬆將 WordPress 網站轉換為漸進式 Web 應用程式！
安裝 SuperPWA 後，從支援的移動設備瀏覽您的網站的使用者將看到“添加到主屏幕”的提示（從屏幕底部），並能夠在其設備的主屏幕上“安裝您的網站”。每個訪問的頁面都會在其設備上本地存儲，即使在離線時也可以閱讀！
SuperPWA 易於配置，只需不到一分鐘即可設置您的漸進式 Web 應用程式！ SuperPWA 通過刪除它創建的每個數據庫條目和文件來進行清潔卸載。實際上，除非您手動保存第一次，否則不會保存任何默認設置到數據庫中。請放心嘗試。
而且最好的部分？如果您遇到困難，我們在這裡幫您解決問題！如果您有問題或需要功能，請開啟支援工單。 我們非常期待聽到您的反饋，並希望真正幫助您為 WordPress 網站建立最佳的漸進式 Web 應用程式！
快速演示？
在支援的設備中打開 SuperPWA.com。
從“加入主屏幕”提示（Android Chrome）或瀏覽器菜單將網站添加到主屏幕。
從您的主屏幕打開應用程序，您將看到啟動畫面。
關掉您的數據和 wifi，以離線的方式開啟應用程式。您仍將能夠看到應用程式並瀏覽您已經訪問過的頁面。
瀏覽您以前未訪問過的頁面。將顯示離線頁面。
感謝 PWA 狂熱者！
我們深感社區的反饋。感謝所有相信我們並嘗試我們的插件的人。您的反饋是寶貴的，我們從您的經驗中學到了很多。謝謝您的愛和支持，我們希望通過努力為您帶來 WordPress 網站最好的漸進式 Web 應用程式插件來回報您的愛！
有哪些功能
這是超級漸進式Web應用程式的目前功能：
為您的網站生成清單並將其添加到您網站的 head。
為您的漸進式 Web 應用程式設置應用程式圖標。
為您漸進式 Web 應用程式的啟動畫面設置背景顏色。
您的網站在支援的瀏覽器中訪問時會顯示“添加到主屏幕”的提示。
使用 CacheStorage API 積極緩存頁面。
緩存的頁面一旦被緩存，即使使用者離線，也會被提供。
設置自定離線頁面：選擇您要當使用者訪問緩存沒有的頁面時，使用者離線時要看到的頁面。
原文外掛簡介
Progressive Web Apps (PWA) is a new technology that combines the best of mobile web and the best of mobile apps to create a superior mobile web experience. They are installed on the phone like a normal app (web app) and can be accessed from the home screen.
Home | Documentation | Help | Premium version Features
Users can come back to your website by launching the app from their home screen and interact with your website through an app-like interface. Your return visitors will experience almost-instant loading times and enjoy the great performance benefits of your PWA!
Super Progressive Web Apps makes it easy for you to convert your WordPress website into a Progressive Web App instantly!
Once SuperPWA is installed, users browsing your website from a supported mobile device will see a “Add To Home Screen” notice (from the bottom of the screen) and will be able to ‘install your website’ on the home screen of their device. Every page visited is stored locally on their device and will be available to read even when they are offline!
SuperPWA is easy to configure, it takes less than a minute to set-up your Progressive Web App! SuperPWA does a clean uninstall, by removing every database entry and file that it creates. In fact, none of the default settings are saved to the database until you manually save it the first time. Go ahead and give it a try.
And the best part? If you ever get stuck, we are here to watch your back! Open a support ticket if you have a question or need a feature. We are super excited to hear your feedback and we want to genuinely help you build the best Progressive Web App for your WordPress website!
Quick Demo?
Open up SuperPWA.com in a supported device.
Add the website to your home screen either from the Add to Home Screen prompt (Chrome for Android) or from the browser menu.
Open the app from your home screen and you will see the splash screen.
Turn off your data and wifi to go offline and open up the app. You will still be able to see the app and browse the pages you have already visited.
Browse to a page that you haven’t visited before. The offline page will be displayed.
Thank You PWA Enthusiasts!
We are humbled by the feedback from the community. Thanks to everyone who believed in us and tried our plugin. Your feedback has been invaluable and we have learned a lot from your experience. Thank you for your love and support and we hope to return the love by striving to bring you the best ever Progressive Web Apps plugin for WordPress!
What’s in the box
Here are the current features of Super Progressive Web Apps:
Generate a manifest for your website and add it to the head of your website.
Set the application icon for your Progressive Web App.
Set the background color for the splash screen of your Progressive Web App.
Your website will show the “Add to home screen” notice when accessed in a supported browser.
Aggressive caching of pages using CacheStorage API.
Pages once cached are served even if the user is offline.
Set custom offline page: Select the page you want the user to see when a page that isn’t in the cache is accessed and the user is offline.
New in version 1.2: Support for theme-color meta property. Change the color of browser address bar of Chrome, Firefox OS and Opera to match your website colors.
New in version 1.2: Now you can edit the Application Name and Application Short name.
New in version 1.2: Set the start page of your PWA.
New in version 1.2: Set Accelerated Mobile Pages (AMP) version of the start page. Supported plugins: AMP for WordPress, AMP for WP, Better AMP, AMP Supremacy, WP AMP.
New in version 1.3: Added support for high-quality splash screen. You can now set the 512×512 icon for the splash screen of your Progressive Web App.
New in version 1.3: Super Progressive Web Apps now accounts for content updates and will update the cache as you update the website.
New in version 1.3: Improved in-browser service worker update handling.
New in version 1.4: You can now set the default orientation of your PWA. Choose from “any” (Follow Device Orientation), “Portrait” and “Landscape”.
New in version 1.4: You can now set the theme_color property in the manifest.
New in version 1.5: OneSignal integration for Push notifications.
New in version 1.6: WordPress Multisite Network compatibility.
New in version 1.7: Add-Ons for SuperPWA is here! Ships with UTM Tracking Add-On to track visits coming from your PWA.
New in version 1.8: Compatibility issues with OneSignal are now resolved!
New in version 1.8: New Add-On: Apple Touch Icons that sets your app icons as Apple Touch Icons.
New in version 2.0: SuperPWA is now compatible with WordPress installed in a sub-folder.
New in version 2.0: You can now set display property from SuperPWA settings.
New in version 2.1.1: SuperPWA now supports Maskable Icons.
New in version 2.1.15: SuperPWA now supports Monochrome Icon.
Full changelog
Upcoming features:
Offline Indicator Notice.
PRO Version support additional advance feature
* Call To Action (CTA) More Info
* Android APK APP Generator More Info
* Data Analytics More Info
* Pre-Loader More Info
* App Shortcuts More Info
* QR Code Generator More Info
Progressive Web App Minimum Requirements
Progressive Web Apps require that your WordPress website is served from a secure origin i.e. your website should be HTTPS and not HTTP. If your website isn’t HTTPS, please contact your host about it. You can also ask us if you need help.
Device and Browser Support For PWA
Progressive web apps need browsers that support manifests and service workers. Currently Google Chrome (version 57+), Chrome for Android (62), Mozilla Firefox (57), Firefox for Android (58) are the major browsers that support PWA.
The list is fast growing and is likely to be supported in most major browsers by the end of this year.
How To Convert Your WordPress Website Into A Progressive Web App
WordPress Installation
Visit WordPress Admin > Plugins > Add New
Search for ‘Super Progressive Web Apps’
Click “Install Now” and then “Activate” Super Progressive Web Apps
To install manually:
Upload super-progressive-web-apps folder to the /wp-content/plugins/ directory on your server
Go to WordPress Admin > Plugins
Activate Super Progressive Web Apps plugin from the list.
Customizing Your Progressive Web App
Your Progressive Web App should be ready to test with the default settings on activation. You can customize it further and make it truly your own.
Go to WordPress Admin > SuperPWA
Set a Background Color for the splash screen to be shown when your PWA is opened on a mobile device.
Set the Application Icon. This will be the icon of your PWA when it is added to the homescreen in a mobile device. The icon must be a PNG image and exactly 192 x 192 pixels in size.
Set the Offline Page. This page will be displayed if the user is offline and the page he requested is not cached already. Ideally you should create a dedicated WordPress page and set it here. Within the page you create, you could add a note that reads, “It looks like you are offline and the page you requested is not available right now. Please check back again once you are online.”.
Click “Save Settings”.
Testing Your Progressive Web App
Open a supported browser in a supported device (for eg: Chrome for Android (62 or higher) in an Android Phone)
Enter your website and wait till it fully loads
You should see a pop-up that has your Application Icon and a button that reads “ADD TO HOME SCREEN”.
Click on it and your PWA will be added to your home screen. Wait for the install to complete.
Go to your home screen and open your PWA. Browse into a few pages if you like. Close the App.
Disconnect from the internet and now open your PWA again. You should be able to see all the pages that you previously browsed.
Try visiting a page that you did not visit before. You should see the page you set as your “Offline Page” in the settings of SuperPWA.
Troubleshooting Your Progressive Web App
Uh, oh. Your PWA did not work as expected? You do not see the “Add to Home Screen” notice?
Make sure your website has a SSL certificate installed. i.e. your website should be https instead of http (as in https://your-domain.com).
Make sure you are using a supported device and a supported browser. Refer to the “Device and Browser Support For PWA” list above.
Make sure your Application Icon and Splash Screen Icon’s are of PNG format and 192px X 192px and 512px X 512px in size respectively.
Clear the browser cache and try again. In Chrome for Android, go to Settings > Privacy > “Clear browsing data”.
If the application icon does not update after first install, delete the PWA from your phone, clear browser cache and install again. (We are working on making it better.)
Create a new support ticket and share a link to your website. We will take a look and figure it out for you.
Feature Requests, Issues, Pull Requests
Here is our repository on GitHub. Send us your pull requests, feature requests or issues, if any.
About us
We are a duo who got excited about the idea. Our mission is simple: Help you build an awesome PWA that your users would want to have on their home screen.
When we first heard about PWA we wanted to learn everything about it. We have spent countless hours learning and wants to share it with the world.
Please give us your constructive feedback and support.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Super Progressive Web Apps」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0 | 1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 1.6 | 1.7 | 1.8 | 1.9 | 2.0 | 2.1 | 2.2 | 1.1.1 | 1.3.1 | 1.7.1 | 1.8.1 | 2.0.1 | 2.0.2 | 2.1.1 | 2.1.2 | 2.1.3 | 2.1.4 | 2.1.5 | 2.1.6 | 2.1.7 | 2.1.8 | 2.1.9 | 2.2.1 | 2.2.2 | 2.2.3 | 2.2.4 | 2.2.5 | 2.2.6 | 2.2.7 | 2.2.8 | 2.2.9 | trunk | 2.1.10 | 2.1.11 | 2.1.12 | 2.1.13 | 2.1.14 | 2.1.15 | 2.1.16 | 2.1.17 | 2.1.18 | 2.1.19 | 2.2.10 | 2.2.11 | 2.2.12 | 2.2.13 | 2.2.14 | 2.2.15 | 2.2.16 | 2.2.17 | 2.2.18 | 2.2.19 | 2.2.20 | 2.2.21 | 2.2.22 | 2.2.23 | 2.2.24 | 2.2.25 | 2.2.26 | 2.2.27 | 2.2.28 | 2.2.29 | 2.2.30 | 2.2.31 | 2.2.32 | 2.2.33 | 2.2.34 | 2.2.35 | 2.2.9.1 | 2.2.14.1 | 2.2.23.1 | 2.2.24.1 |
延伸相關外掛（你可能也想知道）
PWA 》進階網頁應用程式（Progressive Web Apps）是一種擁有網頁使用者體驗的技術，其特點包括：, , 可靠 – 可在不確定的網路狀況下，即時加載而不會顯示網頁無法訪...。
PWA for WP – Progressive Web Apps Made Simple 》市面上，讓你的網站達到類APP的使用體驗！ PWA外掛在WP和AMP上，為你的觀眾帶來了Progressive Web Apps之強大功能。 它能讓你的網站在觀眾的主屏幕上像APP一...。
Progressive WordPress (PWA) 》在 WordPress 網站中添加漸進式網路應用程式 (PWA) 功能從未如此簡單。甚至支援 Accelerate Mobile Pages (AMP)，也與OneSignal相容！, 添加到主屏幕, 提供一...。
PWA — easy way to Progressive Web App 》Progressive Web Apps（PWA）是一種結合了移動網頁和移動應用程式優點的技術，可創建出優異的移動網頁體驗。它們像一般應用程式（網頁應用程式）一樣安裝在手...。
PWA for WordPress 》關於這個外掛, 這個外掛可以將您的 WordPress 網站轉換為 PWA，並在您的網站中創建兩個檔案，「Manifest」和「ServiceWorker」。, Manifest 檔案是一個包含網...。
WP-AppKit – Mobile apps and PWA for WordPress 》重要提示 ✋：自 1.5.3 版本開始，我們不再支援原生 iOS app。這是一個艱難的選擇，請在此處了解更多。, 具有漸進式 Web App（PWA）支援：1.5x 版本的釋出已...。
Hyper PWA 》Hyper PWA 外掛基於 web.dev 和 Workbox 開發，提供 Manifest 和 Service Worker 功能，與 Accelerated Mobile Pages (AMP)、OneSignal 和 Firebase 相容。它...。
SORTD 》Sortd. 是一個解決全球發行商和開發人員在開發 PWA 和 AMP 時面臨的挑戰的創新解決方案。我們的使命是讓每個人都能使用 PWA 和 AMP。, 使用 Sortd.，我們為出...。
Public Woo Api 》這個外掛允許以不需要身份驗證的方式取得 WooCommerce 的產品、分類、標籤、變異和評論。, 在 Github 上提供支援和請求：https://github.com/mickidum/public...。
Internet Connection Alert! 》此外掛能夠自動提醒訪問者，當他們失去網路連線時，使用者將會看到通知。此外掛使用自定義的 Offline.js 捕捉沒有網路連線時所產生的 AJAX 請求。, 這個 PWA ...。
WebSuite PWA 》WebSuite PWA 可以將您的網站轉換成漸進式網路應用程式(PWA)，並支援整合 AMP。, 它提供多種應用程式主題和配置選項，可以在所有智慧型手機和平板電腦上使用...。
Mobili 》這個外掛程式可以為使用者建立環境，讓使用者可以為透過行動裝置進入的訪客選擇獨立的主題和內容。此外，使用 Mobili 外掛程式，您可以在 WordPress 網站上使...。
Edgemesh 》如果不能測量，就無法提升, Edgemesh 是一個企業級的網站加速及效能監控服務，為許多電子商務龍頭服務，提供開發人員與管理者超過 20 個指標的店鋪速度即時分...。
VueFront PWA & SPA 》VueFront 是一個現代化的前端框架，可使任何 WordPress 和 Woocommerce 網站成為快速的單頁應用程序 (SPA) 和漸進式 Web App (PWA)。, DEMO: VueFront Web Ap...。
Smart PWA 》將您的網站轉換為漸進式Web應用程序。, 特點, , 添加應用程式清單, 離線支援, 。