Title: Progressive Web Apps Author: Rock Solid Published: 2016 年 9 月 14 日 Last modified: 2020 年 1 月 31 日 --- 搜尋外掛 ![](https://ps.w.org/progressive-web-apps/assets/banner-772x250.jpg?rev=1495726) 這個外掛**並未在最新的 3 個 WordPress 主要版本上進行測試**。開發者可能不再對這個 外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。 ![](https://ps.w.org/progressive-web-apps/assets/icon-256x256.png?rev=1910395) # Progressive Web Apps 由 [Rock Solid](https://profiles.wordpress.org/mikewire_rocksolid/) 開發 [下載](https://downloads.wordpress.org/plugin/progressive-web-apps.1.0.1.zip) * [詳細資料](https://tw.wordpress.org/plugins/progressive-web-apps/#description) * [使用者評論](https://tw.wordpress.org/plugins/progressive-web-apps/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/progressive-web-apps/#installation) * [開發資訊](https://tw.wordpress.org/plugins/progressive-web-apps/#developers) [技術支援](https://wordpress.org/support/plugin/progressive-web-apps/) ## 外掛說明 Progressive Web Apps are user experiences that have the reach of the web, and are: * **Reliable** – Load instantly even in uncertain network conditions. * **Fast** – Respond quickly to user interactions with silky smooth animations and no janky scrolling. * **Engaging** – Feel like a natural app on the device, with an immersive user experience. This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen. More details about PWAs here: [https://developers.google.com/web/progressive-web-apps/](https://developers.google.com/web/progressive-web-apps/) The WordPress Progressive Web Apps plugin helps bloggers, publishers and other content creators to go beyond responsive web design and ‘appify’ their existing mobile presence. Progressive Web Apps is supported on: iOS & Android. Compatible browsers: Safari, Google Chrome, Android – Native Browser. The plugin has been tested on WordPress 4.8 and later, we recommend using the latest WordPress version. The WordPress Progressive Web Apps plugin includes one FREE mobile PWA (MOSAIC) which is customizable (colors, fonts, appearance) via the WordPress admin area. The tech stack we used in building this Progressive Web App includes: * React JS * Semantic UI for UI components * Redux for app state management * SASS * Webpack (Create React App boilerplate) * Babel * Jest & Sinon for unit tests The MOSAIC PWA (available for FREE) is built with React JS. Most of the premium mobile progressive web apps available at [PWAThemes.com/progressive-web-app-themes.html](https://pwathemes.com/progressive-web-app-themes.html) are built using Angular/Ionic 1 or React. Each PWA comes with a “production” version, which in essence is the bundled/packaged/minified collection of all the necessary JS and CSS files for the PWA to run correctly. Each of our progressive web apps are tested with Karma, Jasmine and Protractor ( Angular) or Jest (React). We have an average of 70-80% code coverage and we’re working on improving this rate. While we do our best to catch any bugs out there, we are aware that some of them might escape us. Please reach out if you happen to come across a nasty one 😊. The FREE PWA MOSAIC available in the WordPress Progressive Web Apps plugin is the window-display of themes. You can instantly see several categories and choose which ones are of interest and focus on those. Depending on the number of displayed categories, the boxes will resize to fit all available space. It’s great for publishers that have posts spanning several categories and need a way to visually structure their content. It comes with support for: * Multi-image mosaic on cover page * Pages & sub-pages menu * Side-to-side navigation with lateral swiping through categories * Maximum 2 articles per card There are dozens of mobile progressive web apps available in the PRO version: [BASE](https://pwathemes.com/progressive-web-app-themes/base.html), [OBLIQ](https://pwathemes.com/progressive-web-app-themes/obliq.html), [ELEVATE](https://pwathemes.com/progressive-web-app-themes/elevate.html), [FOLIO](https://pwathemes.com/progressive-web-app-themes/folio.html), [INVISION](https://pwathemes.com/progressive-web-app-themes/invision.html), [POPSICLE](https://pwathemes.com/progressive-web-app-themes/popsicle.html), [PULSE](https://pwathemes.com/progressive-web-app-themes/pulse.html), [GHOST](https://pwathemes.com/progressive-web-app-themes/ghost.html), [PHANTOM](https://pwathemes.com/progressive-web-app-themes/phantom.html), [LUCID](https://pwathemes.com/progressive-web-app-themes/lucid.html), [EXTRUDE](https://pwathemes.com/progressive-web-app-themes/extrude.html), [VEDI](https://pwathemes.com/progressive-web-app-themes/vedi.html), [BLEND](https://pwathemes.com/progressive-web-app-themes/blend.html), [PURE](https://pwathemes.com/progressive-web-app-themes/pure.html), [FUTURE](https://pwathemes.com/progressive-web-app-themes/future.html)& [PALM](https://pwathemes.com/progressive-web-app-themes/palm.html). Additional key features available in PRO: * **Rich UI/UX** Your users can have a cozy browsing experience on their favorite mobile device without having to go to an App Store and install anything. * **Monetization** Take full control of your income by easily connecting the plugin with your Google DoubleClick for Publishers account. * **Translations** The plugin will automatically translate your mobile web app in one of the supported languages: Chinese (zh_CN), Dutch, English, French, German, Hungarian, Italian, Polish, Portuguese (Brazil), Romanian, Spanish or Swedish. * **Premium Support** We take pride in offering fantastic maintenance and hands- on support. Our team of friendly mobile experts makes sure technology doesn’t stand in your way. * **Analytics** Get to know your mobile users and analyze your impact with our powerful yet simple reader-centric analytics via Google Analytics integration. * **Add to Homescreen** Users can add your mobile web application to their homescreens making it just a tap away. * **Offline Mode** The application’s files are cached for offline usage together with the content. All of the categories, posts and pages that your users navigate to will be cached for offline usage. * **Web Push Notifications** We have integrated with the OneSignal WordPress plugin, allowing you to engage users through push notifications. Advanced PWA features like offline mode and web push notifications are implemented using service workers and are currently available on Chrome. We enjoy writing and maintaining this plugin. If you like it too, please rate us. But if you don’t, let us know how we can improve it. Have fun on your mobile adventures! ### Repositories Here are our Github development repositories: * [https://github.com/rock-solid/wordpress-progressive-web-apps](https://github.com/rock-solid/wordpress-progressive-web-apps)– The plugin files, same as you will find for download on WordPress.org. * [https://github.com/rock-solid/pwa-theme-mosaic](https://github.com/rock-solid/pwa-theme-mosaic)– The Progressive Web App source, built with React, Redux and Semantic UI. ## 螢幕擷圖 [⌊The Mosaic progressive web app⌉⌊The Mosaic progressive web app⌉[ The Mosaic progressive web app [⌊"App Themes" page from the admin panel.⌉⌊"App Themes" page from the admin panel .⌉[ “App Themes” page from the admin panel. [⌊"App Themes" page from the admin panel with other Premium app themes⌉⌊"App Themes" page from the admin panel with other Premium app themes⌉[ “App Themes” page from the admin panel with other Premium app themes [⌊"Look & Feel" page from the admin panel. Customize theme by choosing colors and fonts.⌉⌊"Look & Feel" page from the admin panel. Customize theme by choosing colors and fonts.⌉[ “Look & Feel” page from the admin panel. Customize theme by choosing colors and fonts. [⌊"Look & Feel" page from the admin panel. Customize theme by adding your own app icon & logo.⌉⌊"Look & Feel" page from the admin panel. Customize theme by adding your own app icon & logo.⌉[ “Look & Feel” page from the admin panel. Customize theme by adding your own app icon & logo. ## 安裝方式 #### Simple installation for WordPress v4.8 and later 1. Go to the ‘Plugins’ / ‘Add new’ menu 2. Upload progressive-web-apps.zip then press ‘Install now’. 3. Enjoy. #### Comprehensive setup A more comprehensive setup process and guide to configuration is as follows. 1. Locate your WordPress install on the file system 2. Extract the contents of `progressive-web-apps.zip` into `wp-content/plugins` 3. In `wp-content/plugins` you should now see a directory named `progressive-web- apps` 4. Login to the WordPress admin panel at `http://yoursite.com/wp-admin` 5. Go to the ‘Plugins’ menu. 6. Click ‘Activate’ for the plugin. 7. Go to the ‘Progressive Web Apps’ admin panel. 8. Choose color schemes, fonts and add your own logo and app icon. 9. Access your site in a mobile browser and check if the application is displayed. If the app is not loading properly, make sure that the [WordPress REST API](https://developer.wordpress.org/rest-api/) can be accessed in the browser and doesn’t return an error. 10. You’re all done! #### Testing your installation Ideally, use a real mobile device to access your (public) site address and check that the switching and mobile web app work correctly. You can also download a number of mobile emulators that can run on a desktop PC and simulate mobile devices. Please note that the progressive web app will be enabled only on supported devices: iOS & Android. Only the following browsers are compatible: Safari, Google Chrome, Android – Native Browser. ## 使用者評論 ![](https://secure.gravatar.com/avatar/3fdb5672a423a0e084a1039673a3ecf77424d3046e4f5d0902223de1b36f6b04? s=60&d=retro&r=g) ### 󠀁[OneSignal integration and wpms](https://wordpress.org/support/topic/onesignal-integration-and-wpms/)󠁿 [diegpl](https://profiles.wordpress.org/diegpl/) 2018 年 8 月 23 日 Hi, congrats for the plugin! 🙂 Does the OneSignal integration work for wpms? I` m asking because I see some other plugins have problems about that. Thank you very much! 😉 ![](https://secure.gravatar.com/avatar/fa4513fca2b9e707d2f476b15aa4c5a312f0a4ed5aafe092b5491429b60d4781? s=60&d=retro&r=g) ### 󠀁[Good but](https://wordpress.org/support/topic/good-but-134/)󠁿 [Benoît](https://profiles.wordpress.org/dafray31/) 2018 年 5 月 20 日 1 則留言 The plugin is good , the free theme is cool , but i find the theme are long to load… and please update your app ! ![](https://secure.gravatar.com/avatar/cb5739669330e0eb5336ae0dc2b1cb9a0b49333e2e9ac667a374d1ea04dd1708? s=60&d=retro&r=g) ### 󠀁[Awesome!](https://wordpress.org/support/topic/awesome-3955/)󠁿 [Kal2012](https://profiles.wordpress.org/kal2012/) 2017 年 1 月 16 日 You guys rock! Great job! Can´t wait to see future versions of the plugin! Suggestion: What about to add an “add to home screen” or “install” button? Thanks! ![](https://secure.gravatar.com/avatar/d7ef31bee954b77d869951390fc1cd1754b5f5d8b84d5a3a6bdcde44f545aa18? s=60&d=retro&r=g) ### 󠀁[Promising](https://wordpress.org/support/topic/promising-13/)󠁿 [pro99](https://profiles.wordpress.org/pro99/) 2016 年 11 月 3 日 PWAs are the future of WordPress and mobile apps. If this can deliver an app that works for desktop and mobile, on all browsers, with an AMP-first design and full PWA functions (offline, user management etc) it can become a very popular plugin. [ 閱讀全部 4 則使用者評論 ](https://wordpress.org/support/plugin/progressive-web-apps/reviews/) ## 參與者及開發者 以下人員參與了開源軟體〈Progressive Web Apps〉的開發相關工作。 參與者 * [ Rock Solid ](https://profiles.wordpress.org/mikewire_rocksolid/) * [ cborodescu ](https://profiles.wordpress.org/cborodescu/) [將〈Progressive Web Apps〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/progressive-web-apps) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/progressive-web-apps/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/progressive-web-apps/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/progressive-web-apps/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/progressive-web-apps/)。 ## 變更記錄 #### 1.0.1 * Small updates #### 1.0 * Completely rebuild Progressive Web App theme (Mosaic) using React, Redux and Semantic UI * Connected app with the WordPress REST API * Added PHP namespaces #### 0.7 * Security fix, replaced Smart App Banner script with jQuery Noty plugin #### 0.6 * Add Web App Install Banner( Add to Home Screen ) functionality * Translate app to Bosnian * Add resize image method for logo, icon and cover #### 0.5.1 * Add links to PWAThemes.com #### 0.5 * Various bug fixes for the Mosaic mobile app theme * Add separate tab for App Themes * Add manifest background color, to improve PWA score #### 0.1 * Initial release ## 中繼資料 * 版本 **1.0.1** * 最後更新 **6 年前** * 啟用安裝數 **10+** * WordPress 版本需求 ** 4.8 或更新版本 ** * 已測試相容的 WordPress 版本 **5.3.21** * PHP 版本需求 ** 5.4 或更新版本 ** * 語言 * [English (US)](https://wordpress.org/plugins/progressive-web-apps/) * 標籤: * [mobile](https://tw.wordpress.org/plugins/tags/mobile/)[mobile internet](https://tw.wordpress.org/plugins/tags/mobile-internet/) [mobile web](https://tw.wordpress.org/plugins/tags/mobile-web/)[progressive web apps](https://tw.wordpress.org/plugins/tags/progressive-web-apps/) [pwa](https://tw.wordpress.org/plugins/tags/pwa/) * [進階檢視](https://tw.wordpress.org/plugins/progressive-web-apps/advanced/) ## 評分 4.5 星，滿分為 5 星 * [ 2 個 5 星使用者評論 ](https://wordpress.org/support/plugin/progressive-web-apps/reviews/?filter=5) * [ 2 個 4 星使用者評論 ](https://wordpress.org/support/plugin/progressive-web-apps/reviews/?filter=4) * [ 0 個 3 星使用者評論 ](https://wordpress.org/support/plugin/progressive-web-apps/reviews/?filter=3) * [ 0 個 2 星使用者評論 ](https://wordpress.org/support/plugin/progressive-web-apps/reviews/?filter=2) * [ 0 個 1 星使用者評論 ](https://wordpress.org/support/plugin/progressive-web-apps/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/progressive-web-apps/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/progressive-web-apps/reviews/) ## 參與者 * [ Rock Solid ](https://profiles.wordpress.org/mikewire_rocksolid/) * [ cborodescu ](https://profiles.wordpress.org/cborodescu/) ## 技術支援 使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/progressive-web-apps/)